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?
For a small blog like my own I don’t know that worrying to much about the extremes of browser sizes on either the upper or the lower end is worth the hassle.
I always think in terms of liquid layouts for blogs and web pages because I seem to have better luck (meaning less complaints) with those than I do with ones built for static sizes.
My blog is built to be usable down to 800×600, but look best at 1024×678.
I based it on those widths to be on the safe side, until I had some analytics to prove I should use otherwise.
Now that I’ve had my blog up for a while, I see that I probably have some room for extra width in the future.
Interesting discussion, thanks Darren.
I have struggled with this on many of my blogs. Not sure what width to use. Now we see what John Chow has done and some were irked by this.
It doesn’t bother me that much. I prefer the width of problogger. It looks the best on most monitors.
I go for 780px main content on left, and around 1024px including sidebars.
I am currently re-designing my blog, and I have though long and hard on that topic. This post has been very helpful.
I am planning on setting my width to be ~1000px wide.
Again, thanks for the advice!
I use an 800 resolution on the laptop I use because any other resolution is too small to see.
Important: Everybody should check their blogs at an 800 resolution just to see what people like me see.
Case: There are some blogs that in 800 resolution, the content will overlap with the sidebar or header. That makes it impossible to read. Obviously, I’m not going to go back to those blogs.
I usually do around 950 or so pixels total, centered of course. Around 700px for the content and 230 for the sidebar.
A good idea is to make your total content at least 50 pixels smaller than the resolution you are designing for, to space things out and not get interference from the scrollbar.
I visit some of the more popular sites on the web and see what width they use. I figure they should know since they have the most diverse crowd and the most traffic to determine the best width. Yahoo!, CNN, etc. If they have their width at 940, then that’s what I use.
As for liquid or fixed, fixed seems to be the best for me as I can control exactly what the site will look like. When using a liquid layout, the variances in resoultions can vary so much that its nearly impossible to make your site look great with all of them. Most all the big sites use a fixed width.
A Blog About Nothing – In terms of visitors returning etc, then it may well make a difference to only a small number of people. On the other hand, it only takes one person to start a stumble, give you a great link etc. When I look at it like that, I always try to make sure that every single person is enjoying my site.
Jake – Problogger and JohnChow are the same width. It’s the vertical height of the header on JohnChow that caused a bit of a ruccus. I suppose it’s the same issue though; people on smaller screens are effected the worst.
Brian – Sounds good, just make sure you keep it under 1000! (Scrollbars)
Jeremy – Sounds like a nice setup. Have you ever looked at the “phi ratio” before? (Or divine proportion, or a hundred other names!). It’s another take on how wide to split a 2-column layout. You can see what it ends up like on my blog. It’s quite a popular concept online.
My blogs vary depending as much upon what mood I was in when I designed them as anything else.
It’s possible to design with a mixture of a fluid layout but with maximum and minimum boundaries. For example, specify that the overall width of the page may grow to fit the browser window, but not shrink smaller than, say, 700 pixels, or wider than 1400. This is fairly easy to achieve with CSS.
Speaking as someone who spends a lot of time browsing, as well, I rarely have my browser window open to the full screen, except on my laptop, as I have widescreen monitors. I tend to set browser windows to fill around 2/3 of the screen width, which generally equates to around 1,000 pixels wide. Any wider and I’m faced with long horizontal lines on pages that are 100% fluid.
Darren,
I think for blogs it is good to set 100% at least mine is set that way.
What you call liquid layout = 100%
My suggestion is always to test before you set your layout.
My website is designed to by fluid. The minimum width is 700 pixels, of which 270 pixels is the sidebar, leaving 430 for the content. I think it still looks OK at 1423 pixels wide (full screen on my laptop, with a vertical scroll bar), which is more than twice the width.
One website I did recently is designed to have a minimum width of 750 pixels, and a maximum of 1100 pixels — after that the side borders just get larger. I think this provides a reasonable compromise that is readable on any size screen.
I’d feel uncomfortable with designing a website that wasn’t usable on an 800×600 screen.
I hate having to design for low resolutions, thank goodness its not so much of a problem now a days.
640×480? pfff… then the lame 800×600, now the standard is 1024×768
I usually block designs inside of a 1000px width, if they really like your site or blog they will expand their windows to view the rest of it, or they will scroll. If they leave, either they are visitors not worth having or you need to write better content or get some web design help.
I was just thinking what width would be good for a blog and here you come, Darren.
I build http://www.truden.com for four resolutions and the user can chose them (top right), but is that necessary for a blog?
If you read this comment, please tell me, is it good idea to give the user the choice for the resolution?
Truden, I bet for a tech blog that’d be welcomed with open arms, but for a blog with less-savvy users I’m sure it’d confuse them.
Thank you so much for the great tips that I have been reading for the past week or so.
Nice job.
Joel Libava
The Franchise King Blog
Cleveland, Ohio
:(
Resolution is a meaningless measurement. You need to customize your blog for the window size. Not everyone maximizes their browser while viewing the internet.
It’s also important to note that Resolution is even less useful for determining the height or what’s “above the fold” since you won’t know how many toolbars, etc are installed.
I think the best format would be the elastic layout for blogs. It basically let the system decide the width of your layout based on screen resolution. I have used elastic layout and seems to be more effective with different browsers and different screen resolutions
Starfeeder – Low resolutions can be annoying to work for, but with the iphone and other mobile devices gaining popularity, we may soon find that we’re worse off than ever… :(
Truden – That will work well for returning visitors who know the site, but what about the first-timers?
Gamermk – That’s true, but for the reasons you said, the number of different viewport widths is huge. It would be much, much harder to work for viewports, and I don’t think it would be that helpful, because having a website which is only partly shown on a non-maximised browser isn’t a usability fault of the designer. It’s the user’s choice. If they want to see the full page, they know to maximise. Not much more that the designer can do about it.
Kishore – Elastic layouts are great when done well, but they still scale poorly between the extremes (ie. proportions that look good on 800px wide screens don’t look as good on 1600px wide screens). It is usually still advisable to cap a min and max width, like Anthony Williams described.
@Jeremy Steele – what would be the confusion for the visitors?
@Michael – what about the first-timers!?
They would still see the blog with the resolution I chose for them.
I prefer the entire screen. *=)
All or nothing for me!
Although I have a 1280×1024 display, I run my browser in a portrait-sized window with a bookmarks panel to the left, so I actually have a 748×833 window. If I run full-screen, I find th long lines too difficult to read.
On ProBlogger, it means that 2/3rd of your side bar is invisible!
My own site is 3-column, designed with a minimum width of around 600 pixels, but the main text column expands to fit the space available.
Oops, sorry Michael, I didn’t see that you are the author of the article :D
So, let me correct my first comment:
“I was just thinking what width would be good for a blog and here you come, Michael“.
I have started redesigning all my sites and blogs for 950. I used 770px for years, but recently decided that it’s time to get with the program.
I also used to do liquid width from time to time…but with all the elements most of us use on the page these days, it’s just too crazy trying to work with that. I am now exclusively using fixed-width design.
Hi,
As a web developer, I usually opt for elastic (preferred choice), or fluid depending on the type of site. I will try as much as possible to avoid pixel-based widths for the time being.
I recently started my own blog and briefly wrote up the options between fixed, fluid and elastic layout.
That blog is one example of an em-based layout. Elastic is nice in that you keep your design proportions as you increase text size. Things stay the same when the window size is changed.
However, as you reduce the window,size or increase text size sufficiently you will hit the edge and risk horizontal scrolling. If you are using a modern browser, you can use the CSS max-width setting to try and avoid horizontal scroll bars (unless you zoom a lot!). Try resizing text or making the window narrower on the above link to see what I mean.
I like em-based layouts because they are not that different to calculating pixel-based layouts.
But one thing I also mentioned on the blog was how zoom technology (e.g. in Opera and IE7) may make elastic less necessary over time…
I don’t know why you would use elastic. It causes so many problems on so many types of browsers.
Fixed width all the way – just make sure you designer is good and covers all browser capabilities like mine did.
RT
The key question that will be paramount in all of our minds in a couple of years is what should we set the ideal screen resolution to for mobile device browsers.
As we all know, web use via mobile phones and devices is growing exponentially and within about 2 years Gartner and other predict that worldwide (considering that AsiaPac and Europe will be a couple of years ahead of the US in terms of Mobile web adoption) more users will access wbe content via mobile devices versus standard PC monitors.
Michael from Pro Blog Design – That is very true. Sometimes it’s not so much about catching the eyes of everyone as it is about catching the eyes of that specific someone.
I will use what problogger.net use. Following you will be a best choice. :P
I almost always use a liquid width. Usually putting a minimum width of around 700px, I don’t usually use a maximum width.
I believe 1024×768 should be the universal resolution that everyone designs for. Unfortunately most blog themes are designed for 800×600 and they look rather bad in 1024×768.
I updated one of the better free themes available, the Green Marinee, to work well in 1024×768 and made it available on my blog if anyone is interested.
Liquid layouts are a very good idea, and I think the main content area (not the whole page) should be less than 30ems and 500px.
Why? Well, 30ems is a comfortable newspaper column width – if your line is longer, you need to increase the line height, else people will find it hard to read across the line breaks. 500px means that people who have two browser windows tiled side-by-side (a very fun way to browse, drag-and-dropping links between the two windows, even better than tabs) can still read your content comfortably.
One thing to avoid: having your left sidebar vanish off the left of the horizontal scroll. It seems fairly easy to do that by mistake in Firefox 1.x (not checked with the latest) if you get your maths a bit wrong.
nice article :)
i prefer to choose 1024 px 768 on my site. it’s the best resolution on my screen :)
One thing that you didn’t mention is also considering what your site looks like if the font is increased 2 to 4 times. Sometimes the blog looks good, while other times the layout gets blown.
Darren,
How come the new b5 design isn’t liquid? Or, maybe it is but it doesn’t work on the 800’s at my uni.
Was this decision made for the “most good” for most people?
Ramsay
Ryan B .The font size of your content should be visible to readers .Don’t use very small fonts . It should be easily readable. The font size used by problogger blog is ok .
Thanks Michael for a well thought out post. I prefer having widths less than 800 pixels. Not because of the screen resolutions people have. But because of people’s reading habits.
Research shows that 50-60 characters per line is optimal for reading. Thats about 450-500 pixels depending on the font and its size. So its recommended to keep your contend width about 500 pixels. And as your sidebar is almost always smaller than your content width – your total blog width can be easily fit into 800 pixels.
I personally like the liquid design, as it gives you more space to publish large resolution pictures and huge posts.
Nowadays its requirement to have big screen so everyone should consider this when choosing website template.
Cheers
One more vote for liquid layouts. All my screens are 1400+ pixels wide, but since I prefer to have few terminal windows and few other windows open at all times, I never run browser on full screen mode.
When I am surfing around it, it always annoys me, if I have to make my browser window wider than what it is at the time, before I can see all the information on page.
I myself am already a firm believer of having the sidebar on the right and the content on the left, this way the users using smaller resolutions can still read your content reasonably well. As of recent I have either been designing my sites for 1024×768 or every resolution (fluid)
It’s about time people dropped 800×600.
I’ve read marketing articles that state that the ads on a blog or website should be placed on the left because we read left to right. It makes since to me. What is your opinion/experience?
My English blog is optmized for people using the 1024×768 resolution. I made this choice based on the blog’s stats, as I found that a big majority used 1024×768 or higher.
Still, I did put all the more important content aligned to the left so that people with 800×600 resolutions would be able to view all the essential parts of the blog without any problems/annoyance.
On the other hand, my Arabic blog, which attracts a different group of readers mostly from the Middle East, it is optimized for people using the 800×600, with the decision also based on the blog’s stats.
“Look at your blog’s stats, and see what resolutions your own readers are using.”
This advice sounds fine, but in my opinion is completely the wrong way to work for the majority of people.
Your existing stats will only tell you what your existing users are using. If your existing site doesn’t work on 800 by 600, people with 800 by 600 resolutions won’t visit more than once, won’t link to and won’t recommend your site. Your stats will show a larger percentage of other resolutions as a result.
It also dismally fails to account for change. Small screens are becoming more widely used (Wii, mobile), and the use of larger monitors seems to be increasing the proportion of people who don’t browse at full-screen.
“perfect the page for the majority” – I agree on this point. Make sure the site is consistent for major browsers and common resolutions (using general web stats, not your own stats – or if you have to use your own stats, using new visitors only). But importantly, ensure it degrades gracefully when someone with a different browser or resolution visits.
I find that you need to be built for 1024 or so. Hardly anyone uses 800 and it just looks too bad.
Michael,
It’s no surprise to see your content here on Problogger. I think you’re destined for great things with your knowledge and writing.
Long may you continue!
Great blog entry Michael! I’ve actually been struggling with this as of late and after reading this article it has clicked. I also noticed that over 90% of my readers are on Firefox. Hmm :).
Truden – lol – Much better mate! :lol:
Chuck – Agreed. Fluid width can be near impossible to make some design elements work for.
Anup – Your blog is a great example of an elastic layout done well. 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.
Matt – If you ever get a chance to view your site in a really large monitor, take it. You’ll see why a max width can be just as important as a min one. :)
MJ Ray – If the content area is limited to 500 px, what do you do with the other 1000px that will be there on larger resolutions? It sounds quite like a fixed width layout, but liquid in the lower extremes (Which is fine in most cases. :) ).
Ankesh – People are certainly used to that, with a huge number of layouts (Blogs in particular) still being made for 800px browsers. However, when you look at that on a larger browser, it can be almost wasteful to see that the blog is only taking up 1/3 of your screen’s width. :(
Carol – We do read from left to right in print (In the Western world at least), but does this always apply to a webpage? Reading left to write only implies what the first thing you see will be, it does not imply where the first thing that will catch your attention will be. In my opinion, effective ad placements are wherever your reader has paused to look on the webpage.
e.g. If they have just read an article, an effective placement is right at the end of that article. If they are looking to navigate, effective placement is near your category list etc.
And from a reader perspective, are the adverts the first thing you want a reader to see on your blog? You may be better in the long-term to have them finding article headlines first (Getting them to read).
MMM – Just how stats should be used. Well done.
Dave – That could well be true, but could you define general web stats? The first result in Google for “browser stats” is a tech-related site. Being geared towards techy people, won’t it be skewed to higher resolutions and modern browsers? But is any other site’s stats more relevant?
For instance, that site says that in July, 14% were still on 800×600. After the 2 weeks of my blog, my own stats told me that 0.5% of my readers had been on 800×600. Did I not make the right decision then, by making a better layout for the very vast majority of my users?
As for mobile devices, things get a lot more complicated there. It’s not so much about building a gracefully degrading site, as much as it is about changing the layout entirely. (Think of the iphone-optimised sites. The fundamental layouts are usually very different to the real websites).
David – Thanks, that means a lot to me! If I could build a blog half as useful as yours has been to me, I would be more than happy. :D
The width of a site is as important as anything else in the design. Nice post Michael!
I try to chose designs that look good down to 800 X 600 only because my parents are stuck at that resolution. For them, even a huge monitor would only be used at 800 X 600. They both have trouble reading normal sized text.
Yikes! This is sad. I just looked at my blog stats for my main blog. 37% of my readers have 800 X 600 displays. Horrible! I was hoping that would be more like 5%. That is the largest percentage with 1024 X 768 coming in second with 26%.
DPeach – It sounds like you did well to ensure your blog works at 800×600 then. That’s why your own stats are the only ones that matter. :)
Sly – Thanks!