Web Usability

Say

Wednesday, October 25, 2006

Resolution

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.

Currently, about 60% of all monitors are set at 1024x768 pixels. In comparison, only about 17% use 800x600 so it's obviously less important to aim at perfection for these small-display users

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.

The three main criteria in optimizing a page layout for a certain screen size are:

Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
Readability: How easy is it to read the text in various columns, given their allocated width?


Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly -- that is, are captions immediately next to the photos, etc.

0 Comments:

Post a Comment

<< Home