by Larisa Thomason,
Senior Web Analyst,
Your office mate has her monitor set to 800x600 pixels, while yours is set to 1024x768 pixels. You have more pixels, right? So how come everything looks smaller on your screen? It's because the pixels on your screen are smaller, so more of them fit into the same space. While this "more for less" concept sounds like a great idea, it can affect the overall usability and accessibility of your Web site.
Put More Into Less Space
The term "screen resolution" refers to the number of individual pixels that fit within a given space. When we're discussing an 800x600 resolution, the number 800 refers to the number of pixels that the monitor can display horizontally, while the number 600 refers to the vertical limit.
Monitor size and optimal screen resolution are closely linked. As you increase the resolution, the screen elements appear smaller. In fact, the information contained on a 15-inch screen set to 1024x768 may be so small as to be virtually unreadable. But the same information displayed at that resolution on a 17 or 21-inch monitor would look fine.
That's because a 15-inch monitor set to display at 800x600 pixels has a higher resolution than a 21-inch monitor set to the same display. That means a 200x300 pixel GIF image will look smaller on the 15-inch monitor than on the 21-inch monitor. An image that size would still be readable, but small navigation buttons quickly become illegible - even for visitors with great eyesight.
Design For Your Visitors
Ideally, your site should be completely device and browser-independent - but that's an almost impossible standard. The next best strategy is to design a site that looks good and performs well for the vast majority of your visitors. That takes research:
- Study your log files to determine the most popular browsers and browser versions.
- Become familiar with the major assistive technologies used by visitors with disabilities.
- Test your site in multiple browsers, versions, screen resolutions and operating system combinations.
- Reference online user surveys to learn more about demographics, browser, and screen resolution preferences. Surveys from WebSideStory and BrowserNews indicate that 800x600 is the most popular resolution, with 1024x768 close behind:
| Browser News
Avoid informing visitors that your site is "best viewed at" a certain resolution or with a certain browsers. It's not a helpful hint. It's a synonym for poor design practices. Fortunately, it isn't hard to design a good site or test it. You just have to take the time to do so.
Page Design Tips
Many Web designers use large monitors and run them at the highest resolution possible. Professionals who would never post a Web site without testing it on all browsers often forget that screen resolution can affect page display even more than browser differences.
Here are a few simple steps you can take to design and test sites that work in multiple screen resolutions:
Some designers may be willing to go to this much trouble, but imagine the time it takes to maintain multiple copies of the same page and the possibility for error! Also, the script uses a redirect and some search engines penalize pages with redirect scripts.
- Centered table with fixed width: Many Web sites that use tables for layout set the table width to a fixed number of pixels to eliminate horizontal scrolling at lower screen resolutions. A page optimized for 800x600 should have a maximum width of about 760 pixels.
Now remember that someone viewing the page at a higher resolution will see a lot of empty space. The page may display more attractively if you center the table and give the page a complimentary background color.
- Percentage table width: Usability expert Jakob Nielsen recommends the use of a percentage table width instead of a fixed width. Then, the Web page will always fill the browser window. That's a very reliable method for smaller monitors, but take care that your page doesn't stretch out too much if someone were to view it on a 21-inch monitor.
Also consider taking steps to speed up your tables. Large and/or nested tables in particular can dramatically slow page display.
- Test it, test it, test it: You can test your page quickly just by changing the screen resolution of your own monitor. In a Windows environment, select Start/Settings/Control Panel/Display/Settings to change your monitor's resolution without restarting your machine.
That's an easy way to do a simple check, but more thorough testing requires multiple operating systems, browsers, and browser versions. NetMechanic's Browser Photo tool puts all that at your fingertips at a fraction of the cost of a full-blown testing lab.
Usability And Accessibility
Although many people automatically think about people with some sort of physical impairment when accessibility is mentioned, the term actually refers to a Web site that is open to all. Even visitors with old equipment, tiny monitors, slow modems, and screen readers can use accessible Web sites.
What happens when a designer considers how the page will look to all visitors? The usability level of the site increases, as does visitor satisfaction - and hopefully repeat visitors. You don't have to design an ugly site geared towards the lowest common denominator. Just put some thought into how the site looks in configurations other than your own.
If you assume that "everyone" has a huge monitor running at the highest possible resolution or other cutting edge equipment, then you could be locking out well over half of your visitors. Why not invite them in instead?