magpiebrain

Sam Newman's site, a Consultant at ThoughtWorks

Posts from the ‘Web Design’ category

As you may of noticed, I’ve been having some problems with the “@overflow@(w3c – Overflow and clipping)”:http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping property and IE. Simply put, @overflow@ should define how content outside the displayable area is handled. Using the @auto@ value should display scrollbars when required – and this works perfectly on Mozilla. On IE however I couldn’t get it to work at all.

The problem is seems is that IE isn’t bright enough to work out the width of the on screen element – if I give my @pre@ blocks a width (which I can now do with a fixed-width layout) it correctly displays horizontal scrollbars and stops playing havoc with my layout. Its not all plain sailing however – when it adds the horizontal scrollbar, it doesn’t correctly resize the @pre@, and therefore also displays vertical scrollbars! Oh well, such is life…

OK, I finally got around to the redesign this weekend, and its gone fairly well. I’ve moved from a liquid to a fixed layout, as the site was almost unreadable on high resolution monitors and many of the design changes I wanted to make become overly complex. One downside to moving to a fixed-width layout occurs with preformatted blocks of text. @

I sent some experimental code live today which I’ve been working on a little over the last couple of days. Now visible on the individual entry pages is a ‘Printable Version’ link that can be seen on the bottom left of the post’s content, which when clicked extracts (nearly) all links and creates a series of footnotes with the URL’s displayed. It also extracts any printing stylesheets and displays them so you get a better idea as to how it will print. Hopefully this technique will make printing from sites with many hyperlinks more useful.

The code is completely written in Javascript, and I hope to publish a full writeup on how it works in the next few days. The idea was inspired by an “IE-only bookmarklet”:http://www.kokogiak.com/gedankengang/default.asp#12012200393, although it has been completely rewritten to be supported in more browsers. In the meantime I’d appreciate it if you could let me know of any problems with the technique, especially if there are any problems with Safari or Opera (neither of which I have to hand right now). Known problems include:

* Some links probably shouldn’t be extracted as footnotes – for example the next/last post controls. I am filtering some out already so thats an easy fix.
* No effort has gone into styling the footnote section
* the printing stylesheet is quite primitive – it hides the side menu for example by doesn’t expand the main column to take advantage of the extra space which is available.
* It seems to break the automatic citation links for block quotes, although I have a good idea as to what’s causing that
* The location of the ‘printable version’ is a little out of the way – my aim is that when the code is finished the ‘printable version’ will be available on every page.
* The only way to get back to the non-printable version is using the back button.
* I need to see if there is some proper semantic markup to be used for footnotes

Whilst the technique is being used here for printing, it can easily be applied just to fit in with a site’s editorial style.

_Update_ 1: Oh, and I’ve just noticed the Javascript is stopping the document from validating as (X)HTML Transitional…

_Update_ 2: Also if the text for a link contained other HTML elements, the text is being displayed unformatted – again this is a fairly easy fix.

_Update_ 3: Priting broke when I uploaded the new design, so I’ve taken it off line for the moment until the issues are resolved.

“Charles Miller”:http://fishbowl.pastiche.org/ has posted up on the Javablogs confluence wiki some information on “including Javablogs generated statistics graphs”:http://confluence.atlassian.com/display/JAVABLOGS/Including+Javablogs+Statistics+Graphs+on+Your+Blog on your site. The example HTML mixes the semantics of the markup with the presentation logic:

Entries Added

There are several issues with this markup. Firstly, there is a @

@ with no purpose other than to center our image. Secondly it uses a font @@ tag to create a title. Finally it uses the @border@ attribute on the image. All of these aspects are presentation logic, and as such should really be moved into CSS. The benifits of seperating presentation from content using proper semantic markup and CSS are many and varied, and I won’t go into them in depth here, suffice to say that if you’re intersted in the topic, grab a copy of Jeffrey ZeldmanÂ’s “Designing With Web Standards”:http://www.zeldman.com/dwws/, or checkout any of these sites:

* “A List Apart”:http://www.alistapart.com/
* “Mezzoblue”:http://www.mezzoblue.com/
* “The Daily Report”:http://www.zeldman.com/

Not being the one to point out the flaw and offer no better alternatives, I went about producing some nice compliant markup. Firstly, I started with the HTML itself:

Entries to Javablogs over time

Entries to Javablogs over time

Hits from Javablogs this week

Hits from Javablogs this week

Gone are the @@ tags, the @border=@ attribute, the useless @

@ tag. On its own, this looks pretty uninspiring. For a start, by putting the graphs in a @div@ they appear below each other. This is easily fixed with a bit of css:

.graph {
  float: left;
  margin-left: 30px;
}

The @margin-left@ gives a bit of a gap between the two graphs which now sit next to each other. This can introduce another problem however – any @div@ following the @graph@ will also appear on the same line – in my case my related entries @div@ was at fault – this was fixed using @clear@:

.related {
  clear:both;
}

Next, we want our graphs to be centred:

.graph img {
  text-align: center;
}

And finally format our caption:

.graph .caption {
  text-align: right;
  text-style: italic;
  font-size: 90%;
}

Net result? The HTML is smaller, and yet more meaningful – the presentation is entirely within CSS meaning we can easily use the same styles elsewhere, and we can also change styles quickly (and even have different styles for specific users). You can now see the end result on my “Site Statistics”:http://www.magpiebrain.com/archives/000227.html page.

A nice little site this – “Widgetopia”:http://www.eleganthack.com/widgetopia/ catalogues various widgets from websites. Resources such as this can help show just how functional a website’s UI can be, and more importantly can give some well needed inspiration to webapp UI designers. Its time webapp developers realised that their interfaces don’t need to be ugly, bland affairs, and that beyond looking nice, a decent functional design can make for a more pleasant and efficient user experience.