We often get asked why our websites don’t fill up the whole browser.
When we started designing websites (back in the day), monitor sizes varied considerably. A lot of people were still on 15″ CRT monitors particularly in the corporate arena. Some people who were particularly good at negotiating had snared 17″ or 19″ LCD monitors for a few thousand dollars.
As monitors grew and grew it became pretty hard to determine the best way to display sites and we often tended to make sites span 100% width.
These days however the monitor size race has settled down a bit and most people have decided that a 19-21″ flat screen is about right.
Since we know most people have around about the same size monitor there’s no real need to span websites 100% width. There are also downsides for doing so – the main one being you lose the ability to place things in the same position in relation to each other as the page stretches therefore the site will always look slightly different on every different monitor. The other is sites with a lot of reading would be very difficult to read if they stretched the whole width. Think about having a really wide book – there is a reason most books and e-readers are about the same size – its because its very difficult to read really long lines of text.
With fixed width sites you know sites will always look exactly the same other than some will have more space down either side.
We build all of our sites at around 1000px wide. This means they will display on a 17” monitor without horizontal scrolling. On a 19” monitor there is a small amount of white space either side. On bigger monitors there is more white space (or space for a pattern of non critical graphical element) but people with bigger monitors tend not to have browsers at the full width or they have gotten used to having spare space at the ends.
In fact 1000px fixed width design has become pretty standard. If you look at all of the following leading websites they are all fixed with – around about 1000px.
http://www.youtube.com
http://www.facebook.com
http://www.twitter.com (its actually a fair bit under 1000px)
http://www.ebay.com
http://www.cnet.com
http://www.news.com.au
http://www.realestate.com.au
And the list goes on.
Occasionally we do see major sites with variable width interfaces like http://www.amazon.com. I guess they figure the more real estate they take up the more products they will sell and it looks like they have gone to some lengths to make sure it looks reasonably consistent on different size monitors. For the most part however having 1000px fixed width has become pretty standard.
Hi I'm Dan, this is my blog. There are 147 posts here, check out my 
We have a variable width design – mainly because it has always been that way and because we design on a Mac with (of course) always with a variable width window on the desktop.
But some of our pages do not look so good on a wide PC monitor.
Is there any way of having a variable width, flowing style, webpage but with a MAX width also specified on some way. Or perhaps a way of opening a specified width window on a PC?!
[Reply]
Hi Peter,
It gets a bit tricky defining max widths for PC users, most PC users are using Internet explorer. Up until IE8 there is no support for the CSS property max-width.
If you’re not too fused about restricting the max width to only supported browsers then you can simply add max-width=value to your style sheet.
If you want to add max-width so it’s supported by IE6+ you will have to add some javascript into the style sheet, as far as I know only IE accepts this but the syntax is;
width: expression(document.body.clientWidth > 990 ? “960px” : document.body.clientWidth);
you can add them both to the same CSS element to affect all browsers.
[Reply]
Great post! I have a few interesting facts that might be worth mentioning.
The widescreen movement was driven by the film industry because humans can look left to right faster than they can up and down, and this causes less eye strain. With that being said you might argue well, why not have the website fill the whole screen?
Well studies have shown that the optimal width of a paragraph is around 50 – 60 characters (depending on where you look). That averages out to about the size of a standard book. When was the last time you read a widescreen (landscape) book? Books are portrait for a reason!
Website’s like Google and Amazon have a liquid layouts that fill the whole screen, however Google have a few fundamental differences which make it far superior than Amazon.
Both Google and Amazon have fixed width’s on their ‘sidebars’. This is a good habit to keep your navigation the same no matter where you look at it from. However, Google have max-width of 1180px on their content area (since the new Google instant was brought in), whereas Amazon let the page fill the screen. This makes paragraphs on my screen horrible to read making them about 100 – 150 characters long.
[Reply]
Hi Maurice, thanks for that, it’s great info.
[Reply]