Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Screen resolution story.
screen resolution story search bar.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Tips on designing web compatibility into your site.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Accessibility Tip:
Screen Resolution And Page Design

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

     
  
December 2001
(Part 2)
Vol. 4, No. 24
 • Promotion Tip
 • Beginner Tip
 • Accessibility Tip
  

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:

Display Size  WebSideStory  
  7/2001 Survey 
 Browser News 
  12/2001 Stats 
 640x480  5.71%  4%
 800x600  52.47%  53%
 1024x768
and higher
 35.6%  41%

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:

  • JavaScript: The JavaScript Source contains a script that detects screen resolution and redirects the visitor to a page optimized for their particular resolution.

    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?



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.