Hack70.Know How to Use Screen Resolution Data

Hack 70. Know How to Use Screen Resolution Data

Answer the question "Should we build pages for 1024 x 768 or 800 x 600 screen resolution?" using the data you already have.

One of the most common questions people ask when building web sites is whether designers should build for higher or lower screen resolutions. On one hand, we have professional web designers who want to build brilliant-looking designs unconstrained by low-resolution (e.g., 800 x 600) monitors. On the other hand, usability guidelines state unequivocally, "Thou shall not force the user to scroll horizontally!" What is a web designer to do?

5.4.1. Use Your Screen Resolutions Report

Any web measurement application worth its salt will have a screen resolution report similar to the one shown in Figure 5-6.

Figure 5-6. Screen resolution report

Any decision you make about your web site should be data-driven, right? So why not use screen resolution data to decide when to move to a 1024 pixel screen width! As you can see in Figure 5-6, less than 17 percent of the visitors used lower-resolution monitors; while this helps answer the question, you should also consider trending the data over time to develop a more complete view of when to make changes, based on historical and emerging trends.

5.4.2. So When Do We Switch Over?

Worldwide, the 800 x 600 browser share is still hovering around 30 percent. Unfortunately, you should never do anything that will negatively affect 30 percent of your audience. This would be like running a store where you were rude to every third person who asked you a question; you might get away with it at first, but before long, people would know you for being rude and would eventually shop elsewhere.

So there are no easy answers, but fortunately, we've already highlighted the important view of the datayour specific visitor trends compared to the Internet-wide average. If your screen resolution report indicates that your visitors' use of lower-resolution monitors is roughly half the Internet average, you can begin to make a case for up-sizing. My gut feeling is that you as long as you're seeing a downward trend for lower resolutions and your current 800 x 600 share is 20 percent or less, you can switch.

There, I said it. Never anger a third of your audience, but go ahead and mess around with a fifth of them.

Sounds arbitrary (and perhaps it is), but you have to make the switch at some point, and you're not going to see 800 x 600 monitors disappear anytime soon with inexpensive desktop and notebook machines beginning to flood the market. More and more sites are moving to a 1024 x 768 standard, and you don't want to be the last business to make the change.

Thanks to some simple JavaScript, there is an intermediate solution, a hack that supports nearly all of your audience (provided you're willing to add a little bit of code to your pages and templates). The following hack will allow you to query the visitor's browser in real time then substitute an alternative cascading style sheets (CSS) file for visitors who have lower-resolution browsers.

5.4.3. The Code

The JavaScript to test for screen width and switch to a different CSS file simply needs to be inserted into the header of each document you want to modify:

 <link href="pageStyle1024.css" rel="stylesheet" type="text/css">  <script type="text/javascript"> if (screen.width < 1024) link = document.getElementsByTagName( "link" )[ 0 ]; link.href = "pageStyle800.css";  </script>  <!-- NORMAL DOCUMENT HEADERS INCLUDING TITLE AND META TAGS GO HERE --> 

This code assumes that you have two CSS files, one called pageStyle1024.css and another called pageStyle800.css, residing in your root directory. The page will default to the larger CSS style by default, dropping down to the smaller style if the visitor is using a lower resolution browser.

This strategy works because you'll use smaller fonts or make some other significant change to your styles that will better accommodate visitors using lower-resolution browsers. Likely, you'll need to experiment to get the right combination of styles for the lower-resolution browser. For a very complete treatment of CSS, I recommend the CSS Cookbook by Christopher Schmidt (O'Reilly).

5.4.4. Running the Code

To run the code, simply include the JavaScript code in the <HEAD> section of any page you want dynamically modified. You will also need to ensure that the CSS files are properly defined.

If you really want to be sophisticated from a web measurement perspective, create a custom variable [Hack #31] that tracks the version of the screen the visitor was shown (e.g., smaller or larger), using any of the various techniques described in the other hacks. This way, you can then begin to determine whether changing the style sheet for lower-resolution browsers has any impact on their likelihood of success.