The beauty of the World Wide Web is that it reaches a staggering number of people. It has become increasingly important, touching all aspects of our lives. When you design most Web sites, you want to reach a healthy chunk of the potential viewers. Yet sites developed on Macs can look staggeringly ugly on other platforms if designers don’t watch out for differences in the way the systems treat the information. Because Microsoft Windows is the most prevalent platform on the Web, tweaking your site so it looks as good on Windows monitors as it does on your trusty Mac is essential to maintaining a wide audience.
Even on one platform, there are significant differences between the two main Web browsers, Microsoft Internet Explorer and Netscape Navigator. For tips on dealing with these variations, see “Zap Common Browser Bugs” in the April 2000 issue and on Macworld.com at http://www.macworld.com/2000/04/create/browserbugs.html.
Just Your TypeMac users often come across sites with tiny type. We squint; we swear; and then if we’re interested enough, we go to our browser’s preferences option to increase font size. Most likely, the designers of these headache-inducing sites are unaware of the resolution difference between Macs and PCs.
The Mac OS defaults to 72 pixels per inch (ppi), where a pixel is the same as a point. So 12-point type is 12 pixels tall, 72-point type is 72 pixels (or 1 inch) tall, and so on. Windows users start off with 96-ppi resolution, and 12-point type in Windows is 16 pixels tall.
This difference means that in 4.0 (and earlier) browsers, what looks discreet on a Windows box is often illegibly small on a Mac. Conversely, type that’s readable on a Mac is horsey on a Windows PC. In the Mac version of Internet Explorer 5 (IE5) this is no longer an issue, because its default setting is 16-pixel type at 96 ppi. Netscape has followed a similar path in its new version of Navigator. This not only solves your problem as a Web user, it also helps you as a Web-site designer. By checking your work in IE5 for the Mac and Netscape Navigator 6, you’ll get a much better idea of how your type will look on the Windows platform.
PIXEL-BASED STYLE SHEET
However, 4.0 browsers are still in use, so cross-platform size issues will continue to plague the Web. There are only two ways to avoid these problems.
The Zen Approach Avoid setting sizes altogether, and specify font families in your Cascading Style Sheets (CSS). For more information on CSS, visit https://www.w3.org/style/css/ or read the “Fear of Style Sheets” tutorial at https://www.alistapart.com/stories/fear. See the sidebar “Cascading Style Sheet” for a breakdown of CSS basics.
CASCADING STYLE SHEET
Specifying font families ensures that your body text appears at a size each visitor will find comfortable. Most designers hate this idea because we’re used to the absolute control we’ve enjoyed in print. But it’s the most compatible and foolproof approach.
The Pixel-Perfect Approach Sometimes you absolutely must control font sizes. In these cases, you need to specify pixels in your Style Sheet. (See the sidebar “Pixel-Based Style Sheet.”) Pixels are pixels regardless of screen resolution, platform, browser choice, or browser version. This technique doesn’t display properly in Netscape Navigator 3 or earlier, but the tiny percentage of your audience still using that browser will see their default font, and that’s OK.
If the Site Fits . . .You finish your site’s master template, sigh with satisfaction, and inform your Windows- using client that the layout is ready for final approval. Minutes later, you get an angry phone call: “I have to scroll down to see the company slogan!”
What happened? The Windows task bar appears by default at the bottom of the screen, while Mac OS reserves the right side of the screen for icons representing your hard drive, saved files, and aliases. Your client sized his browser window so he can see crucial areas of his desktop, which means his browser window wasn’t as deep as yours.
Similar glitches crop up when you design only for your monitor size. With a rigid Web layout, your site may appear to be shoved into the corner of a visitor’s large monitor. Or it may be too wide for small monitors, forcing visitors to scroll left and right (or, more likely, encouraging them to leave).
Because of small monitors and browser chrome (the buttons and text fields used to navigate the Web), some visitors will have a usable area of less than 600 by 400 pixels. But if you design specifically for that space, your site may look ludicrous on a larger monitor at 1,600 by 1,200 pixels.
The answer is to embrace the fluid nature of the Web so that content reflows according to visitors’ operating systems and window sizes. The sidebar “Liquid Liquid” is a guide to making your site go with the flow.
The liquid approach handles the horizontal problem, but what about the vertical? If you don’t want visitors to have to scroll down to see important content (such as navigation tools, logos, and headlines), place it within the first 380 pixels of vertical space.
Gamma, Gamma, Hey!Different platforms have different standard gamma settings. Put simply, your Mac’s default gamma of 1.8 looks brighter than the various Windows defaults. Ignore this difference, and your subtle earth tones will look like mud.
Cross-platform gamma compensation is built into Adobe Photoshop 5.5 (which includes the Web image editor ImageReady 2.0) and Fireworks 2.0.
If you don’t have these programs, two low-cost shareware apps and the following steps can help.
One app is GammaToggle. You can download the $5 shareware control panel GammaToggle FKEY from https://www.acts.org/roland/thanks/. Once you install it, you can press command-shift-9 to toggle between Mac and PC gamma settings.
If you have older versions of Photoshop, you may want to use Furbo Filters. You can download the $39 shareware Furbo Filters Webmaster pack from www.furbo-filters.com. (Disclosure: I helped create this application.) Install it, and you can switch between Mac and PC gamma in Photoshop by choosing Filters: https://WWW.Furbo-filters.com/: Browser Preview.
To permanently set Photoshop 5.0 and later to the Windows gamma space (not recommended if you also design for print), take the following steps:
1. Start Photoshop.
2. Select File: Color Settings, and choose RGB Setup.
3. In the dialog box that appears, set the RGB drop-down menu to sRGB.
4. Go to Control Panels, and choose ColorSync.
5. In the System Profile drop-down menu, choose sRGB Profile.
 | Color My WebOnly 216 colors are guaranteed to display correctly in both Windows and Mac Web browsers. These “Web-safe” colors are called the Netscape Color Cube or the Web-safe palette. Use Web-safe colors whenever possible, particularly for large color fields, typography, and backgrounds. Any other color will dither (break into dots) on an 8-bit monitor, or shift (change to a color you didn’t intend) on a 16-bit system. See “Ugly Colors” for examples of dither and shift. Fireworks and Photoshop 5.0 and later include the Web-safe palette; if your image editor doesn’t, download it from https://www.lynda.com/hex.html . To prevent dominant colors from shifting when saving images as GIF files, work in 32-bit or 8-bit mode. Beauty in the BeastPlatform differences are a fact of life. The rise of Linux, the coming of Mac OS X, and the dispersion of the Web onto cell phones, Palm devices, and automotive tracking systems are enough to keep the savviest Web designer dancing. But with the right strategy, you can accommodate these differences and make pages that are accessible to millions. And that’s the real beauty of Web design. |
Jeffrey Zeldman is a Web designer ( https://www.zeldman.com ) and the editor of A List Apart, a site for people who make Web sites ( https://www.alistapart.com ).
Page 70 September 2000 www.macworld.com