experience matters

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+.

Enhanced Forms

In HTML5, forms get a bit more usable. For starters, we get a baker’s dozen of new input types: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url and week. iPhone users (other phone manufacturers will likely follow suit) get contextual keyboards when the new HTML5 input types are used:

Drag & Drop

Google recently added support for the new HTML5 Drag & Drop API in it’s Gmail. Simply put, users can now drag files right off their desktop into Gmail. It’s subtle, yet awesome.

Geolocation

Imagine visiting your favorite retailer’s store locator and it already knows your location, making suggestions of stores near your current location? This is one of the many applications of the new Geolocation API available in HTML5. Many mobile platforms already support this method with many more desktop browsers to follow.

Conclusion

The above examples aren’t the only new technologies available to us today. For a complete list, just ask your local web developer over a cup of coffee (or even better, a beer).

Just remember: browsers are different, their capabilities are different, and we should be utilizing them instead of crippling our creations because of older platforms. Let’s move the web forward.

Ben is a Senior Developer in our Chicago office.