You can never tell just what your users are going to do. Sometimes, their browser settings aren't quite optimal for your site, and you are forced to cater to the lowest common denominator. For instance, if you have a lot of data to display, it would be great to take advantage of the extra screen real estate provided by 1024x768 resolution, but this would alienate your 800x600 users.
You can design for 1024x768 resolution, but make sure to use cascading
stylesheets for just about everything. Then, create a new stylesheet (or set of stylesheets) that will make your pages look OK on an 800x600 screen. Since everything will be bigger, you can shrink the font size and make many other optimizations.
Finally, take out the tags that reference the stylesheets. Add a script to the top of each page, right after the
...And put this script (which works in IE4+ and NN 4+) in the choose_css.js file:
// choose_css.js
// -------------
// choose 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(big.css'>);
}
Here's how it works: when the page starts to load, choose_css.js runs. If the screen is small (height <= 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.) You can even modify this to provide different stylesheets for any number of different screen resolutions (or browser capabilities, or whatever info you can get to through the DOM).
Chris McCann
If you have a hot tip and we publish it, we'll pay you. However, due to accounting overhead we no longer pay $10 for a single tip submission. You must accumulate 10 acceptable tips to receive payment. Be sure to include a clear explanation of what the technique does and why it's useful. If it includes code, limit it to 20 lines if possible. Submit your tip here.
Digg
del.icio.us
Newvine
furl
StumbleUpon
BlinkList
Newsvine
Magnolia
Facebook
Tailrank
Slashdot
Technorati
Google Bookmarks
Yahoo Favorites
Windows Live
Ask
