Browser layer
Front-end stack
The browser wars are over, long live the browser! Yes, browsers are responsible for rendering your website faithfully to your design, but just because each of the major browsers adhere to W3C and IETF standards doesn't mean that there aren't subtle differences in interpretation—differences that can make your web pages look dramatically different from one browser to the next.
When designing your next website, make sure you test every page against each of the most-used browser layout engines—Trident, Gecko, WebKit, and Presto—and pay particular attention to the very large differences in DOM/JavaScript implementations.
| Browser | Layout Engine | Availability | Penetration |
|---|---|---|---|
| Internet Explorer | Trident | Windows | 65.5% |
| Firefox | Gecko | Windows, Mac, Linux | 25.5% |
| Safari | WebKit | Mac, Windows | 3.0% |
| Chrome | WebKit | Windows | 2.5% |
| Opera | Presto | Windows, Mac, Linux | 1.5% |
| Camino | Gecko | Mac | * |
| OmniWeb | WebKit | Mac | * |
| iCab | WebKit | Mac | * |
| Konqueror | WebKit | Linux KDE | * |
| Galeon | Gecko | Linux GNOME | * |
| Epiphany | Gecko | Linux GNOME | * |
| K-Meleon | Gecko | Windows | * |
| Dillo | FLTK2 | Linux | * |
| NetSurf | NetSurf | RISC OS, Linux, BeOS, Haiku, Amiga | * |
| Amaya | W3C testbed | Linux, Windows, Mac, Amiga | * |
| Lynx | Lynx | (text only) | * |
* All of these together have a market penetration of about 2.0%
Operating system, hardware, personal settings
On top of the minor browser implementation differences, there are significant differences in computer operating systems, computer hardware, and personal user settings. These differences are often overlooked by test routines that assume everyone is running on a similar platform with state-of-the-art hardware. Consider this:
Browser Penetration
- There are three major operating systems in use—Windows, Mac, and Linux, each with their own look and feel for buttons, decorations, and styling.
- At any one time, there are multiple versions of each operating system deployed and in use, each with its own set of installed type faces.
- There are a wide variety of screen monitor capabilities with laptops and PCs having resolutions anywhere from 1024 x 768 to all the way to 1920 x 1200 (and even a few 800 x 600 monitors still in use that keep decision makers scratching their heads.)
- Most monitors run at 72dpi, but some are set by the user to 96dpi, and a few are set to 120dpi.
- There are strong differences in each monitor's contrast and brightness settings—as well as poor color correction profiles—which can make your perfectly designed color palette look just plain dreadful.
- Some users intentionally turn off JavaScript. Does your website properly recognize these users and provide alternatives?
- Many computers don't have extensions like Flash or Java installed. Does your use of these provide optional functionality to your website, or are they so central to the site that you've effectively barred these users from getting past your home page?
- Many websites are beginning to design specifically for the mobile phone. Can you afford to miss this important new type of visitor?
On the front-end, the browser layer is where some of the toughest programming challenges occur. Test, test, and test again. Make sure your design is rendered faithfully and that your visitors are seeing what you intended.