It's the difference that makes the difference!

by Joe Gillespie — Aug 1, 1998

I can't think of any other creative medium where someone spends so much time and effort handcrafting a piece of work just so the audience can experience something else entirely.

Look at the print industry. The end result looks exactly like the designer intended. Well, ahem, usually. A film director has a pretty good idea how his or her film is going to appear in a local theater. Television studios have banks of monitors of different types to get an overall impression of what viewers are going to see. Even recording studios have miserable, tinny, little speakers to hear what people using cheap transistor radios are receiving.

But web pages are an entirely different story.

No matter how much effort a web site designer puts into his or her work, there are millions of people out there who will see something other than the designer intended. Some of the differences are caused by different browsers and some by different computers, monitors and operating systems. In a perfect world, the web site designer would have a bank of monitors like the television studio each running different browsers on various computer platforms. Dream on...

Of the three main platforms, PCs running some flavor of Windows are used by the majority of viewers. The Macintosh has a lesser audience in terms of viewers but is the platform favored by (graphic) designers creating web sites. UNIX boxes used for scientific and educational use and servers are relatively rare, but not insignificant.

The worst crime a web designer can commit is to ignore the other platforms -- and it happens all the time. The print designer who has turned her hand to site design will probably expect her beautiful Mac-based site to look similar to everyone else. It won't. The PC designer will fill a page with beautiful JPEG images ignorant of the fact that the Mac user sees a totally washed-out set of pictures. Too bad.

It is essential for any designer to amass a collection of different browsers, and even browser versions. Having done that, there are still two fundamental differences between the way a page displays on a Macintosh and a PC that designers need to take into consideration.

Resolution

This first one is actually a red-herring. There is no difference between the screen resolution of a Mac and PC monitor no matter what anyone tells you and I will explain why. Admittedly, the matter is confused by the fact that, on a Mac, an inch is an inch - well, pretty close anyway. On a PC screen, an inch is one and a third inches. The inches I am referring to are those measurements on the rulers along the tops of program windows. (And apologies to all my European brethren who, like myself, use centimeters.)

When the Mac was introduced in 1984, the little 9 inch black and white screen was the first popular computer to offer true WYSIWYG. 12 point type was 12 points high both on the screen and when printed out. There being 72 points in an inch meant that there were 72 screen pixels to an inch, so each pixel is exactly one point square. This is often mistakenly called 72 DPI (dots per inch), it is in fact 72 PPI (pixels per inch). DPI refers to laser or ink-jet printer dots which are soft and round.

Thanks to the high resolution of Mac screens, that 72 PPI was possible. PC screens were derived from NTSC video monitors, in fact many of the earlier ones were interlaced just like television sets. To compensate for the lack of resolution, screen type was made larger to be easier on the eyes. The relationship between what was seen on the screen and what printed out was 96:72 or one and a third. So a "logical inch" on a PC screen is 96 pixels wide - the pixels are not smaller, the inches are bigger.

This also means that any font size on the PC screen will be one and a third times bigger than the eventual printout and one and a third times bigger than the equivalent font on a Mac screen. Nine point type on a PC is about the same size as twelve point type on a Mac. Luckily, web browsers use relative rather than absolute font sizes and the "normal" size on Mac and PCs are roughly the same.

The default browser widthon a PC is wider than that on the Mac. This compensates for the fact that both approximate the width of a printed page. The PC needs more screen real estate to view the eight inch (or so) width of a page but then many web pages ignore printing widths anyway. This impacts the design of a page because of the size that the user needs to set his or her browser to see the whole width of a page without scrolling sideways.

On a web page, only PPI is relevant, and there are 72 PPI on a Mac or a PC screen at "normal" screen resolutions. It doesn't matter what resolution you do your scans or the resolution of your PhotoShop files, a 120 pixel wide graphic will be 120 pixels wide at 72 DPI or at 600 DPI. If you print those files on a laser or ink-jet printer from within your graphics package, then it will be a different story, the 72 DPI will be large and pixelated and the 600 DPI file will be small and crisp. If you print the files from within a web page, what you get is effectively 72 DPI. Period.

The recently announced Adobe PostScript Level 3 has a provision for printing web graphics at a higher resolution. Just as in DTP, there will be a low resolution screen graphic, the GIF or JPEG, and a higher resolution file that will be automatically downloaded and substituted at printing time. This will allow high quality printing from within your browser but it brings up an interesting issue. Where web pages destined only for the screen are designed to be flexible, a web page that is going to be printed will have to conform more to paper sizes. It will be interesting to see how people cope with that challenge.

Gamma

Now we get a bit more technical.

When I designed my Web Page Design for Designers site, I chose to have a dark blue background. I checked it out on a number of Macs and PCs and although it was a little darker on the PC screens, it was still acceptably dark blue. When I started getting feedback from readers, some described the background as variously black, maroon and purple. On questioning them, (I like to get to the bottom of these things), they were all using standard office PCs.

The fact is that most people don't realize that their monitor is lying to them, and wouldn't know how to fix it even if they did.

The brightness of a glowing phosphor on a cathode ray tube is directly related to the voltage applied from the video circuitry. Unfortunately, this is not a simple linear relationship for, at half the maximum input voltage, the brightness has only reached about 18%. To give something approaching a linear response, the input voltage has to be raised to the power "gamma." The value of gamma varies from one type of tube to another but is generally in the region of 2.5 to 2.6.

In the world of television, this compensation is introduced at the broadcast end, usually within the camera. It is obviously more economical to do this that to build the necessary circuitry into every television set in the world. Without this compensation, mid tones appear much too dark to the viewer. Turning up the brightness control helps, but then the blacks become gray.

The television camera outputs a picture with a gamma of 0.45 which, when combined with the television tube uncorrected gamma, gives an effective gamma of 2.2 which is subjectively right for viewing in dim living room conditions with a six-pack.

As I said earlier, PC monitors are derived from television tubes, so most PCs do not have any built-in gamma correction. It is after all, an unnecessary expense for machines that mainly do word processing and number-crunching and color accuracy is less important.

Macintosh and Silicon Graphics computers used in the graphics industry do have gamma compensation built-in to their video circuitry through the use of hardware lookup tables. This gives a closer match between tonal values on the screen and on a printed page. But when viewing the same full-tone image from a web page on one of these machines, it will look quite different from the same image on a PC screen. If it looks right on the Mac or SGI, it will appear considerably darker on the PC screen. If it looks right on the PC, it will look too pale on the others.

To put this all in perspective, an uncorrected display would be said to have a gamma of about 2.5, the television has a gamma of 2.2, and the graphics computers have gammas around 1.8. In each instance, the white points and black points are the same, it is the mid tones that vary.


These three pictures simulate gammas of 1.8, 2.2 and 2.5. You will only see the correct relationship if your gamma is set to 2.2

In a color tube, this happens on each of the three guns, red, green and blue, which means that the RGB color values will change too because they do not "track" one another in a linear fashion. The same RGB value can look quite different on a Mac or PC if any of the components are mid-tones.

Take a typical pink flesh tone with an RGB value of 255, 204, 153. The red value of 255 is at an extreme so it will stay at the tube's maximum possible brightness for red, called the "primary chomaticity." The brightness of the green and blue guns are mid tones and therefore vary considerably depending on their effective gammas. So the overall perception of the pink color will change quite noticeably and, as a flesh tone, could be most unflattering. Of course, the same is true for any other combination of RGB colors.


The same colors viewed on a Mac and PC will vary like this because of the gamma differences.

So, what is a poor web designer to do? How is it possible to get any consistency of tone and color?

The PNG graphic file format has a feature that effectively adjusts the gamma of picture depending the platform it is running on. It sounds like an ideal answer but the format has been very slow to take off and is not widely supported by browsers.

For the minute, the W3C suggests creating web graphics with a gamma of 2.2, the same as television gamma. This is a compromise that gives results that, while not perfect for either platform, are certainly better than the alternative extremes. They will look slightly light on a Mac and slightly dark on a PC. Designers should therefore try to set their monitors to a gamma of 2.2 when creating web pages. This is fairly easy to do on a Mac but few PCs have any control over gamma at system level.

Gamma compensation made through the Mac's Monitor Control Panel will be global for any application used. It usually offers "Mac Standard Gamma" (1.8) and "Uncorrected" (2.5) plus "Page White" which has a shifted color temperature and can be ignored for our purposes. If you use an AppleVision monitor, you can choose virtually any gamma, otherwise, Thomas Knoll's Gamma Control Panel that comes with PhotoShop can be used to set effective gammas from 1.0 to 2.2 fairly accurately.

On the PC, it is possible to adjust the system gamma to 2.2 within PhotoShop via the Monitor Setup menu, although the effect is local to the PhotoShop environment and switching to another program, a browser for instance, will revert to the inherent uncorrected display. But that is fine, just get your pictures looking right in PhotoShop with a local gamma of 2.2 and it will give the best possible cross-platform result.

Some of the more expensive PC video cards have gamma compensation facilities that do give a more permanent solution. My Matrox Millennium has the feature in its Win95 control panel but not in its NT version at present. Even in the Win95 version, the adjustments are subjective because there is no metrication on the sliders. I find that by using the color calibration files in PhotoShop, the "Olé no Moiré" file in particular, I can adjust the gamma of the screen to display an image similar to the printed version in the manual. That, at least, gets me into the right ball park.

So, there are significant differences in how your pages will appear to different people. With the huge variety of computer/monitor/browser combinations and permutations, it is virtually impossible to anticipate all the variations.

Where it is possible to make browsers and HTML standards more common across platforms and even to produce common web fonts, we are going to be stuck with the resolution and gamma issues for the foreseeable future.

The first thing to do is to, and it costs nothing, is to make sure that you understand these factors and allow for them in your web page designs. The second is to clear the junk off your desk to make room for that bank of monitors.

Joe Gillespie is a designer/art director based in London, England. From a background in leading advertising agencies and design studios, he now heads Pixel Productions, specializing in design for multimedia.

Joe has acted as an interface design consultant to Apple, Microsoft and Videologic in the UK and was involved in the conception of the Electronic Telegraph &emdash; one of the web's premier newspapers.

Currently working on CD&endash;ROM projects for Canon and Sony, Joe has also produced the High Five award winning Web Page Design for Designers site.

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