Most Common Screen Resolution
I have been working on a project where the client wants to display their entire homepage in the browser window. Now this is not normally a problem, I always design my sites to fit on screen resolutions of 800px x 600px maximised which gives me 760px by 420px to play with.
However this particular project has several important elements to the home page which must be present, and however I laid out these elements on the page I was unable to reach a solution which worked for the client.
The alternatives were drop some of the home page content or design the site to fit in a browser window for higher resolution screens. I wanted to find out 2 things which I found were not that easy to come by so I could advise my client whether designing for a higher resolution screen was an option.
The following screen resolution statistics are correct at the time I publish this entry, as time goes by you can expect these figures to change. Through my research I have found most users have screen resolutions set to 1024x768 and higher, but 17% still have 800x600. A very small number, roughly half a percent, still have 640x480.
544x372 (MSN-TV / NTSC):
There are about a million MSN-TV users, which equates to approximately .05% of page accesses. This figure is not likely to change in the near future but longer term changes depend on how people embrace such technology.
640x480:
People with this screen resolution accounts for ~0.5% of page accesses. Most users have older model computers. The number will quickly drop as these computers are superseded by newer models.
800x600:
This accounts for ~17% of page accesses. Some users have old computers, the rest likely have new PCs whose resolutions are set lower because many new PCs are sold using a lower screen resolution by default. It is predicted this percentage will decrease steadily as higher resolution displays become common place.
1024x768 and higher:
Today this screen resolution accounts for ~80% of page views. Most new computers have enough video memory to handle high resolution displays, but many are set to a lower resolution because the machines are shipped with a default lower resolution. The percentage of high resolution screens will continue to grow.
Now I new that ~80% of people viewing web pages had monitors which display at a higher resolution, I needed to know how much space I had to work with if the home page was designed to fit in a browser window when the screen resolution is set to 1024 x 768.
From my research I eventually found the following information. The first figure is the amount of space available to a designer; the second figure is the actual screen resolution setting. If you are wondering why not all the space is available to a designer is because you must allow for the space used by tool bars, scroll bars, status bars etc.
Screen resolution
536 x 196 (640 x 480, Default)
600 x 300 (640 x 480, Maximised)
760 x 420 (800 x 600, Maximised)
795 x 470 (832 x 624, Maximised)
955 x 600 (1024 x 768, Maximised)
544 x 378 Web TV
What I have learnt today is although the majority of users do use have a screen resolution set to 1024 x 768 you will be alienating a considerable amount of people if your site is designed for that resolution. As an alternative for this particular project I will be designing the home page to fit into 760 x 600. This will give me the depth to ensure all page elements sit elegantly on the page, and anyone with a lower resolution will still be able to view the site but just have to scroll down to view the full content.
The other alternative is to design your pages to be scalable, so rather than defining fixed width and height measurement you use percentages which allow your page to grow or contract to the available screen space. In this instance it is not an option for me as the site will be a fixed width of 760px.
I think at this point It is important to note that (1) the screen resolution of a user’s computer says little about the size of the browser window, not everyone will view your page with the browser window maximised, and (2) users can easily resize the browser window. Consequently no particular browser window size can ever be assumed.