GOOD WEBLOG DESIGN AND LAYOUT

Posted on September 1, 2003 by Dave Pollard
kelowna fireA lot has been written about how to write good blog content, and about what’s wrong with and missing from current weblog tools. But here are some things you can do to make the most of the existing tools, and to make your blog easy to navigate and an aesthetic pleasure to read. The key is to appreciate the limitations of the medium: the web page and the screen.

  1. Use Titles: Almost all blog tools allow titles for each post, and they’re invaluable for readers who browse dozens of blogs every day. Make the title clever if you can, or must, but first and foremost make it clear what the post is about. And make it stand out like a real headline: Use a larger font size than you use for the body of the post, or at least use bold face. Example: Xian Crumlish’s Radio Free Blogistan — big, coloured, clear titles, and use of a 1-by-1 table with a different background colour to further set off each post. [Added Sept.2: Christian actually uses CSS style rather than a 1-by-1 table, but the effect is the same, and tables are easier for us non-techies]. Filchyboy also has distinctive, prominent titles.
  2. Abstract Long Posts: If your post is significantly longer than one screen, consider writing a one- or two-sentence abstract summarizing the thesis of the post. This is especially important if the first couple of sentences of your post can’t or don’t serve this purpose. Example: I decided I needed an abstract for my post on The Blogging Process because my post had two separate and ambitious goals, and I didn’t want the audience for the second to stop reading too early. It turned out to be one of my most popular posts, as much for the second half (how blogging tools need to be improved to enable conversation) as for the first (a detailed chart of my blogging process).
  3. Use a Teaser Paragraph for Long Posts: If you don’t like writing abstracts, pick the most important paragraph or two of the post, and just post that much on your main blog. Append a hotlink saying [more] or [whole article] to link the reader to the whole post. That way your readers can see more than just the one long article on your page, and can decide if they want to read the rest. This is an old newspaper trick “(continued on page A3)” but it conserves real estate. Example: Mark Woods’ Woods Lot — this guy posts volumes every day, most of it worth reading in full, but if he put the whole thing on his main blog page it would run a mile long and be unmanageable.
  4. Select a Readable Font, Size & Column Width: Depending on line spacing, a column width over five inches can be a challenge to read without losing your place. A font size smaller than 9 point is hard to read online, especially for older readers, and a font size larger than 12 point is extravagent use of screen space. Serif-type fonts are slightly easier to read in small-point sizes, but most blogs default to sans-serif fonts. Example: Caterina.net is elegantly readable, with a clean, simple layout. She also uses a coloured background to set off quotes, instead of using hard-to-read italics.
  5. If You’re a ‘Linker’, Add Something of Value: While well-selected links themselves are valuable, they’re even more valuable if you add a synopsis or analysis. A synopsis helps the reader decide whether it’s worth clicking the link. Analysis adds interpretation and either information or entertainment value, and tells the reader ‘what does this mean‘. The best linkers can prÈcis or selectively extract from the articles they link to so well you don’t even need to read them. Example: Monster Limo weblogger Consider Arms comments on five (usually important) news stories each day so cleverly and succinctly that reading the actual article is anti-climactic.
  6. Give Readers Someplace to Go for More: If a reader finds your post enjoyable or important, s/he will want to read more. You can provide this through related links (either in the body or the end of the post), through the use of categories (though see point 8 below), a blog table of contents, a list of recent posts, or a self-selected archive of your best posts. Example: Terry Frazier’s b.cognosco has excellent related posts lists and also gives you filtered Google links on the subject of each post.
  7. Use Graphics If They Add Something: Endless rows of text can be numbing, but irrelevant graphics can be distracting. Abstract ‘icons’ and clipart are usually cryptic and not helpful for identifying posts of interest. Photos of people or places you’re writing about are helpful. Original graphics, especially if they make a powerful point, are best of all. Example: Gary Lawrence Murphy’s Teledyn blog has superb photos, professionally laid out, and either highly relevant to the subject of the post or just plain stunning, like the photo of today’s Kelowna fire, taken from his site, that illustrates this post.
  8. Use Categories Only If They Help Your Readers: Their main value is to allow people to subscribe to only one category of your blog. That’s only useful if (like me) you write about a wide variety of topics, and you know some readers are not going to be interested in all your posts. I have eight categories, of which six (listed top left) appear on my main How to Save the World blog and the other two are private (one for my employer and the other for fellow high-school alumni). I could probably get by with only two public categories: ‘All’ and ‘Business’, since I know of about fifty readers who are interested only in my business posts. If you use categories just to organize your posts for your own purposes, it’s probably not worthwhile listing the categories on your blog, and you’ll do everyone a favour by turning off separate notification of your category posts to Weblogs.com and other blog post logging servers.
  9. Use Outlining ‘Twisties’ Cautiously: Lotus Notes users are very familiar with the pros and cons of those little triangular ‘twisties’ that can be ‘expanded’ or ‘collapsed’ individually (by clicking on the ‘twistie’) or globally. Experienced users know they’re best used to hide ‘for further information’ content (appendices, supplements) so you can see the organization of an entire article in one glance. Some bloggers use an outlining tool called Active Renderer extensively (see Jim McGee’s Musings, for example). If I took the time to learn how to use it on my blog, I might use it for the stuff on my sidebars (blogroll, tables of contents, recent posts, signature posts, right-hand ‘Vectors & Tangents’ sidebar). But I doubt I’d use it for the main posts. I think abstracts (point 2 above) and teaser paragraphs (point 3 above) are more effective ways to conserve real estate, though if I could use a twistie to ‘hide’ the rest of the text after the teaser paragraphs I might do that. It’s that mandatory extra click that bugs me. I recently read a German language blog that expands the full text when you simply move your cursor over the heading, but that technology is beyond me, and I suspect most of us, at present.

I have no design and layout advice for either sidebars or blogrolls. There seem to be no accepted standards or best practices for either. Some A-listers have enormously popular sidebars (see this one by Anil Dash for example) even though I find them cryptic. Some bloggers use sidebars as ‘remainders’, items they think are worth a look but not a lot of discussion. That makes sense except for most blog tools there is no place for comments on them and no way to automatically archive them, so they can grow immense like Caterina‘s.

Same thing with blogrolls. Some people have very small ones, or favourite ‘sub-blogrolls‘ with only a few ‘must-read’ blogs listed ahead of all the rest. Others have hundreds of blogs in their blogrolls, sometimes organized, often not. Small blogrolls are usually intended to help readers who like the blog to find others of similar quality, focus or community. Large blogrolls seem more likely intended for use by the blog owner to organize his/her own reading (I confess that’s what mine is for). [Added Sept.2nd: Annotated blogrolls like Progressive Gold‘s are especially helpful, but quite rare]. Clearly the smaller and better organized the blogroll, the more valuable it is to those listed as a means of getting traffic to their own blogs. But I’m listed on about 200 blogrolls, and get very little traffic from them, and most of what I get is from the blog owners themselves. I get far more hits from mentions in blog posts (until they pass into archives) than from the more permanent blogrolls. And some very successful bloggers have no blogroll at all.

As with any communication medium, content always trumps design. Some very popular bloggers have execrable blog layouts, and some beautifully designed blogs are both content- and reader-free. Nevertheless, every publisher has a duty to his/her audience to make the reading experience as pleasant and productive as possible. The above hints may help in that task. I’m sure readers of this article will have many more ideas, so be sure to read the comments to this post at least as carefully as the article itself. This blog in particular could certainly use some improvement.

This entry was posted in Using Weblogs and Technology. Bookmark the permalink.

17 Responses to GOOD WEBLOG DESIGN AND LAYOUT

  1. Stentor says:
    September 1, 2003 at 13:27

    I’m not so sure about what you say about shorter versus longer blogrolls. My blogroll is pretty short (since I’ll only blogroll a blog that I read regularly — to the annoyance of some people who want to swap links). And I’d hardly characterize it as “more of the same ilk,” considering that the blogs there range from yours to Baloon Juice to Language Hat. At best, a short blogroll says that those blogs are endorsed as high-quality by the linker. As a reader, I often find longer blogrolls more useful, since they’re more likely to contain things I haven’t seen before.The problem with blogrolls is sort of like the problem you mention with just linking to a site or article in a post. What would be more helpful (though I’ll confess I haven’t implemented it on my blog) would be an annotated blogroll — either separating blogs into topical categories (as you have), or giving a brief comment on each one, either as a title when you hover over the link or on a separate page.

  2. mrG says:
    September 1, 2003 at 14:15

    Beware! My photo inserts do not always illustrate my point! Not intentionally, anyway.Sometimes they are random, sometime the association only makes sense in my own twisted brain, sometimes Google decides they match, and sometimes, well, sometimes I just like the picture and wanted to share it, but couldn’t think of a story!I find random re-inforcement schedules work really well :) Another principle of website design I exploit from my cognitive psych training is in knowing that whatever associations I might bring to each page, my visitors are perfectly free to, and cannot help but build others.

    John Cage was a vocal opponent of recorded music because it was always the same, always predictable, identical on every trial. John also told a story of being somewhere, I think it was getting his car repaired, and he noticed the music on the background radio perfectly accompanied the action on this ‘stage’ and that this sort of blend of the indeterminant with the prescribed was really quite interesting.

    back to the pointMore to the topic, however, there is no secret of good design. The recent useit.com results exhaustively show that spinning flaming guitars and flashing text are not defacto barriers to communications provided the site serves the audience in ways they can use; so long as they can extract what they want, readers are very happy, and if you browse the A-list blogs on the link-rating sites, as good a metric of success as any, you find all of your rules shot to blazes right from square one; appealing to print-era dogma is confusing your own set and setting with the reality of the blogspace as it is. As it is is just as Stitch says, “broken, but quite good”.On the web, anything goes. There is no style-guide or best-practices. There are no rules other than “What thou wilst is the whole of the law” with an advisory to pay attention so you will recognize what works for you. This is why the Web is the wonderful media it is. You don’t need any permission, you don’t need any approval, anyone can be right. It’s a surreal landscape like a Betty Boop cartoon, a place where all the laws of typographic physics break down. What works can be flaming guitars, it can be Conrad‘s amazing boobie pix (or, yes, his insightful no-pulled-punches analysis of Asian politics), it can be whatever it is your audience needs, or to quote a dead president, “For those who like this sort of thing, this is the sort of thing they would like.”The only rule I give my clients, and curiously the one they have the hardest time accepting, is to be themselves, to “speak so that we may see you” to write from their own eye/I, to engage readers with human stories instead of trying to come off as academic or business-like or professional. They’ll nod, they’ll agree and say they see what I mean and talk about their favourite story tellers, and then they’ll go back to their keyboards and write copy.Ok. I do it too. But I hate myself in the morning.If there is any common element in all the top blogs, and I’m not sure there is because there are so many blogs it’s mind-boggling to even consider there may be generalizations, but of the top-tier of those that bother to hit weblogs.com, if there’s a thread of advice, it’s this: People may come for those exotics you’ve brought them from afar (and that can be typography, but it can be punk too), but they stay because they can identify with and carry home your narratives into their own lives.

  3. xian says:
    September 1, 2003 at 22:09

    Thanks for the props. I’m getting some flow from your link. I agree that titles are important and I try to make mine crisp and informative.Just for the record (design purists take note) I use a CSS style to set off each posts (it’s not a 1 x 1 table, though the effect is the same).

  4. Dave Pollard says:
    September 2, 2003 at 08:45

    Stentor: Good point, annotated blogrolls are worth their weight in gold. Since this post might attract more attention in the coming weeks (my metablogging posts usually do) I’ve revised my post to add this, and taken out the fuzzy ‘ilk’ reference (I should know never to use that word) at the same time.Gary: I did say that content trumps design, but if you read me to be saying these are hard and fast rules, I didn’t intend that. Every design rule should be broken from time to time. I’m just trying to help some new bloggers whose good content is almost undone by unfathomable navigation or illegibility. I got in trouble last month for my post on The Blogging Process, which prompted some Spanish readers to warn (with good reason) against the dangers of over-regulating and over-prescribing rules for blogging, and even to develop a ‘there are no rules’ logo for the blogosphere, which I applaud.Christian: Thanks for the clarification, and for being a great example. I wish CSS was easy enough for all of us to use, though.

  5. Philip says:
    September 2, 2003 at 21:59

    CSS is not rocket science. I am a newbie who used Front Page and other WYSIWYG HTML editors until I hit blogging software. If you want a tool to help you with CSS TopStyle is hard to beat. It provides all the help anyone can need.Of course I’m using MT which is style sheet based. Salon Blogers get Radio. It takes a small amount of time to deconstruct your page source and relate the style tags to your css include file but once you do it it becomes easy to use. Trust me table tags are a nightmare to keep straight if you can do it you can learn CSS.Dave you are flush buy a copy of TopStyle and write it off. One hour with the program and you will wonder what the mystery was.It will NOT turn you into a graphic artist. The beautiful sites using CSS have great artwork behind them. I’m still learning that part. <smile>

  6. xian says:
    September 2, 2003 at 22:55

    Radio has some pure CSS design templates (“themes”) as well, so you can start from there if you’re interested. Or look at my page source. I try to keep it pretty simple, aside from all the automated gobbledygook. Plus, I’m no designer. I just keep trying to improve things a little all the time and after a while it gets (somewhat) better.

  7. a designer says:
    September 3, 2003 at 04:52

    With all due respesct, you have missing images, your font sizes aren’t adjustable, your design is a boring, standard template, and your interline spacing makes your highly verbose entries a chore to read. Why would you think you are qualified to write about “good design?”

  8. mrG says:
    September 3, 2003 at 05:31

    Gee … A.Designer didn’t muster enough wherewithall to link their name to a more qualified expert. Too bad, eh?Back to important stuff: Where can I get that “There are no rules” logo? … all sites should be required to display it! :)

  9. mrG says:
    September 3, 2003 at 05:32

    My own modus operandi and philosophy of webpage design is adapted from architect/inventor Bucky Fuller who once said that it was after he created the geodesic dome that he noticed it was beautiful.

  10. Dave Pollard says:
    September 3, 2003 at 10:27

    Philip/xian: Thanks for the advice — when time permits, I promise to learn more about CSS.Gary: Yeah, too bad ‘a designer’ didn’t show us his stuff — and didn’t bother to read the last sentence of my post. As for the No Rules logo, it is, alas, in Spanish. You’ll have to develop your own. More fun that way anyway.

  11. Ed Bilodeau says:
    September 3, 2003 at 11:09

    I’d add a note about the importance of making it easy for people to find out who you are (or at least providing information on whatever persona you wish to project.)

  12. Scott Leslie says:
    September 4, 2003 at 09:54

    Dave, for posts where one is linking to a resource somewhere else (but presumably still adding one’s own comment) do you think the link in the title of the post should point directly to the resource or back to the post itself, the link then being actually posted in the article itself? This seems maybe a ‘style’ issue rather than a ‘design’ one, but does seem to relate to some of your other points re: abstracting long posts. I’d be interested to hear your thoughts, as no one style seems to dominate and both approaches seem to have pros and cons.

  13. xian says:
    September 6, 2003 at 20:15

    It’s also somewhat software dependent. Radio can make the title a resource link or it will default to a permalink. Movable Type does not have the concept of a key link and the titles on MT posts are usually not links (unless the author has edited their templates to make them into permalinks).

  14. rsbell@mindspring.com says:
    September 8, 2003 at 09:13

    I disagree with mrG’s claim that “on the web, anything goes … There are no rules other than “What thou wilst is the whole of the law…”He’s right that the web offers incredible freedom, but principles of clean, readable graphic design apply here just as much as the rules of grammar do. After all, we’ve all seen web sites whose garrish colors, flashing and rotating typographic elements, and continuously looping sound tracks cause physical pain to anyone who visits them. The authors of those sites engage in self-expression at the expense of communication.Saying that human beings naturally prefer some kind of harmony in design doesn’t mean surrendering our creative freedom any more than architects Frank Lloyd Wright and Alexander Thompson surrendered their flights of fancy to the laws of physics. You can create amazingly different, equally compelling structures even if you must always lay a foundation.So to add to Dave’s list of informal “rules”:1. Give some thought to where reader-friendly elements such as search boxes sit on a page and place the most used elements above the fold on the first page.2. Minimize the number of random graphical doo-dads (weather pixies, mini-banners and the like) you use. They slow down page loading and clamor for attention, distracting the eye.3. Make the site easy to navigate.4. Do not write all of your articles in upper case or using abbreviations and exclamation points.5. Use one or two type families in different weights or shades of a few colors–not 12 type families in 20 colors.Ron

  15. Darren Rowse says:
    November 17, 2003 at 17:38

    thanks for that – just linked up in my blog tip series…..I love your work!

  16. Meep says:
    February 8, 2004 at 10:31

    I strongly disagree on parts of (4) because setting the font size in points or pixels is just a widespread but bad practice. Just look at “12pt” on Win32 / X-Window / Mac and you will notice that there are three different resulting sizes (with at least X-Window being unreadably small).In contrast it is a good practice to use “101%” (not 100% because there is a bug in opera…) for the font size in the body-element and specify all other font sizes in the relative “em” unit (and do not go below 0.8em). This will allow you to respect the users desired font size while leaving the author with the possibility to make important things bigger and less important things / footnotes etc. smaller.

  17. Destination Infinity says:
    April 8, 2009 at 08:27

    Nice and useful tips for blog design. I will try to use some of them, thanks.Destination Infinity

Comments are closed.