zach.holmquist.me

Progressive Enhancement : The Future of Web Design ♆

Any ( good ) Web Developer is always thinking towards the future, and where the current of the Internet is heading. I have seen a couple web developers who have gotten stuck in their ways and quickly became obsolete in an industry that is always in flux.

The Web Dev community is just beginning to get a taste of the future of development with HTML5 and CSS3, and with any new technology, there comes a barrage of opinions and questions. Do I use HTML5? What are the benefits? What about IE6? etc.

What I find emerging is a paradigm shift in how we handle designs between modern browsers and broken browsers ( anything starting with IE ). That shift is: Graceful Degradation vs Progressive Enhancement.

For the last decade and more we have all played the Graceful Degradation game. The theory is: a website should look the same in every browser, no matter what browser it is. So if your design is beautiful in Safari4, it should look identical and just as beautiful in IE6. We developers figure out ways to let the experience degrade as graceful as possible, so that IE6 can share the joys of a beautiful web design that a proper browser users enjoy. What ends up happening is a developer spends countless hours on end working out every little quirk and bug. Ask any web developer what they hate the most about their job and they will all respond how much they loathe catering to any Internet Explorer.

But - interestingly - this raises a simple question . . . Why? Why do web developers spend hours and hours trying to get margins to position properly in IE? Why do we spend so much time making sure every little line appears the same in every browser?

Why?

Because the fact is - if a user is using IE6 . . .they are used to a sub-par web experience. They probably could care less about your awesome font selection, and that opaque overlay you added. Do little details like drop shadows really make a change in Bounce Rate? And to much of our frustration, no matter how long a list of reasons you have for them to switch ( or atleast upgrade ) browsers . . . they probably don't get it . . . so why should we expect a user to "get it"? After all we are Web Designers ( keyword Designers ). . . not Browser Evangelists.

Note: I am sure you disagree with the last sentence. But as Google showed, most people don't even know the difference between a Search Engine and a Browser!

Note Note: Good friend and Developer Rich made a fair point in discussing this topic: "IE6 is dangerous. By letting users use IE6 we are letting them get hacked. We are allowing worms to spread." To which I retort, I am a Web Designer not an AntiVirus developer - I can only hope their machine get destroyed so they are *forced* to buy a modern system with a modern browser.

Which leads us to what I believe is in store for the next decade: Progressive Enhancement. Fact is, IE6 is still with us . . . Microsoft is already working on IE9 and for whatever reason they cannot get people to upgrade to the latest and greatest. So rather than coding for everything to look *exactly* the same, why don't developers start with the worst and progressively add enhancements.

Arial looks just fine in IE6, and the user most likely doesn't know better and probably doesn't care. Helvetica Neue looks great on Macs, and is a System Font, so why not enhance the experience for them by using it. And finally, for the cutting edge browser user - why don't you try out the new CSS3 @font-face property? Each step up our design gets better and better - we start at the bottom and go up.

As it turns out, we have been using Progressive Enhancement the whole time with the CSS font-family property. If the user doesn't have X font, then use X font, and if they don't have X font, etc. Below is an example of Progressive Enhancement:

Why don't we apply this same concept site-wide? It is easier to enhance a site then work diligently on a design so it looks great in IE6 ( for a user who could care less )!

But with any paradigm shift, there is always the struggle to change and shift to the new thought. But maybe if you turn your past beliefs in a different light, you see the opportunity that lies before you. Has IE6 really been the problem, or is it a web developers want of Graceful Degradation the real issue? Or maybe the reason IE6 users don't upgrade is because developers cater to them and the web is still beautiful - so truly what does an upgrade offer in their eyes?

Web Development Hidden Gem: Google Analytics Event Tracking ♆

Google Analytics is a powerful tool in a Web Developers toolbox, but there are some incredible features that I don't think get enough coverage. One of them being, Event Tracking.

Event Tracking can really help open up some hidden information about what your users are doing. All it takes is having Google Analytics installed on the page and tying a click event to a the Analytics pageTracker._trackEvent function and passing three pieces of data: category, action, label.

Category is the broadest description of the event, I usually go with the page where the event is taking place : "Landing Page", "Purchase Page", "Product Page", etc. Action is self explanatory, things such as: "Buy Button Clicked", "Apply Now Button - Top", "Apply Now Button - Bottom", etc. Finally, Label is optional, if I am tracking different buttons, I like to use different feature : "Blue Button", "Green Button". I have also passed in the domain the event took place on.

As far as using Event Tracking goes - the possibilities are endless! I like to use it heavily in web apps that don't click through and you cannot see the hits in Analytics. Some examples I have used are: Does this button or that button get more clicks, which fields throw validation errors most often, did user click a download button, did user play the video/did they pause the video, how often is the remove button clicked in a cart.

CODE

ACCESSING THE EVENT TRACKING DATA

view larger

Web Trend : Tab Triggers ♆

I was recently wandering around the web, and stumbled upon on what seems to be an emerging trend - "Tab Triggers". In a nutshell, a page contains a trigger object that when clicked it reveals more content to the page viewer.

The effect is fairly simple to create with jQuery, and it provides a nice way to stash some extra information on your page that may ( or may not ) be valuable to your visitor.

Below is a simple example of how to build Tab Triggers in HTML and JS:

DEMO

CODE

EXAMPLES

view larger

view larger

view larger

Google Speed Tracer ♆

It is officially a Google Week! Google released an extension for Chrome called Speed Tracer, which enables developers to profile the internals of the browser, preventing bottlenecks by enabling diagnosis of hidden problems. Speed Tracer appears to profile web apps automatically, where existing tools like Safari Profiler requires commands to be hardcoded.

Unfortunately if you are on a Mac - Chrome Extensions are not quite available yet.

DubFX : BeatBoxing + Mixer = Gnarly Music ♆

Awesome link feeder and coworker Dave sent me this incredible video of Australian artist Ben Stanford aka DubFX making some awesome music with his voice and a mixer! I might have to track down some more of his music!