One of the main things to consider when designing a blog is most certainly the post layout. This usually consists of the following parts:

• Post title
• Date & time
• Tags / categories
• Author (not always)
• Comments link
• The post itself

So, we have to decide how to combine all these to make it as nice and usable as possible. And here comes the problem - where do I put everything? Most commonly people seem to place things where they look best, regardless of their usability. That’s wrong, I tell you.

First we should consider what we are telling the user with our elements and in what order he wants to collect the information. Let’s go step by step.

First of all, before reading anything else, a potential reader of our post will want to know what we’re writing about. He’ll look for the heading, hence that is why it is always on top. Another thing of great interest is the post date. This helps user to determine if the information is still relevant. For example, if I’m looking for reviews of the Ars Electronica 2007, a blog post from 2005 is not what I want to read.

So now the user knows briefly what he’s reading. Let’s ease his life up a bit more. Give him some keywords, tags, or categories. however you want to call them, just give your post some context. Some put these bellow the post, but what are they telling there? After I’ve finished reading it, I already know what the post was about.

Some people tend to throw the comments link below the title as well. Why? I haven’t even read the entry, why would I want to comment on it? Or read what others thought of it? First show me the article please, then I’ll comment. I often notice this. After reading a blog entry I’d like to drop my opinion. But instead of simply clicking the link where it should be, I have to find the top of the article to click “comment”. It gets annoying.

I’m indifferent about where to put the post author though. On one hand it’s nice to know who’s writing, if you know the author, but on the other hand your name on the bottom acts like signing a letter, and is a nice traditional approach to writing. But if you’re the only author of entries on your blog, you don’t really have to put your name besides every post. It’s probably in your header anyway.

Of course there may be other things to consider, or cases where the above opinions are totally irrelevant. But the thing I’m saying here is, don’t just throw everything where there’s empty space. Think of where you would expect things to be and at what point they are important for the reader.

Yesterday’s speech went pretty well I’d say. Accompanied with Andraž Tori’s “The future of web” and Jure Čuhalev’s “Introduction to interface planning and usability”, the listeners got a three-hour lecture on the web of yesterday, today and tomorrow.

I promised to post my presentation and notes, so here they are:
Presentation [PDF]
Notes [PDF]
(Both in Slovene language)

Additionally, here are links to a few article collections that I used in preparation for the speech:

• Alertbox: Current Issues in Web Usability - bi-weekly column by usability expert Jakob Nielsen
• User Science: Usability - A List Apart’s articles on usability
• Criteria for optimal web design at Software Usability Research Laboratory
• Articles by Mark Boulton - a collection of articles dealing with typography and web design

At the very beginning of laying out a website, we are presented with two choices. Shall we make the design fixed width, or fluid? For those not familiar with the terminology, fixed width is this and fluid is this. The first has a fixed width regardless of the browser window and the second stretches as browser window gets wider. Try resizing your window to see what I’m talking about.

Fixed width layouts look fine in your average-sized browser window, but there are two extremes to consider. On really narrow windows (cell phone browsers for example), one might get a horizontal scroller, which nobody is really fond of. It makes reading a website a real pain, especially when text itself is wider that the window. And when it comes to really wide browser windows (wide-screen 24″ monitors are just sexy), the layout’s background is stretched far left and far right. Usually this results in large white areas to the left and right. And I’ve had people going “I spent all that money on my display and now I can’t benefit from it”.

On the other hand, fluid layouts look fine in your average-sized browser window, but we have to consider two extremes (oh the irony). In really narrow windows they usually get very useless with each word of the text falling in a new line, objects overlapping, etc. And how would you like reading text stretched all the way from the far left of your new 30″ display (let’s not be modest with the 24″) to the far right. I’m sure your neck wouldn’t like that.

For some theory - Long time ago, people have realized that line length does matter in printed material. Short lines require most of our times jumping from one line to the next, which, I know it mind sound funny, but is time consuming and requires some concentration. And when lines get longer, reading requires much moving of the neck and finding the next line gets a bit tricky. So it was agreed that the length of the lines (or width of the text block) must fall within some optimal limits. And it’s no different with web sites. Ideal length of a line on the web is said to be about 30 to 35 em, where 1 em is “equal to the pt size of the current font”. So, with 12px fonts, 1em is 12px. Why am I talking about typography and text layout all of a sudden? Because with most web pages, text is the central part of the site, and therefore plays a big role in our original question.

Ideally, I would recommend using fluid-width layouts, but don’t let them get too wide or too narrow. CSS min-width and max-width rules come in very handy here. Problem is, guys at Microsoft don’t agree. I’m not sure about IE7, but IE6 just ignores the two, which makes them useless, really… So I usually go for a fixed width design, due to the points I described in the previous paragraph. It’s just way more readable. I usually make text lines a bit longer than the ideal 30-35em though, but compensate that with a bigger line-height, which improves readability. I also tend to make designs fit 800×600 resolution. There are still people using it, as well as people who are not so fond of full-screen browser windows. I still can’t understand how one buys a 24″ display to run everything full-screen on it. Multiple windows side-by-side, anyone? I don’t think there are many applications that would benefit from so much space, but having more windows displayed on the screen can be quite nice. So for people “not benefiting from their big 24 inch display”, try this. Websites are a bit narrow so you can use the screen space for something else, not so you can complain about the white space.

Fixed width layout comes with another question - where to align the content? Left, center, or right. Believe me on this one, but you don’t want to use right if your language uses a left to right writing system. I do think that designs aligned to the left usually look very nice (example), but I don’t recommend them since the problem of large white areas is even bigger here. And usually we look at the center of our display, rather than to the far left edge. So a centrally positioned fixed-width layout would be my choice. But I do think fluid layouts can be very nice when done properly. Just don’t let the text boxes get too wide. For a good example of such a layout, see Web Standards Project. Looks nice and reads very well on different browser sizes.

Every July, Slo-Tech holds a big Friday-to-Sunday “geek gathering” at the Slovene seaside. They’ve just announced this year’s event and I sort of volunteered to give a speech on web usability there. I’ll be on Saturday, July 21^st in the afternoon.

I’ll be presenting some main topics a designer should be aware of, when it comes to web sites - What to do and mostly what not to do to please the visitors. Expect live demos too ;) Oh and the speech is going to be in Slovene language.

Read the NEST 2007 page @ Slo-Tech for more info on the event as well as how to join it. See you there? :)

Last year, at the university, I did a paper on web usability. Along with it I started a wiki called uporabnost.info, but it wasn’t a big hit. It seemed people liked the articles, but not many contributed. So I dropped the wiki, but put my report online, so the content is still there. The domain won’t be up long I guess, so I’m reposting the pdf here, in case anyone would be interested

Izdelava uporabnih spletnih strani

Sorry to those of you who don’t speak Slovene, just ignore this I guess. To those of you who do, I hope you like it.