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.
The problem however was that monitors have gotten so big (think 27″ iMac) that websites would look terrible spanning the whole way across. Text that is designed to be a paragraph would be all in 1 line and you’d lose control of the look and feel. In addition readability would suffer since it would be well over the recommended width for a piece of text. 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.
This fact along with the fact that more and more people are accessing websites from laptops and tablets with even smaller screens has seen the 960 pixel fixed width be more or less adopted as the standard in web design.
With fixed width sites you know sites will always look exactly the same other than some will have more space down either side.
What it means is a 960 pixel width site will take up the whole screen on an iPhone / iPad, most of the screen on a small laptop and 19″ monitor. On a large screen it won’t show up filling the whole width but generally users of these screens won’t maximise the browser because there is no point in doing so. Mac users don’t often maximise the browser even on a small screen – in fact they don’t even have a button that will let them do it (you have to either make the app full screen or manually re-size it).
Here are some examples of high authority sites that have adopted the stanandard 960px (or thereabouts).
http://www.youtube.com
http://www.facebook.com
http://www.twitter.com (even less than 960px)
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. Plus they have different versions displaying on different devices which is a luxury a lot of companies can’t afford.
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]