Taming the Electronic Page

by Joe Gillespie — Jun 1, 2000

One of the first things that needs to be considered is the page size that we are going to work on.

On paper, we work to A4 or Tabloid or 48 Sheet poster format knowing that the size is going to stay constant. Not so with a web page!

We do know that a web page will be within certain height and width limits. The smallest it is likely to be is governed by the standard monitor size of 640 by 480 pixels.

On a Windows PC, the browser window will make use of the full width of the screen by default.

On a Macintosh, it will usually be slightly narrower so as not to hide the row of icons down the right hand side of the screen.

With the growing popularity of larger screens - 800 x 600, 1024 x 768 and more, oversized web pages can, and do, become unreadable on smaller monitors.

The graphics, which are a fixed size, can be too wide to fit and the text just word wraps to the browser's width making ridiculously long, unreadable lines.

For the lowest common denominator, cross-platform web page, you should design to a minimum width of the Macintosh default of around 470 pixels and a maximum of 625 wide to accommodate people who have standard 14" VGA monitors.

The majority of surfers now have 800 x 600 or larger monitors. Unless you really need to accommodate the lowest common denominator, and that comes down to knowing your target audience, you can work to a more realsitic width of about 760 pixels.

Even at the larger sizes, it is desirable from a 'readability' point of view, to limit the text line width to 8-10 words.

Browser Grid

WPDFD Browser Grid

This browser grid replaces my previous web page rulers and shows the 'safe areas' for different screen sizes. This takes into account the 'dead' areas populated by menu and button bars at the top and bottom of the screen and by scroll bars at the sides.

The link takes you to a Web page containing the browser grid. You can also download the actual GIF file and use it as a template in your image editor by going to this page and saving the image to your hard disk. Use the right mouse button on a PC or, on a Mac, just drag and drop the image to your desktop.

Colour Fidelity and Gamma

On a Mac, the jump from the second darkest colour to black can be too severe. On a PC, there may not be enough differentiation between the darker tones

Macintosh default gamma is 1.8

Television and Web gamma is 2.2

Uncorrected PC gamma is 2.5

The other major factor influencing how your web pages look, especially if they are graphically intensive, is the colour fidelity.

The colour swatches on the left are 10% steps of red, green, blue and grey. Ideally, they should look like even steps with no obvious jumps from one to the next, but this very much depends on your monitor's brightness, contrast and gamma settings.

If your monitor is too bright, the black will not be a true black and if it is too dark, the white will not be pure. If both are wrong, then your contrast is not high enough.

What happens between these extremes is governed by your monitor's gamma setting. If you consider that the extreme bright and dark ends of the tonal range are fixed by your brightness and contrast controls, the gamma controls the brightness of the midrange tones. The 50% grey should be visually half way between the white and black and there should be even steps of tone going to white on one side and to black on the other.

Monitors don't behave the same way as the human eye, and on an uncorrected monitor the steps will not look even. Monitors on PCs are designed for non colour critical office work, and as such don't give an even spread of tone, the dark colours tend to run together.

Macintosh computers have built-in gamma correction but this errs in the other direction, it is intended to simulate the result of a printed page more closely.

The consequence of all this is that graphics that look OK on a PC monitor, will look pale and insipid on a Mac monitor and what looks correct on a Mac will be visibly too dark on a PC. So, any GIF or JPEG image that you create should be produced, and look correct, at an intermediate gamma setting of 2.2 - this is the standard recommended by the W3C, and is the same gamma used for broadcast television.

Although it is very easy to switch to a gamma of 2.2 on a Mac through the Monitors and Sound control panel, PCs don't usually have any such facility except for some of the more expensive video cards.

As gamma correction is non-linear in nature, and applied to the Red, Green and Blue components separately, it not only affects tone, but colour too. Across the gamut of possible RGB values, the relative intensity of each colour will differ as the gamma changes. The colour that you see on your monitor may look quite different on somebody else's.

You don't have any control over what monitor setting people are using out there and there is no method of detecting them and correcting for them. If you want the best possible tone and colour fidelity across all computer platforms, you have to compromise by working at the 2.2 gamma.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float