Rewarding vs. “This Is Broken”
Previously, we talked about adding rounded corners and alpha-transparent color using forward-thinking CSS3—neither of which work in Internet Explorer. Let’s compare the Tugboat template as viewed in Safari on the Mac (Figure 4.2) versus Internet Explorer 8 in Windows (Figure 4.3).
Layout, color, typography, and proportions between the two browsers are almost identical. However, where the corners are rounded in Safari, they’re square in Internet Explorer 8 (IE8). The semitransparent screen overlaying the photos in Safari is solid black in IE8. These details aren’t crucial to the design, readability, and functionality of the Tugboat site, so the variation is perfectly okay in this case.
We should treat these visual details as rewards for the browsers that support the advanced code that creates them, rather than something missing or broken in the browsers that don’t yet support that advanced code. That’s a big shift in thinking for a lot of folks: that the design isn’t broken in IE8... that we weren’t lazy in not visually aligning every possible browser. We’re visually rewarding users of browsers that are forward thinking, while allowing other browsers to degrade in a perfectly acceptable fashion. That’s the core of what I’m talking about when using the term progressive enrichment.