hen you design something for print, you design it once, send it to the printer, and receive final products. While there is some variation between human eyes, by and large everyone sees the same ink on the same paper and receives essentially the same experience. The Web is a different story!
The Web is the first area of design that requires designers to understand cross platform differences?that is, to understand how different types of computers display items on their screens. Appreciating these differences helps you create pages and graphics that are compatible with whichever computer your readers are using to view your pages.
Macs, PCs, Unix boxes, Web TVs, PDAs… these are all devices with which people view Web-based content and each produces a very different viewing experience.
Different platforms use a different base gamma.
For Web design, a major difference between platforms is the way they handle gamma, or the amount of displayed brightness.
Gamma is a measure of contrast in an image, typically in the midrange grays (mid-tones). The higher the gamma, the darker the tone.
- Macs use a gamma base value of 1.8
- PCs use a gamma base value that varies with the installed video card, but is typically higher than the base Macintosh value.
The result of this difference is any graphic you design on a Mac will appear darker and muddier when someone views it on a PC. Conversely, any graphic you design on a PC will look somewhat washed out on a Mac.
Most image editing programs come with a gamma control panel which lets you adjust your monitor’s gamma. This means you can simulate the way a graphic will appear on the different platforms. Because PCs are the most common platform, most Web designers set the gamma control panel value to represent the PC gamma and design within that space.
To make sure your graphics look good on different monitors, you will have to switch back and forth between gamma settings. Unfortunately, the gamma control panel doesn’t facilitate easy toggling. If you are using the Mac to create graphics, you might want to check out a Mac shareware utility called GammaToggle FKEY which enables you to easily toggle between one setting and another.
You should also set your monitor values from a neutral point, so that you aren’t working in an environment whose setting have been skewed by color perception. To do this:
- Set your computer’s desktop pattern to a light gray so it doesn’t affect color perception.
- Use the the factory presets for brightness, contrast and color, then do a test using a grayscale and color chart. Then, adjust the factory presets.
The viewing envrionment shapes the viewing experience. As the variety of viewing devices increases, you’ll need to be increasingly aware of how your information holds up within different environments.
Default Character Width Size
Different platforms use a different default character width size.
You’ll notice that the same text and graphics will look slightly larger on a Mac than it does on a PC. This is not your imagination!
The two operating systems use a different default character width size. On the Mac, each character pixel is sized to be 1/72nd of an inch at the default 640×480 screen size. On the PC, each character pixel is sized to be 1/96th of an inch at the default 640×480 screen size. This means that a 72 pixel wide image will fill up one inch of Macintosh screen real estate?but not quite an inch of PC screen real estate.
Make Liquid Pages
People are using different screen sizes and viewing areas?liquid design helps your page look good on all sizes and viewing areas.
When you create a graphic treatment, you tend to view it on your monitor, under your viewing conditions. Most readers won’t share these same conditions. That’s why it is important, when possible, to design liquid pages.
A liquid page is one in which the page elements will flow into whatever size screen your audience is using. Just as you wouldn’t want to be forced to keep your browser at someone else’s idea of an ideal size, neither should you force your readers to keep their browser at one size!
Be aware that images will display at slightly different sizes on a Mac and PC.
To keep your page liquid, avoid fixed width tables and oversized imagemaps.
Readers have a wide variety of screens; don’t assume they are all like yours.
In addition to employing a liquid design approach, you might also want to keep in mind some of the screen size and settings that your readers may have?understand how your page’s appearance will change under different circumstances.
- In the early days of the Web, the lowest common demoniator of screen size was a very small 580×350 pixels. Many people had only 8-bit color?which meant graphics would display in only 256 colors.
- More recently, the lowest common denomiator was 640×480 pixel resolution with a support for 16-bit color?which allowed for the display of thousands of colors (65,536 colors, to be exact).
- Current feedback is showing that the average reader is using an 800×600 screen setting, a relfection of the larger monitors and better video cards commonly in use. In addition True Color, which displays millions of colors, is increasingly common as well.
Even though monitors are getting better and bigger, never assume that your reader’s monitor will be as good as yours. Use the Control Panel/Display or Settings/Monitor controls to see how your image works at 256 colors and thousands of colors.
Be careful not to use an image map that is so large its options will be off most people’s default screen. Don’t use an image so large that its impact is lost because only a portion of it can appear in the reader’s window at a time. Don’t user graphical text so small it disappears in a large, high resolutions monitor or so large is looks overblown at 640×480.
Most importantly, understand what your audience is using and combine a liquid design with flexible graphics?and you’ll have page that really work for your readers.
See how your image looks at different color resolutions. Use your Control Panel/Display option on the Mac or your Settings/Monitor option on the PC to change your monitor’s setting.
Don’t assume a certain screen or browser window size?and avoid using big imagemaps or images that fill your notion of the full screen.
Beware of Cross Browser Differences
Different browsers and browser versions display pages differently.
A browser is the the program that displays display HTML and XML documents on the monitor. In theory, the browsers follow W3C standards. In reality, browser developers have worked independently of each other and implemented standard features as well as their own features, in somewhat inconsistent ways. And so we end up with browsers that don’t always display your page in quite the way you expected or intended.
Ideally a Web site you design should work in all browsers. In practice that would mean using the least common denominator of features and previewing it in every browser. Designers often want as many features as possible, which may mean designing a pages that don’t look the same in every browser or are creating multiple versions of a page to satisfy different browser needs.
In addition, the same browser might have some different feature implementations from dot to dot release, as well as from platform to platform release. For example, Navigator 4.0 on the PC and Navigator 4.0 on the Macintosh are not identical. And Navigator 4.5 and 4.51 are not exactly the same either.
Once again, the best way to handle browser to browser differences is to understand your audience and what they are using. Look at your own logs to gain some insight into how people are viewing your site. In addition, you might want to check out BrowserWatch, which tracks overall usage of different browser releases.
Browser Support for Graphic Formats
PNG is an up and coming format supported by newer browsers.
For straight graphics files, there is very little browser to browser variation.
Old?very old?browsers do not support JPEGs, but this is not a concern for most applications.
At the other end of the scale, the newest browsers support PNG. PNG is a very exciting format and as the 5.0 browsers begin to dominate the marketplace, expect more and more people to use PNG as the format for choice for line art and other graphics which are currently saved as GIFs.
Always test your pages in at least the two browsers that dominate the market, Microsoft Internet Explorer and Netscape Navigator.
Consider trying the PNG format if your readers are all using newer browsers.
Graphics as a Workaround for Incompatability
Consider using graphics-based solutions as a work-around for browser incompatability.
In most cases, browser differences impact page layout (especially tables and CSS) to a much greater extent than they effect the way graphics will appear. Because graphics are handled in a more consistent way than CSS styles, you may opt for a graphics-based solution rather than a CSS solution simply to provide a more standard appearance across all browsers.
For example, you could create a simple navigation panel using CSS font properties. This would create the smallest and most flexible file. But, if you have readers on older browsers or you are using properties that are unevenly implemented, you might want to create the panel as a graphic, which will appear the same on all browsers.
Tables and Browser (In)Compatability
Tables are a particular areas of potential cross-browser problems.
Because tables are implemented differently in different browser releases, you’ll want to be especially aware of your table code when you’re reassembling sliced graphics.
- Make sure that cellspacing, cellpadding, and border attributes are included and set to zero. If you exclude these attributes, different browsers will apply different default values and you may end up with thin spaces between segments, instead of a nice unifed, reassembled image.
- Make sure your code has no extra spaces or hard returns between it. Some versions of Navigator have a “feature” that turns extra white space and hard returns into space between cells.
Some browsers read the page aloud or display it in very enlarged pieces.
Some people view the Web with adaptive devices that read text aloud or that display pages at very large sizes. In addition, a text-only browser called Lynx is still in use by a small perecentage of people.
To account for these types of browsers, always be sure to include the alt text attribute in the image tag. The alt attribute should have a value that briefly describes the graphic. If you don’t want a description included, you should still use the alt attribute, but give it a null value, like this:
When a reader encounters an image, it will speak aloud the text in the alt tag. If you have a sliced graphic, you’d include readable alt text in one of the slices?”this is a photo of my dog Mack,” for example. And you’d have the alt text value be null in the other slices. This way the meaning is shared, but the poor user doen’t have to listen to a litany of “slice1,” “slice2” and so on.
Be sure to check out the W3C’s Accessiblity Checklist for other ways that simple tweaks to your design’s implementation can support accessability.
Sometimes a graphics-based solution is the easiest way to handle cross-broswer differences.
When slicing images, be aware that the browsers use different default values for tables, so always be sure to enter cellpadding and cellspacing attributes in the table that reassembles your image.
Always include the alt attribute in your image tag?either with a text value or a null value.