One of the biggest challenges for web designers is deciding what screen resolution a web site should measure. People view the Internet using different display resolutions which makes it tricky to make your site look great to everyone. The classic recommendation has been to create all websites so they show completely within a 800 x 600 pixel screen resolution. This means, that if viewers use a 1024 x 768 resolution or bigger, your site is going to look quite tiny on the screen. So, how do we please everyone? What is Screen Resolution?
Basically, screen resolution describes the viewing area on your computer monitor, measured in pixels, or individual points of color. Virtually all monitors, whether they are the run of the mill 14 or 15 inch size, or the bigger wide screen 21 inch monitors, offer screen resolution adjustment. The higher the numbers in the resolution measurement, expressed as pixels wide (W or horizontal) by pixels high (H or vertical), the more information you can view on the screen. Because you are able to see more data, the actual web site looks smaller. Vice versa, lower screen resolutions such as 800 (wide) x 600 (high) pixels, make web sites look much bigger - often an advantage if viewers have visual impairments.
You can demonstrate this to yourself by going into your Display Properties and changing the resolution first to 800 x 600, viewing a website, then go back and change the display to 1024 x 768 and compare how the same website looks in the larger resolution.
How to Check Your Resolution
If you don't know how to check your resolution, follow these simple guidelines (assuming you have Windows as your operating system).
- Point your mouse cursor on your basic desktop and right-click on the mouse, then choose "Properties" on the menu that appears.
- Click on the Settings tab at the top of the popup screen that comes up.
- Look for the little slide tab entitled Screen Resolution.
- Slide the tab by clicking on it with your cursor, to the left to select 800 x 600, then click OK.
- Your screen will readjust itself, and ask you if you want to save the settings. Choose OK.
- Look at the website you have chosen to view in this resolution.
- Now go back through the above steps, and slide the tab to 1024 x 768 and save.
- Once again, view your selected website and mentally compare the differences in how much of the site is visible, how easy it is to read, etc.
Screen Shot of my Display set high at 1280 x 800 pixels (wide screen)
The Latest Recommendations
As you have demonstrated to yourself, web sites look different according to the screen resolution that is displayed on the monitor. This has provided a quandry for most web designers since the Internet began. The very earliest recommendations used to accommodate extremely tiny resolutions such as 640 x 460 pixels, which meant websites had to be very small to be fully visible on the screen without horizontal or vertical scrolling. As computers became more sophisticated, the recommendation rose to 800 x 600, which gave web designers more leeway to work with.
But today, many viewers have large monitors on their computers which accommodate resolutions much higher than even the biggest common web site dimensions of 1024 x 768 pixels. So, designers have to find ways that can allow all viewers to view the site in an appealing way. There is nothing more frustrating than having to scroll horizontally just to see the page (and this is considered a sin in web design circles, unless the designer is using the method to provide an interesting horizontal sort of panoptican effect). Yet, it is also frustruating for viewers who have high screen resolution to have to squint to view the site, since it looks so tiny on their screen. You can get an idea of the differences by viewing this great WPDFD Browser Grid . Another thing to remember is that the toolbars that are activated in a viewer's browser also take up space. This can range to an inch or more, depending on how many toolbars they have open, which cuts off visible height when viewing a site. As well, scrollbars on the right of the screen, chop off some of the visibility, horizontally or width wise.
Thus, if you are designing a site for a 800 x 600 pixel screen resolution, the dimensions of your visible site would have to be about 760 x 420 pixels to totally fit without scrolling. Likewise, for a 1024 x 768 resolution, dimensions should hover around 955 x 600 to fit nicely.
Current estimations show that about 80 per cent of current Internet viewers use a 1024 x 768 resolution. It is predicted that this statistic will grow steadily over time. People who have game focused systems often have the resolution set far higher than even 1024 x 768 pixels. Regardless, the current recommendation is to Optimize for a 1024 x 768 resolution.
Finding a Solution
The best way to accommodate as many screen resolutions as possible is to avoid specifying width in absolute pixels. For instance, if using a table based approach, use the percent parameter rather than the pixel one. So, if you want a table to fit either a 800 x 600 and a 1024 x 768 (or larger) specify that the table is 80% of the screen size, rather than say, 800 pixels wide. This is what Jakob Nielsen calls "using a liquid layout". This will only work though if there are no large graphics involved. If a graphic measures 800 pixels wide, it is going to display as 800 pixels wide, no matter what, creating a "frozen layout" (Jakob Nielsen, 2006).
