"design" in Weblog

I just read Smashing Magazine’s 8 Simple Ways to Improve Typography in Your Designs, which heavily references the Robert Bringhurst’s classic The Elements of Typographic Style. The advice is all good but there’s more recent supporting evidence to draw upon than this 1992 tome. Here are two good papers that I’ve been quoting:

Optimal Line Length

Users tend to read faster if the line lengths are longer (up to 10 inches). If the line lengths are too short (2.5 inches or less) it may impede rapid reading. Finally, users tend to prefer lines that are moderately long (4 to 5 inches).

Reading Online Text: A Comparison of Four White Space Layouts

Results show that the use of margins affected both reading speed and comprehension in that participants read the Margin text slower, but comprehended more than the No Margin text. Participants were also generally more satisfied with the text with margins. Leading was not shown to impact reading performance but did influence overall user preference.

My brother, Ewen, is taking part in his first exhibition, up now at Dream Bags Jaguar Shoes in Shoreditch, London. The show features the likes of Jon Burgerman, Paris Hair, Kabe 243, Mr Pinks and Ron Jonzo… But there’s a catch. They’re not allowed to use pens or paint; it’s strictly cut and paste. And hence it’s called Paper Cuts. My brother’s is the massive piece on the big wall downstairs - he’s done a great job and you can’t miss it!

Incidentally, he’s now got his university animations up on his website too. They’ve got a bunch of awards between them and they’re well worth a look.

In my redesign post I mentioned this ‘zooming content’ idea I’ve adopted. I don’t think the concept is new but I’ve not seen anyone write about it so I’m jumping in… Each page is based on what I’m calling a ‘zooming’ layout. By that I mean that the information view and relevance on the page zooms out as the page goes down. This is influenced by three things:

1. Derek Powazek’s Embrace your bottom! article.
2. Peter Morville’s Ambient Findability.
3. The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes.

The Eytracker III study from a couple of years ago found that people aren’t afraid to scroll below the fold but that their scanning became more rapid. To cater to this behaviour I have limited the amount of information in the lower sections of the page. The page content becomes more and more brief and scannable as the page goes on. Take the weblog index for example: it starts with a complete entry, then moves to summaries of 5 recent entries, along with access to the archives, and finally to external links.

Every page follows this pattern. The top of the page deals with specifics and details while the bottom of the page presents an overview, encouraging scanning and, hopefully, giving people what they want, when they want it.

Why have I done this instead of going for the more conventional two column blog layout? Conventions are our friends, after all…

In Ambient Findability Peter Morville calls web pages ‘discreet findable objects’ that can be accessed out of context via search engines… Basically, there’s a very good chance that people are coming to a content page from Google having performed a search on a specific keyword phrase. The standard two column layout presents these nice new visitors with a lot of information they’ve not asked for and are probably not interested in. I wanted to let people get what they came for before bombarding them with choices, in line with Derek’s suggestions.

Content is king and will govern both incoming links and page weighting by the engines. If someone gets to one of my pages it will probably be thanks to the content so I’ve made sure I give that up front. The article, blog entry or portfolio item is there in full at the top of the page with nothing else in the way. The main navigation gives a broad overview of the site and the metadata to the right suggests the presence of more local and related posts but I’ve tried very hard to keep noise to a minimum. I’m hoping that I’ve left enough wayfinding and orientation hints at the top of the page to let the user reach a decision about the context of the site and content before continuing down the page.

After the full entry I zoom out one level.

On the index pages this steps out to an overview of the most recent posts, kept short and scannable; On the content pages this is lists of two different types of entry: the most recent ones, which I’d obviously like to promote to new visitors, and related (and hopefully relevent) posts, which are an attempt to push old content. (This second group is found by passing the article title into my site’s search and listing the top results.) Derek Powazek advocates using the bottom of the page to give readers somewhere to go but I had one more question I thought people might ask: Why should I believe the post I’ve just read? By providing a list of links to other things I’ve written I am trying to establish credability with my readers as well as cross-sell content. That’s also what the slightly anomolous ‘about me’ snippet is trying to suggest - that I do have some idea what I’m talking about.

The final portion of the pages is for less relevant or less valuable information - external links, comments, that sort of thing.

I don’t think this is a radical idea - far from it - newspapers have been doing this sort of thing for ever, but I am very surprised that it’s not been applied to more websites. When I sat down to think about what information I should be presenting to my users at any one time this zooming idea just seemed to make sense. My biggest concern with the approach is the way it dresses up normal in-site navigation to look like more content. When I first sent the new design round to people I was expecting lots of complaints about access to the archives. So far no one has said anything about that…

To sum up: people tend to scan the page below the fold so the further down they go how about offering them more scannable content? Zoom detail to overview.

This redesign has been 18 months coming. I did the original design over Christmas 2004 but I just couldn’t find the time to follow it through. Since then the design has been through several revisions, getting simpler each time. This version is the product of an anti-shadow and -gradient phase I was going through about 6 months ago, when all the shiny new Web 2.0 sites were coming out. I’ve mellowed a bit since then… I also really wanted to see a return for natural textures. They’ve fallen from grace since their heyday, back about 4 years, on sites like DNA (now redesigned) and the Hayward Gallery.

For the IA and information design I have experimented with a couple of ideas: zooming content and weighted navigation.

Zooming content, which I’ll write up properly another time, is basically content becomming more general as you scroll down the page. This gives easy and intuitive access to recent posts but makes the pages very dense and limits access to older content. To try and balance this I have experimented with the function of search. It’s normally an afterthought, consigned to the top right corner where everyone can find it but no one is encouraged to use it. With this design I wanted to try bringing search to the forefront of my navigation so it’s given pride of place in the dead center, right next to the primary navigation. This random access navigation is is supported by a fairly standard taxonomy, as well as more granular tagging. I still have about 200-odd posts to tag and perhaps 350 to categorise but I’ll be getting on with that behind the scenes over the coming weeks.

There is also liberal use of weighted lists, something I’d resisted up until now. I’ve used the same treatment for everything: categories, tags, chronology and projects all use size to convey importance. I’ve not seen them used as extensively as this and I’m not convinced that it will work but we’ll see…

The biggest change round here, for me anyway, is under the hood. I’ve finally diteched the ropey old CMS I’d been using. I wrote it about 5 years ago as a database editor for Access and I haven’t updated it since. Not that useful, really… So I am incredibly happy to welcome Symphony to donotremove. It was a long time coming but it’s been a pleasure to work with. It’s XML/XSL based, which gave me a fairly steep learning curve but now I’m on top of it I love it. XSL is incredibly powerful, even if it is somewhat clunky, and there is no end of documentation available on the web. I’ve tried Wordpress, Textpattern and Expression Engine, and none come close to Symphony. It just thinks the way I think a lightweight CMS should.

And with Symphony has come commenting. This is a new thing for me so we’ll see how that goes…

Many thanks to Sermad for the tip here… Check out the video effects on the Absolut Metropolis site! Apparently video effects are the big new addition to Flash 8 so there’s going to be some really interesting Aftereffects-meets-the-web type high media coming our way soon.

Completely unrelated, exept by its use of Flash, but also amazing is the Kinetic Singapore site.

It’s been a long time since I’ve managed to get excited about a Flash site but both of these are lovely…

It’s been a long time coming but willbarras.com has finally gone live! It started out as a proper portfolio site but we’ve ended up with an illustration blog. Will’s work is AMAZING and I’ve not seen this format used for this kind of thing before so it’ll be interesting to see how it goes. Will’s put up 30 images to start with so there’s plenty to look at. My favourites are: Welder, Brolly, Falconry Centre and St Ives.

On a side note, this is my first go with Wordpress. On the plus side, there were plenty of plugins, helpful forums packed with troubleshooting tips and tricks, the Tiger skin for the admin area is gorgeous and I had the basics of the site up and running I no time. On the other hand, I had to hack half the plugins, which were mostly terribly written, I had to delve into the core code to extract some very simple functionality because everything is ‘echo’ed not returned, and the official documentation is sparse. In the end, I probably could have written it from scratch in the time it took me to hack other peoples’ code to do what I wanted.

I don’t know whether I’ll be using it again… For a straight-ahead blog: probably; for something out of the ordinary: no.

The likes of Banksy and co. have been making statements on our walls for some time now but klisterpete and akay have really outdone themselves with this one. Painting’s one thing but how about erecting a tiny Swedish cabin between two busy roads?

Now how’s this for a screen grab confab?! More sites than you can shake a stick at.

I was a little confused when I started seeing what looks like a technology company logo popping up on bank up and down the country. Especially since said bank had only recently rebranded with a slightly bizarre gradiented effort. Turns out the original rebranding was so unsuccessful that it’s been ditched already. How much did the fiasco cost Abbey National? 11 MILLION POUNDS!

Over at the Big Noob Ryan Sims of JustWatchTheSky has offered us a look at the life of a professinal designer. Ever had your work change between handing it over and seeing live? Yep, me too.

Especially interesting, though, is the before and after shots of the photo retouching done for the cover art. They’ve turned very pedestrian shots into beautiful, atmospheric pictures. Very nice.