JavaScript Galleries vs. Flash Galleries

A Note About Screen Size and Good Web Design

The most common screen sizes (resolutions) are the older 1024 x 768, and the newer wide screen resolution of 1280 x 800. But even though the screen size is, say 1024 x 768, that doesn’t mean that’s the usable area. On a Mac the actual usable width is about 1004 and on a Windows machine it’s a little less. The accepted width for a site is 960 pixels. If you wish to ignore the old standard and just design for the new wide screen resolution then use 1020 pixels as the width of the site.

As for the height, that’s kind of a judgment call, but I’ll give you some things to think about. Whatever screen size you are designing for you have to subtract about 120 pixels for Safari on Mac and about 180 pixels for Internet Explorer on Windows because of menu bar, tool bar, etc. Just as in newspapers web designers think of what’s “above the fold.” For a web browser above-the-fold would be the area above where the user does not have to scroll down. So above-the-fold on a 1024 x 768 screen running Internet Explorer on Windows will be a little less than 600 pixels, but above-the-fold running Safari on a Mac will be about 640 pixels, and FireFox about 600 pixels.

So, the safest above-the-fold page design would be 960 x 600.

A Word About Font Stacks

The CSS font-family selector tells the browser which font to use. The font-family selector works by reading the first font in the list, it then looks to see if the client machine has that font installed. If not, it moves on to the next one in the list. If it doesn’t find a match it uses the generic (i.e. serif, sans-serif) of the font that is set in the browser’s preferences.

Note: Mark Simonson’s “The Scourge of Arial” is an excellent resource on both Arial’s history and its typographic deficiencies; the accompanying sidebar is an excellent primer on the specific differences between Helvetica and Arial.

View Artsite Framework’s installed font stacks (of course you can always create your own font stacks).