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
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
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
“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
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
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
[...] 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
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
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
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
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
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
Yep, i “hate” sites with Vertigo theme (or something else, like it)
By marek on August 12, 2007 12:39 pm
[...] 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