Screen Resolution and the Web

I had thought that all the questions that appear in forums asking about this topic were bad enough but the number of articles that people are writing about the affect that the change in typical screen resolutions is having on the web clearly demonstrates that even so call ed experts seem to not understand the relationship between screen resolution and the design of web pages.

All of these questions and articles show is that the writer mistakenly believes that there is some connection between the resolution someone has their screen set to and how web pages will be displayed on that screen. The actual relationship is very indirect and becoming even more remote as screen sizes get bigger. Long before you get to the screen resolution of 3200 x 1200 that the system I am writing this article on is using the relationship between screen resolution and how web pages will appear has completely disappeared.

The thing is that web pages do not usually display in a way that fills the entire screen except perhaps on the very smallest of devices. In almost all cases the web page is displayed in a web browser and that web browser itself will take up a part of the screen. Just how much of the screen that a web browser's chrome (as the part of a browser outside of the viewport is called) will depend both on the browser and on how the browser owner has it configured. If they have it set to display five toolbars then it will take up a lot more space than if they have it displaying only one toolbar. It will also take up a different amount of space when it displays scrollbars to when it doesn't and you can't even predict how much space those scrollbars will take up because that can be easily changed in the operating system.

Some operating systems themselves (including all of those that run on computers) usually have their own fixed toolbars displaying on the screen taking up space that is therefore not available to the browser. These can be set to hide themselves when not required but only the computer owner can set it that way or know how it is set.

As web pages display in the browser viewport and not the entire screen and the operating system fixed toolbars and the browser chrome take up screen space themselves when they are visible all that can be said about the space that the web page is displaying in is that it will likely be smaller than the screen resolution by some unknown amount. Even this is making a number of assumptions - that the browser is open as large as possible to fill all of the available screen space and that the operating system either doesn't support virtual screens or if it does the browser is not open spanning multiple virtual screens.

In the second of these two instances the browser viewport may very well be a lot bigger than the screen resolution with the person swapping between the different virtual screens in order to see the different parts of the viewport.

Far more likely as screen resolutions get bigger is that the first of the two assumptions will cease to be true. Once you get to a screen resolution having a width of 1600 or more it starts to become quite practical to have two applications open on the screen side by side so that both can be seen at the same time. So while someone with a screen 1024 wide may have their browser viewport at 1020 wide, someone with a screen width of 1600 is as likely to have their browser viewport at 796 wide as they are at 1598. Some operating systems such as Windows 7 make this arrangement even more likely by providing keyboard shortcuts to make applications fill exactly half of the screen.

As screen widths become wider and wider the likelihood that the browser will be set to exactly half the width rather than the full width increases. By the time you get to the extremely popular 1920 x 1080 screen resolution (which appears to be becoming the new standard screen resolution as the distinction between computer monitors and televisions disappears) it is probably more likely than not that the browser will only be given half the width as most web pages will have become unreadable if they were opened full width at that screen resolution. Of course with the growing use of dual monitors the number of people with an effective screen resolution of 3840 x 1080 is also growing and those people are likely to allow the browser to use less than half of the width of their screen. Just how much of their screen they do allow for their browser is by that point completely impossible to predict.

For these reasons it is far less relevant now to talk about screen resolution with respect to web pages than ever before. The growing range of possible resolutions in which web pages are displayed means that a more flexible approach to web page layout has become necessary and CSS 3 has introduced new media tests that can be performed so as to be able to apply different styles to the page based on the viewport width - sensibly these tests completely ignore the totally irrelevant screen resolution. So now it is easier to be able to re-stack the columns of content in your page or even hide some at narrower widths in order to make web pages flexible enough to handle any browser viewport width.

Obviously this is the correct approach to take. Unfortunately there are no stats available on viewport sizes and too many people are misled into thinking that the screen resolution stats actually mean something with respect to web page design.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow