say something

Are you making these common blog layout mistakes?

These 4 mistakes in basic blog layout are all too common and all too easy to fix:

Fluid Layout

Blogs with a fluid layout almost always result in the post column growing wider to fill the screen. In a time when we are all trying to consume more information than ever before, this is a mistake. There is a reason why newspapers don’t spread their columns way across the page. This study at Wichita State University found that a medium line length of between 65-75 characters per line, or about 15 words, was the optimal length for online reading. Readers need to be able to scan articles easily, and they will take in much more of what you write if the line length makes it easy for them to read quickly.

Too Wide

What’s the right resolution for your site? That question is always answered by looking at your stats. Any decent stats program will show the resolution visitors are using. A good rule of thumb is to try and not tick off more than about 5-7% of your readers with a resolution that is too large for their screen. It can be difficult to squeeze everything so it will fit those old 800×600 resolutions, but depending on the niche one is in, there may be no choice. Particularly if there are ads in the right sidebar, it only makes sense to make sure that the maximum number of users can see them.

Important Stuff in the Footer

I really like blog themes that have an extended footer, such as Brian Gardner’s Vertigo theme, but don’t put things down there that are too important or keyword rich. Rather, include things such as badge farms, Flickr sets, monthly archives in that space. Don’t count on many readers scrolling down far enough to see it either. The more keywords something contains, the higher up in the page it needs to be, for obvious SEO reasons.

Not Enough White Space

Read any good design book and one of the key elements of good design is use of white space.

White space is often referred to as negative space. It is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted. (Source: Wikipedia)

While it is very tempting to cram as much information into as small a space as possible, the result is a cramped site that is difficult to read and navigate. An overwhelming or cluttered site makes readers uncomfortable, and reading from the web is rather hard on the eyes as it is. Check out Mark Boulton’s article on A List Apart for a very good summary of how to use white space and the aesthetic difference created just by allowing a design some room to breathe.

This post is written by Randa Clay

Related reading:

  • No related posts.

Published by Randa Clay on August 9, 2007 in Design • Did you like it? Subscribe to RSS | Tweet it! | Stumble it! | Google Buzz it! | Submit it to Blogosphere News

26 people says things!

  1. Hey!, how did you like the layout of this blog. We just re-designed it. http://www.automotto.org

    By Ankit on August 9, 2007 8:50 am

  2. At first glance it was pretty nice looking, but then it tried to pop up an ad at me and I won’t bother hanging around on a site that uses pop-up ads, so I didn’t spend much time there.

    By Randa Clay on August 9, 2007 9:02 am

  3. “Blogs with a fluid layout almost always result in the post column growing wider to fill the screen. In a time when we are all trying to consume more information than ever before, this is a mistake.”
    Wait a minute: do you tell users NOT to stick to fluid layouts?
    Ever checked a 900px fixed site on a 24″ screen?
    What about using max width?

    By milo on August 9, 2007 10:23 am

  4. Milo, IMHO a context area of 550-600px is the maximum for optimal readability. Ever tried to read lines 1500px wide, especially if the paragraph itself is more than 5 lines high?

    Besides that I think that a majority of widescreeners have 1024px as browser window width and keep the rest for other apps.

    By Franky on August 9, 2007 10:53 am

  5. Yes, I do not believe fluid layouts are a good idea- the post are is always way to wide a difficult to read. I have a 22″ screen, and I would prefer not to read lines that go on and on. It is much harder to read. We have to make it EASY for people to digest our content, not harder. Max width would be a good solution if you just HAD to let your site grow to at least a certain resolution.

    By Randa Clay on August 9, 2007 10:56 am

  6. [...] first article is one on some really basic blog layout mistakes that are all too common, and easily [...]

    By Are you making these common blog layout mistakes? at Randa Clay Design on August 9, 2007 11:17 am

  7. Randa – this article is fantastic. I couldn’t agree anymore with each of the ppints you made. Way too many people are jumping on the fluid layout wagon. I’ve got my new 23″ widescreen dell monitor set up and i have to reduce the browser size by half for the thing to not look like a mess.

    Also, the extended footer bit. The concept of strategic content placement is really lost here.

    Again – fabulous. Great article.

    By Lara on August 9, 2007 5:39 pm

  8. Thanks Lara. I appreciate your comment. Especially as monitors grow wider and wider, hopefully people will finally realize that it’s no longer necessary to try and fill the reader’s screen. We have wide monitors so we can easily have multiple things open and viewable at a time, not because we want web sites to be 1600 pixels wide!

    By Randa Clay on August 10, 2007 6:20 am

  9. Very well written article. many of the points are common sense, but all to often you see people making the mistakes.

    I definitely agree on the fluid layouts, fixed are much better.

    By Todd on August 10, 2007 8:47 am

  10. Fixed is my preference. If you are designing something, you can be sure how the design will turn out. There are also the benefits that you have mentioned in regards to readability.

    By J David Macor on August 10, 2007 12:19 pm

  11. Hi Randa
    Great article. You’ve got me thinking twice about my fluid layout now, as I hadn’t thought about the increasing use of wider screens.

    I chose it because the fixed layout version of the same template was so narrow that it makes the article seem to go on forever down the page. Maybe I can use the function… Ahh… a dilemma…

    By Yvonne Russell on August 11, 2007 7:41 pm

  12. Yep, i “hate” sites with Vertigo theme (or something else, like it)

    By marek on August 12, 2007 12:39 pm

  13. [...] It doesn’t cost much to get a good designer to work on a personalized design and online identity, the benefits will be worth every dollar spent anyway. Just make sure you hire someone who groks web design 2.0 and doesn’t fall into these common pitfalls. [...]

    By Design is Identity on August 13, 2007 1:28 pm

  14. [...] 17-Are you making these common blog layout mistakes?- Discussing 4 mistakes in basic blog layout are all too common and all too easy to fix. [...]

    By CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices on July 28, 2008 6:26 pm

  15. I really dislike websites that start exactly at the edge of the browser. It makes if feel like its being cut off. I dunno, even on paper there is a margin. maybe you should consider that.

    By Caoineadh on July 29, 2008 5:07 am

  16. [...] ci suggerisce Sophia Lucero, a volte si commettono alcuni errori molto comuni nel progettare un sito, ma ancora peggio, un [...]

    By Alcuni errori comuni di progettazione | Italian webdesign on July 29, 2008 8:03 pm

  17. [...] 17-Tienes en tu blog los erroes mas comunes de maquetacion. [...]

    By 40 Plantillas y guias CSS | -=[EdadFutura]=- v.6.0 - [beta] on July 31, 2008 7:08 am

  18. [...] 17-Are you making these common blog layout mistakes?- Discussing 4 mistakes in basic blog layout are all too common and all too easy to fix. [...]

    By S A N D E E P [ I N D I A N I C ] » Blog Archive » CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices on September 1, 2008 10:55 am

  19. [...] Box Model, Floated Columns, Sizing Using Ems, Image Replacement, Floated Navigation and Sprites. 17-Are you making these common blog layout mistakes?- Discussing 4 mistakes in basic blog layout are all too common and all too easy to fix. 18-Page [...]

    By CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices « HMV.co.in on September 23, 2008 2:41 am

  20. [...] 17) Bloglarda sık yapılan tasarım hataları [...]

    By Twingler | internet , tasarım , teknoloji » Blog Archive » CSS Tasarımları: 40′dan fazla ders, ipucu ve en iyi örnekler on November 12, 2008 12:20 am

  21. [...] 17-Are you making these common blog layout mistakes? [...]

    By CSS Layouts: Tutorials, Tips and Demos | Design it on December 17, 2008 12:11 pm

  22. [...] 17-Are you making these common blog layout mistakes?- Discussing 4 mistakes in basic blog layout are all too common and all too easy to fix. [...]

    By CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices | www.my2tech.com on July 1, 2009 11:44 pm

  23. Thanks, it’s a good point that you made about line length, i know ive sometimes visited blogs and other sites where ive wished that the line length wasn’t so long.

    I know its difficult to please all readers as there can often be one thing that makes a layout just short of ideal for any particular reader, for example i can often be slightly disappointed to find a blog with fantastic content but it has a dark background, i dislike dark backgrounds, or the text is way too small.

    I think with plenty of thought put into a layout though that most visitors can be catered for.

    Thanks for the tips.

    By Webhostright on July 5, 2009 11:09 pm

  24. [...] 17-Are you making these common blog layout mistakes?- Discussing 4 mistakes in basic blog layout are all too common and all too easy to fix. [...]

    By CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices | Downrex on September 23, 2009 1:45 pm

  25. [...] Box Model, Floated Columns, Sizing Using Ems, Image Replacement, Floated Navigation and Sprites. 17-Are you making these common blog layout mistakes?- Discussing 4 mistakes in basic blog layout are all too common and all too easy to fix. 18-Page [...]

    By CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices | Theme Center on January 2, 2010 2:15 am

  26. Thanks for your article.

    I first started blogging 3 years ago and, at that time, I didn’t appreciate the difference between reading a book and reading a blog on a computer screen. Since then, I’ve reduced my line length from 120 characters to between 65 and 75 characters per line.

    I cater for a screen resolution of 1000 px because more than 95% of my visitors have this, according to the Google Analytics results. I prefer to put all of my content within a screen that requires no scrolling. I do this for ergonomic reasons. I think that it’s easier to “click” for the next page than to select the scroll bar or use the mouse wheel. However, it’s easier to scan the whole article using just the scroll wheel. I guess I’m still undecided on that point.

    I remember from my days of giving customer presentations, with slides or Power Point, that only 35% of the viewing area should be text. The rest may be white or other non-demanding images.

    By Russell Davison on January 5, 2010 6:11 pm

  27. Subscribe to comments via RSS!

    What do you think?