Ben Truyman | Critical Mass Chicago
In this post, I’d like to outline a handful of techniques and technologies we as creators for the web can employ today. Although some of these methods are only available in more modern browsers, I hope to explain how we can still maintain support and offer alternative solutions for older browsers.
A Bit of History
Back in 1997, I had just began dipping my feet into web development — more specifically HTML. Later that year, a new version of the HTML specification was to be released, known as “HTML 4.0”. Three U.S. Presidents, a dot-com bust and a housing bubble later we find ourselves still writing the same old HTML, now “HTML 4.01”. CSS shared a very similar story. Technicalities aside, my point is simply this: HTML and CSS have not seen a new major release of their specifications in several years.
The Future Is Now
You may have heard that there are two new kids on the block: HTML5 and CSS3. Although both of these specifications haven’t been finalized, modern browsers are beginning to implement features of HTML5 and CSS3. Of course, older browsers don’t have most of these features, but that’s okay.
Think about this for a moment: we’re still supporting and trying to create “pixel perfect” designs for Internet Explorer 6, a browser shipped with Microsoft’s nine year old operating system Windows XP. Let me say that again, we’re still designing websites that are meant to look exactly the same in modern browsers like Mozilla Firefox and Google Chrome but also a browser that is almost a decade old. Sad, but true.
Here’s where I propose we ditch that old idea and start using something I call “pixel imperfect” designs by using a well known strategy called Progressive Enhancement. Essentially, one design does not fit all browsers anymore. We need to accept the fact that browsers ARE different and they each offer their users different capabilities. We’ll need to start creating variants of our designs to show the potential experience in both modern and legacy browsers. What’s great about using Progressive Enhancement is that we can design our solutions in a way that less capable browsers still receive a great experience because we’re simply “layering” on new features that more capable browsers will utilize when they’re supported.
Implementations
Font Embedding
Arguably one of the most (if not THE most) important additions to CSS3 is the official support for embedding fonts. No longer are we stuck with having to cut images or use Flash when we want to use fonts not considered “web-safe”. We can use whatever fonts we want as long as the seller of the font permits web embedding. Several font providers like Typekit and FontShop are already providing solutions for embedding fonts on the web.

No more opening up Photoshop to do minor copy tweaks, or re-cut all of a site’s images containing copy when we want to translate it to another language, or using slow Flash solutions unsupported by most mobile platforms.
The best part about CSS3 font embedding: it’s supported in virtually all browsers used today! That includes Internet Explorer 4+, Firefox 3.5+, Opera 10+, Safari 3.1+, and Chrome 4+.
What Else? Do I see Drag ‘n Drop?! Read On