jonlee.ca

This is a follow-up to yesterday’s post where I talked about testing web pages in different browsers. In addition to browser testing, screen resolution testing is also a factor to consider. As web developers, we are likely to be more tech savvy than the average Internet user, using high resolution screens and perhaps dual monitors. For those of us using 24″ widescreen monitors with 1920×1200 resolution, we can sometimes lose touch with what the general Internet public sees. And for those of us using a typical 1024×768 XGA screen present on most laptops, we may not realize what our site looks like on a 24″ widescreen.

The Distribution
As little as 5 years ago, the most common screen resolution was 800×600 or SVGA. Currently, the most common screen resolution is a step up at 1024×768 or XGA.

The stats from jonlee.ca are as follows:

XGA is indeed the most common, followed closely by the 5:4 aspect ratio SXGA (1280×1024). Very surprisingly, 800×600 is nowhere to be found even though this page is 800×600 compatible. This is an indication to me that I could expand my layout without excluding too many of my users (1.30% of them). I won’t though, because I like the “whitespace” around the page on an XGA screen.

Fluid versus Fixed-width layouts
A fluid-width layout has a width based on the screen size. As you expand the window, the content stretches with it whereas in a fixed-width layout (like this one), the width remains constant no matter what size the window.

For fluid-width layouts, screen resolution testing is especially important. Your site in your monitor’s resolution may look fine but at higher or lower resolutions things may be out of place or not aligned properly (a sign of a poorly designed layout!).

For fixed-width layouts this is less of an issue although generally, your width should be no more than 1024 (this already excludes all 800×600 users from viewing your page properly without scrolling). You should also realize that at high (especially widescreen) resolutions, your page will have a lot of empty space around the actual content. The screenshot to the right shows this site displayed with a width of 1600 (most widescreen 24-27 inch monitors).

The Fold
The fold of your page is the bottom edge of what you can see without scrolling. Many sources will stress how important this area is. Ads in this area gets the most clicks on average. Any important information or anything that you want the users to pay attention to should be included above the fold. Depending on your user’s screen resolution, the location of their fold will be different. If you’re designing on a high resolution monitor, you should be aware of what appears a lower resolution fold.

Methods to test different resolutions

1. Website Generated Screenshots
   Much like the online services mentioned in the previous post, some of these sites will offer setting a custom screen resolution. BrowsrCamp lets you choose from common widths and SurfHandsfree lets you open browser pop-ups at set resolutions.
2. Firefox Add-ons
   Some add-ons/extensions will give you control over your browser window size. I mention a few of these in my post about Firefox extensions for Web Development including Web Developer and ResizeIT.
3. Get a higher resolution monitor
   Before you think this is too much to do, increasing your screen real estate is the number one productivity booster. If you are using a low resolution monitor, it may be time to upgrade. To maximize your benefits, instead of replacing your monitor, look to use a new higher resolution monitor in addition to your existing one (assuming your video card is capable of handling it).

Browser and screen resolution are the two main accessibility factors to consider.ÂÂ For the curious, I use Firefox 2.0 on an XGA screen (on my laptop) with a 17″ SXGA LCD.

Popularity: 1% [?]

This entry was posted on Thursday, May 3rd, 2007 at 10:36 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.