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?
Last year I was asked to check out a website and give feedback on it for an acquaintence and I found that he was using a very high resolution so the site didnt fit on my 1280×1024 screen. When I mentioned this to him, he seemed somewhat shocked that I was using such a low resolution, as he was under the impression that most people use higher. He was coming from a POV that focused on people with massive desktop monitors and he forgot about those of us who operate primarily on laptops. Many laptops just don’t have huge screens for obvious reasons. Sure I can plug a bigger monitor to my notebook, but that just makes portability a bit more of a nuisance for me.
I don’t know what resolution most laptop power users go for, but I think it’s good to at least remember that not everyone will be using a desktop and have a huge monitor.
I have a wide screen with a resolution of 900×1440. This screen has a feature where I can rotate it in all 4 directions. I use the long option very often, especially when reading blogs. I don’t need a wide screen, but rather a long one, where I can sit back, take my hands off the mouse and keyboard and enjoy an interesting post.
In this blog, I get the right sidebar cut off. I must say that it’s not too bad. I don’t really miss anything. On the other hand, seeing the horizontal scrollbar is somewhat disturbing. I feel like I might be missing out on something…
I prefer a liquid layout. I made my static website table-less and liquid years ago and loved how it looked the same on any screen, at home or at work. I was hooked.
With my wide screen LCD, I seldom maximize my browser fully, though; the width allows me to see other windows underneath the browser.
One of my pet peeves, though, is a fixed width that’s super narrow. It makes me want to poke out my eyes.
Agree, find your screen size for most of your viewers and make sure it looks fine for one size up and down. and make sure it looks perfect in 1024 x 768px.
I have written an article about this before over at:
http://germworks.net/blog/2007/06/04/what-screen-size-to-use-in-web-design/
Michael from Pro Blog Design asked me “If the content area is limited to 500 px, what do you do with the other 1000px that will be there on larger resolutions?”
The answer is simply: if you have something else to do with it (like another column, sidebars, call-outs, graphics, or whatever), then use it for that. Otherwise, just use it as spacing. (Sometimes I use it well, sometimes I just don’t care much, like on my personal pages at the moment.)
Flooding the main content out to 900px or so is usually bad design, particularly with regular small-ish fonts – it just makes the lines too long, too hard to read and bugs the hell out of readers on a small screen. I think readers will then either switch your styling off (View->Page Style->No Style) if the content is valuable enough (how I view problogger still!) or click off your site quickly.
DPeach – blog stats are unreliable. Blog stats reports of viewport size are *very* unreliable. Beware.
Michael: thanks for the kind words. You added that “With that said, you will have spent a lot longer getting that right, which isn’t always an option to web designers on a budget.”
I hear you. In that link I posted, I concede that fixed layouts seem easier. I think one thing I probably didn’t explain well was that if something like accessibility (and therefore text resizing) needs to be considered, then the total time may even out, or even work in favor of elastic layouts, as such considerations would have gone into the initial development, rather than be attempted later.
I accept it is not initially easy but I as a web professional myself, I do admittedly find that over time it becomes fairly natural and quick to do. Oversimplified, where one thinks of pixels, use em values. I think the key is to stick to web standards, and standards-compliant (X)HTML. Otherwise problems (with IE in particular) are far too many.
Even if a client were to request a site to fit into 800×600, I would use em dimensions that fit into those requirements (of course discussing with the client the implication for resizing).
My blog for example is just spare time stuff, the main theme (including the images) I did in about 14 hours. And that was also because I was learning how to use Word Press at the same time. The CSS bit was a LOT less but I do concede that the background images etc take a little bit longer because you need to consider how the images work when text size is changed.
I would hope therefore that web designers on a budget (I consider myself a developers, as opposed to a designer, for example!) are not too put off by it, then!
Of course, elastic isn’t for all situations, either, but a useful tool to have in the box, so to speak.
RT the fitness guy: you asked why anyone would use elastic, for it causes all sorts of problems? The main reason is for some basic accessibility and design flexibility: i.e. allow people to resize your web site while minimizing distortions to your layout, and seeing text overlapping. It also helps overcome the limitations and problems of fixed layouts. See the link I mentioned in my previous comment.
I recently wrote about this topic because it was something I had to learn over time. I hate horizontal scrolling on the web. And as a freelance web developer that serves some small businesses, I’ve found out that a surprising number of businesses still use really old monitors. So I when I redid my site I made it 750 pixels wide to better serve my target market. Still have to fix a few things but I’m happy I ultimately made that decision.
The unused space on really big monitors isn’t really a bad thing. It just focuses the user on the content a little more.
800×600 all the way
nice article but i like 1152×864
Determining Screen resolution is definitely one of the toughest decisions when developing a blog. Browser types and monitor sizes create a challenging situation for the typical blog designer. Great article.