Uncle Jim's Web Designs and Tutorials

Writing for Multiple Resolutions

Site Design Optimization Recommendations

Author: Jim Stiles

Using Resolution Dependant Style Sheets (Highly Recommended)

The easiest method I found is to create two separate style sheets that set the property attributes on fonts for both high and low resolutions, then use JavaScript to dynamically write in the appropriate link to either file dependant upon the users screen resolution. You can, of course, use more than two font sizes or style sheet files. That decision lies with the individual designer.

This will give you the same effect as the Javascript Transfer, but alleviates the need for writing multiple pages. Because you use external style sheets, you simply need to add a small bit of code inside the header portion of your page.

Here's how it works: when the page starts to load, select_css.js runs. If the screen is small, (height less than 600), the stylesheet with smaller fonts is chosen. Otherwise, the stylesheet optimized for larger screens is chosen. The document.write() implementation is used to provide cross-browser compatibility in conformance with W3C specifications. You can even modify this to provide different stylesheets for any number of different screen resolutions.

After removing any existing style sheet references, add a script inside the head section of each page like the one below:

  // select_css.js
  // -------------
  // select the appropriate stylesheet according to the user's screen resolution

  document.write("<link rel='stylesheet' type='text/css' href='");

  if (window.screen.height <= 600) {
    //resolution is 800x600 or less
    document.write("small.css'>");
  } else {
    document.write("large.css'>");
  }

Let let them choose. . .

There is also the option of giving the user the choice of which style sheet to view.
You can see an example of this method on the below pages:
·  Changing style options.

·  Alternating style sheets.