Browse DevX
Sign up for e-mail newsletters from DevX


Cross Browser and Cross Platform Issues

Different computers display graphics differently—understand these variations and design for them.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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:

  1. Set your computer's desktop pattern to a light gray so it doesn't affect color perception.
  2. 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.

Thanks for your registration, follow us on our social networks to keep up-to-date