Monday, July 25, 2011

The Right Width for Your Blog

The following post on blog width was submitted by Michael Martin from Pro Blog Design.
800×600… 1024×768… 1280×1024… There are dozens of different screen resolutions available, and what’s more is that not all users have their browsers at full size, making it even harder to choose a resolution to design for.

Lies, Damned Lies…

Most statistics are of little benefit to you. There is only one statistic which matters; your own. Look at your blog’s stats, and see what resolutions your own readers are using.

The percentage of readers using each resolution will vary greatly from blog to blog. For instance, whilst 10% of a sewing tips site may be using 800×600, a tech blog might find that less than 1% of their readers are on this resolution.

The Optimal and the Acceptable

It is rarely possible to give everyone the perfect design. Instead, you must settle for the most good for the most people, and an acceptable display for everyone else.

If the vast majority of your readers are using 1024×768 or higher, as they probably are, then build your blog for this width. The extra width gives you the space for more content, or to spread out the content you already have, giving the design room to breathe. In most cases, the benefits of this make it worth the loss to the small number of 800×600 users.

With the layout optimised for the larger resolution, you can then ensure that it is also acceptable for lower resolutions, i.e. they can still use your site without horizontal scrolling.
  • Place the content on the left, and the sidebar on the right.
  • Interlink your articles, allowing visitors to navigate your blog without the sidebar navigation.
  • If you use a 3-column layout, place navigation links in the leftmost of the 2 sidebar columns. This increases the likelihood of a low resolution user being able to navigate efficiently, without scrolling.
  • Make use of vertical space. For example, a low resolution user may not see the RSS links in the sidebar, but if you place an RSS button under your post, they will still see that.
Whichever width you design for, make sure you remember the browser scrollbar. An 800 pixel wide screen may only be able to show 760px of a webpage.

The Liquid Solution

Building your blog to a set width isn’t the only possibility. A number of other solutions exist, with the most popular being the liquid layout.

A liquid layout expands based on the size of the browser window. Ideally, this means that everyone will view the webpage at the largest possible width.

In practice this causes trouble for those with very large resolutions, as the length of a line of text becomes too long to be easily readable. At the other end of the scale, a 3-column liquid layout being squashed onto a small resolution rarely looks good either, with crushed content and shorter lines.

These drawbacks should always be considered, sorted if possible, despite the extra work. This usually means setting maximum and minimum widths on the content.

More Advanced Methods

For the advanced blogger looking to serve up perfect pages to each and every visitor, a number of other techniques exist. Two of my favorites are the ability to serve up different CSS stylesheets depending on the resolution, or to use elastic layouts which change depending on the text size. It just takes a little experimenting to get what you want.

At the end of the day, you can’t please everyone. For most bloggers, you perfect the page for the majority of your visitors, and do your best for the rest. If you can optimise for each and every person, well done, but don’t worry if you can’t.
What width is your blog built for?

Source: Problogger

0 comments: