| Compatibility is perhaps the most vexing problem faced by web developers. Users have different computers, different browsers (and different versions of the same browser), different monitors, different color capabilities, and different connection speeds. All these factors affect the site its speed, its functionality, and especially its appearance. The good news is that the differences are less pronounced than they once were. There are fewer browsers in use, and they're more similar than they once were. Monitors have improved in both color capacity and screen resolution, and fewer and fewer people are on truly slow connections. That said, you still need to think about compatibility: "It's an issue," says designer Nadav Savio. "It's still a terrible issue." Compatibility problems arise from Platform Browser Plug-ins Monitor Color capability
platform People use the web on just about every computer (and every operating system) ever made, including Windows, Mac, Unix, and the odd NeXT box. This affects both the functionality (certain programs especially Java or JavaScript-based may not work cross-platform) and the appearance (colors and fonts may vary). browser Users view the web through many different versions of many different web browsers. Not to mention cell phones and braille browsers for the blind. This may affect the site's appearance, as different browsers support different design features. Inconsistent support for stylesheets is the biggest problem today; it varies even between different builds of the same browser. plug-ins Not everyone has plug-in technologies, like Flash, installed properly. So if your site uses plug-ins, not everyone will be able to see it. Because of installation problems, it's hard to estimate how many people you're excluding. (See understanding flash, p. 166.) monitor People use monitors of different sizes and resolutions, and this dictates how much space you get on their screen. See where's the fold?, p. 91. color capability There are slight differences in color on different platforms. And older computer systems don't display the full range of colors See color on the web, p. 146. planning for compatibility If you want your site to be compatible with different systems, you should start thinking about it before you start the development process. Although it may seem counter-intuitive, the best way to approach compatibility is to choose a single browser/platform for which you're designing, (these days, it's usually Internet Explorer 6.0 or 5.5 for Windows) and then adapt your work. Identify your audience. Before deciding which browsers and platforms you'll support, find out which are most popular among your users. This information is stored in your site's log files, which you can access using traffic-analysis software. (See measuring traffic, p. 245.) Develop toward a single browser. After examining the make-up of your audience, choose a single platform/browser combination to develop toward. Research the differences. Make sure you're aware of the differences separating your target browser and the rest of the web world. Sometimes, small changes in approach make the difference between your site working for many browsers or only one. "Degrade gracefully." Your pages should be designed and built to "degrade gracefully." This means they still function and display reasonably in earlier browsers. Create a secondary design. Sometimes your primary design just won't translate to other browsers or platforms. In this case, you'll probably want to create a secondary design for other browsers. But it's best to limit yourself to these two: One design for the target browser; one for everyone else. Test! Test! Test! No matter how well you've researched browser and platform differences, you'll always be surprised and probably frustrated by what testing reveals.
Check your compatibility NetMechanic http://www.netmechanic.com
compatibility testing No matter how much you research and plan, you can never anticipate all the problems that might arise when your site is used on different browsers and platforms. So creating a site that displays acceptably and performs reliably across all these systems remains at least a full-time job, if not a lifelong obsession. The most important thing to remember is that browsers don't work exactly as they should. Each version introduces new bugs along with new features. You have to keep testing to keep up. Ready to set up your own compatibility testing station? The site A List Apart has a great tutorial: http://www.alistapart.com/stories/xplatform. an industry snapshot People access the web using a wide range of computers, browsers, and monitors (to say nothing of web-compliant cell phones). But the popularity of different systems is always shifting. Here's an industry snapshot, as of January 2003:  Platform  91% Windows
 4% Mac
 1% Linux
 4% Other
Source: Google Zeitgeist.  Browser 52% Internet Explorer 6.x 39% Internet Explorer 5.x 1% Netscape Navigator 4.x 1% Netscape Navigator 5.x 1% Internet Explorer 4.x 6% Other Source: TheCounter.com.  Monitor resolution 46% 800 x 600 40% 1024 x 768 4% 1280 x 1024 3% 1152 x 864 2% 640 x 480 Source: TheCounter.com.  Colors 43% 32-bit (millions of colors) 43% 16-bit (65,000 colors) 9% 24-bit (16 million colors) 3% 8-bit (256 colors) Source: TheCounter.com. For updated industry statistics, try The Counter: http://www.TheCounter.com/stats Google: http://www.google.com/press/zeitgeist |
Set up a testing station A List Apart tutorial http://www.alistapart.com/stories/xplatform
action section: how will you make your site compatible? An essential issue in site building is ensuring your site can be seen by everyone or at least everyone that matters to you. First, figure out what systems your visitors use. Then decide which to focus on. what setup will you design for? What browser will you develop for?  Internet Explorer
| version ______ | Mac | PC | Netscape Navigator | version ______ | Mac | PC | Other ___________ | version ______ | Mac | PC |
What size browser window will you design for? (In other words, "Where's the fold?") 640 x 480 | 800 x 600 | 1024 x 768 | Other ____________________ | What? |
How many colors will you use? 256 I'll restrict myself to the "browser-safe" palette. Millions I'll use any colors I want, since most of my users can handle it. what set-ups will you test? Outside of your target, what other browsers/platforms/monitors will you test? __________________________________________ __________________________________________ __________________________________________ what do your visitors use? Using traffic-analysis software, determine what kinds of systems are used to access your site. If you can't access this information, use industry statistics for an estimate. Platform  ____ % Windows ____ % Mac ____ % Unix ____ % Other Browser ____ % Internet Explorer 6+ ____ % Internet Explorer 5+ ____ % Internet Explorer 4+ ____ % Netscape Navigator 6+ ____ % Netscape Navigator 5+ ____ % Netscape Navigator 4+ ____ % Opera ____ % Other Monitor resolution ____ % 800 x 600 ____ % 640 x 480 Colors ____ % Millions of colors (24-bit color) ____ % 256 colors (8-bit color) |
|
