markparnell.com.au
The Irrelevance of Screen Resolution to Web Design
Introduction
It is very common for web authors to talk about their site being designed or optimised for a particular screen resolution, generally with regards to the width of the page. This article aims to explain why screen resolution is irrelevant, and why designing for one specific screen size is an exercise in futility.
Often in web authoring forums and newsgroups, there are discussions on which screen resolution to design for. This is especially true in the last few years, as higher resolutions have become more common. Various statistics are quoted to support each view, but the discussions generally miss one vital fact - it's not about resolution. There are several reasons for this, outlined below.
Not everyone has their browser maximised
Discussions on which resolution to design for always ignore the fact that not everyone has their browser window maximised. This is especially true for higher resolutions. The most common resolution may be 800x600, or it may be 1024x768. In the future, it may be 3200x2400! But what difference does it make if the screen resolution is 3200x2400, if the browser window is only 950px wide?
Available screen canvas != screen width
The second reason that resolution is irrelevant is that the available space on screen for a site is always less than the screen resolution, even when the browser window is maximised. In addition to the space set aside for displaying web sites, the browser at the very least has a scrollbar. This can vary in width, depending on browser, OS, and the user's display settings.
In most cases, web developers do attempt to take this fact into account. E.g. if they decide to design for 800x600, they will usually make their site around 780px wide, to allow for the scrollbar.
However, there is more to it than that. Most browsers now have the option to display what is called a "sidebar". As the name suggests, this shows on the side of the browser (generally the left side, opposite the scrollbar). This can be used to display various things, such as the history of pages visited or bookmarks. The width of the sidebar is completely under the control of the user, and may not even stay the same, depending on what they are doing at the time.
Detecting screen resolution
It is worth noting at this point that many authors attempt to cater to more than one screen resolution by using Javascript to detect the visitor's screen resolution, and sending them the appropriately sized page.
While this approach has some merit, in that it does not assume everyone has the same resolution, it fails for several reasons. Firstly, it has no chance of working if the user has Javascript disabled or unavailable. Second, detecting screen resolution with Javascript, even if the user has Javascript enabled, is unreliable at best. Third, it is still focusing on screen resolution, not available canvas area, which is far more difficult to detect.
Maximising the visitor's browser
A much nastier way of attempting to ensure the site fits the window is the use of Javascript to maximise the visitor's browser window when the page loads. Again, while this approach indicates an acknowledgement that not everyone surfs with their browser window maximised, it is highly inappropriate, and usually just serves to annoy the user, who will generally just go elsewhere. Many browsers now also provide a mechanism to block sites from resizing windows, because it is so intrusive.
Summary
Resolution is completely irrelevant in web design. While the resolution of the screen obviously does limit the available canvas area, there is no direct correlation between the two.
Even if the browser window is maximised (which is not guaranteed), the available canvas could still be significantly less than the screen resolution. It is far better to design a fluid site, that automatically adjusts to whatever size the visitors browser canvas is.