A Smart and Pretty Web

There is a concept that has grown in popularity in the web community for a few years now that goes something like this:

A website should be accessible to the folks with the least capable technology and improve in quality for those with the most capable.

This idea is commonly called “progressive enhancement,” and here’s why it matters. As a web developer, there are major barriers to contend with in creating a unified website experience.

1. Multiple platforms/versions: Windows (XP, Vista, 7), Mac (Tiger, Leopard, Snow Leopard), Linux, etc.
2. Multiple browsers/versions: Internet Explorer (6,7,8), Firefox, Safari, Chrome, Opera, etc.
3. Varying screen sizes and resolutons
4. Mobile users with varying platforms, browsers and screen sizes

With this list only expanding over time, gone are the days where web designers naively expect to create a single, unified website experience. But this is where progressive enhancement steps in.

Instead of struggling to create an identical experience across all platforms/browsers, progressive enhancement calls for a focus on delivering the same content properly to each technology. Here’s a concrete example: I wanted to create a new login box that slides out of the edge of the browser when needed and that slides back in when not being used (see the related images or better yet, view the finished product here). This kind of animation calls for javascript (jQuery in this case), but don’t worry, I’m not going to focus on the technical aspects. My point here is that statistics tell us that javascript, while extremely popular, is only installed on about 90%-95% of users’ browsers. Why does this matter? Put bluntly, if you run an e-commerce (or really any) site, this means you could potentially be losing 5%-10% of your profits. (At the very least, you could be annoying 5%-10% of your users, who will quickly go elsewhere for a better experience.) So how did I account for these users in the design of the login box above? It’s very simple! In the absence of javascript - the slider button simply defaults to a link, which when clicked sends the user to a separate login page. It’s not as “slick” as the slider, but it is the normal, expected experience for a user not using javascript. This is how two very different users can come to have an enjoyable website experience regardless of the technology they use to access it.

As you can see, progressive enhancement is ideally what makes a web experience enjoyable for everyone, even including those suffering disabilities using screen readers to others using old cell phones with simple text browsers all the way to those using iPhones and the latest version of Safari/Firefox/Chrome on their Mac/PC. Instead of creating a single, unified experience for all of these users which will either break for the former or be lackluster for the latter, this approach can deliver the best experience to all users, regardless of platform/browser. Although it often takes a little more thought and effort on the part of the developer, this approach not only creates a better user experience (which is in the best interest of everyone) - it is simply the responsible way to design websites. Are we as web designers/developers perfect when it comes to this? Of course not.  But that is why this focus is so important - it guides us in the right direction. So, here’s to a better web!