Tiered, Adaptive, Front-end Experiences: Or Another Great Idea from Paul Irish

We developers at Cantina collectively have tremendous respect for Paul Irish and his efforts to pull the web forward with the emerging standards related to HTML5 and his work with some of the leading tools to help developers embrace HTML5.  When I saw his most recent blog post come across the Twitter wire…

http://paulirish.com/2011/tiered-adaptive-front-end-experiences/

…I could only say one thing: “Hells yea!”

The alternate title for his post, namely “the site must look the same across all browsers”, has become a mantra for stakeholders looking to have that pristinely consistent experience across all browsers, even Internet Explorer 6, for those stuck in an organization that has been trapped by that browser.  As such, front-end developers over the years have developed a rich, and in many cases ugly, set of tools for dealing with this sometimes insurmountable request.  Here are some choice examples:

• Browser CSS hacks – exploiting bugs in selector specification isn’t exactly a way forward in 21st century web development
• Flash Satay – this is an A List Apart posting from 2002 showing the horror of trying to embed Flash in a cross browser manner, and yet it’s still relevant today?  How did we never standardize on such a tag?
• Conditional Comments – this is a venerable and relatively clean approach to targeting specific versions of Internet Explorer, but now support for this is being removed in IE 10.  Thankfully feature detection is becoming the proper way to manage capabilities in IE 10 and beyond (better late than never).

These tools, however crafty and effective, come at a cost.  Even with proper use of conditional comments, such as Paul’s approach recommended here, one must still decide on how they will implement their front-end for browser support.  Our typical approach is to build out our markup, CSS, and scripts for the common case that addresses most “modern browsers”, which include recent versions of Firefox, Safari, and Google Chrome.  Given that the similarities vastly outweighs the differences between these browsers we can reap the rewards that following standards yields and have a site that works at a nearly pixel perfect similarity between these browsers.

Then the fun is over.

We turn our attention to how our beautifully crafted, standards-driven site looks in Internet Explorer 7, and we’re in for a few late nights writing browser-specific CSS to get the family of Internet Explorers looking more like how Firefox renders the page.  In some cases, through reasonableness, we can achieve some compromise: abandon rounded corners in IE6 – 8, accept some loss of styling in IE6, etc.  However, when a mandate is given that these compromises are not allowed, we must look to the cost of restyling, and in some cases reimplementing, features for finicky browsers.  Depending on the project, these costs can be significant and yet yield little return in the end product.

Given Cantina’s expertise with responsive and adaptive design, and the importance of these methodologies in development mobile-optimized sites and web-based mobile applications, it is worth looking at whether we can apply the principles of graceful degradation and favoring targeted, high-performance code to provide the best possible user experience for desktop users as well, even if it isn’t a consistent one.  After all, Internet Explorer users are people too.