Practical Web Design - Fundamentals of Web Design

Display Size

Most Web surfers out there have long since graduated from the pedestrian 640x480 resolution (display size) on their monitors. 800x600 is considered the current "default" size by many Webmasters, and plenty of folks out there view their Web pages in bigger displays -- 1024x768 or even larger.

According to one source, the 'net community is pretty evenly divided between viewing at 800x600 and 1024x768, with only 2% still working with 640x480. I'm not so sure about this figure. I can't back this with research, but I have the gut feeling that a lot of folks -- at least more than 2% -- are still using a 640x480 display. Most of these people aren't the kind of folks who post on design forums or answer 'net surveys; they're using older computers in their schools and local libraries, in the basements of their churches, or just don't bother (or can't afford) to try to keep up with the new trends in computing.

Again, it's a matter of knowing who your audience is. Is your site likely to be used by a lot of "old-time" or less technologically aware surfers? If so, you might consider sticking with a design that works on the old 640x480 display. The majority of us, though, should design our pages for the 800x600 user. With this decision made, we can stick to some fairly simple parameters.

As a rule of thumb, your page shouldn't be any wider than 744 pixels (759 if you're not going to have a vertical scrollbar displayed). The initial length of a displayed page is around 410 pixels; any longer and you'll get the scrollbar. Most surfers don't think twice about a vertical scrollbar, but I don't know many who appreciate a horizontal scrollbar requiring them to go back and forth along the page to see the text. It's easy to use a simple table structure to constrain your page to fit on a display.

Be aware that using graphics that are wider than 748 pixels is going to require your viewers to scroll horizontally to see the entire graphic, as well as letting the text march off the screen, and that's annoying. Aunt Gracie absolutely detests horizontal scrollbars. And for some reason, far too many sites are optimized for an 805-pixel width, which makes absolutely no sense to me. It's just wide enough to force a horizontal scrollbar in an 800x600 display, but there's no content hidden to the right. Strange, and useless.

Note: the 744 pixel width goes along with Internet Explorer 4.5 and 5 for the Macintosh. IE 5 and 6 for Windows accepts a width of 780 pixels. Netscape for Windows shows a display between 776 and 780. The recommendation of a width of 744 is the safest and most conservative choice. The initial height of 410 is a similar "safe" choice; many browsers display at a height up to 446 pixels. Additionally, users who turn off some of their topside browser toolbars have a bit more height to work with. There are other caveats, such as:

• whether or not a particular surfer has double or outsized Windows taskbars,
• whether or not they're using XP (which sports a slightly larger taskbar),
• if they have the Microsoft Office toolbar displayed,
• if they've chosen to dock their toolbars along the side of their display,
• if they've set their browser margins to something unusual, and
• whether or not you're using CSS absolute positioning.

You can't please everyone, nor should you try, but you should err on the safe side so that almost all of your viewers can have your page displayed comfortably. An excellent source of information on browser sizing is Webmonkey's "Sizing Up the Browsers" page; go here for lots more detailed info, including height and width recommendations for other monitor resolutions.

Another source recommends designing your page for an 800x600 display, but keeping the text portion of your site between 640x480. That makes sense.

Text Sizing and Font Choices

While it's a design ideal for a site's text to display in the same size no matter who views it, in the real world this just isn't going to happen. Different browsers display text in different sizes, and more knowledgeable users commonly adjust their font display to suit themselves.

It's unfair to use an absolute font size in your Website's text. What looks just right to you is too big for the fellow with 20/20 eyesight and too small for Aunt Gracie and her cokebottle glasses. Let the individual control the size of the font display. If you want to make a particular block of text larger or smaller, use relative font sizes that increase or decrease the block size in relation to the user's default font sizing. The simplest way to illustrate this is with a basic FONT SIZE command:

<FONT SIZE="+2">This line is bigger than the rest.</FONT>

This particular text block between the FONT tags will be bigger than the rest of the displayed text, but will still base itself on the user's font size preferences. Naturally, there are other, more sophisticated ways to control font sizing.

Modern CSS protocols allow the Web designer to control the size of the text display down to the pixel. All well and good, but what if the chosen text size doesn't suit a particular visitor's viewing needs? The surfer has a couple of options at his/her command to change the font display, but on IE's default toolbar, the "Size" button isn't displayed until the user goes through the View, Customize option to get it there. How many of your site visitors know about that button?

The same surfers don't know that they can force their browsers to display your page in a selected size. There's also the option to let your visitors choose their own style sheet, giving them several options of font style and size, but a lot of Web designers don't know how to do this, and a lot of site visitors don't know how to use the option.