Sunday, January 6, 2013

The peanut M&M that is progressive enhancement

The past year (2012), I have been living under a rock. I did not know that the concept of Progressive Enhancement has taken the web design world by storm (it was listed as #1 in Top Web Design Trends for 2012 by .net magazine).

This is because I still work, develop for a world of pre-iPhone, pre-Android mobile devices, where graceful degradation still holds the norm. That is, JavaScript reins. We generally only concern ourselves with working with the latest browsers (we do not worry about browsers on mobile devices).

That made me a hermit, a frog dwelling in a well who can only see the one square of sky that is directly above him.

Mobile devices (phones, tablets, in ever changing sizes and resolutions) now rule. Mobile apps in native code rule. This puts even HTML 5 (the new crown jewel of web development) on the defensive. Remember the tremor you had when Mark Zuckerburg said one of biggest strategic error made by Facebook was focusing on the development of HTML5 Web applications instead of native apps for devices? That is about as much a blow to Flash as when Steve Jobs declared that Flash is dead.

To which, the web folks rally around a new web design strategy: Progressive Enhancement.

Though progressive enhancement is not exactly new, and it has come to focus in 2003, after the presentation "Inclusive Web Design for the Future", and after which the term Progressive Enhancement came into life.

What is progressive enhancement? What is graceful degradation? What is the big deal?

Well, they may or may not look that much different, depending how you look at it.

Graceful degradation means we assume the more advanced systems and browsers, take for granted that the target frameworks are equipped with all necessary technologies, then design and implement applications accordingly.

Progressive enhancement goes the other way. It starts with core functionality and content that must deliver to all browsers and frameworks, then automatically detects the more advanced features in its hosting environment and make available those more advanced functionality.

Progressive enhancement is like provide a free version to all users, then gradually argument some cool features depending on how much you pay; while graceful degradation only provides the most advanced version, and to the less fortunate, it says: good luck! Upgrade your system!

Only now the less unfortunate web browsers in a large part are those in mobiles. Only no one can ignore mobiles!

Graceful degradation would have worked perfectly if the myriad of iPhones and androids have not invaded and hijacked the course of web development.

That is Only if ...

The article "Understanding Progressive Enhancement" has very intuitive analogy of progressive enhancement. Borrow/steal here (including image and explanation).

So your web is like a peanut M&M.

Start with your content peanut, marked up in rich, semantic (X)HTML. Coat that content with a layer of rich, creamy CSS. Finally, add JavaScript as the hard candy shell to make a wonderfully tasty treat (and keep it from melting in your hands). 

Content/The peanut

Start with the core, the peanut. Make it available to every level of users. Because some users/devices detest or cannot afford any unnecessary trappings. For example, mobile devices. Search engine spiders.

Styles/The chocolate coating.

Progressively, responsively apply style for folks who like and can tolerate embellishment / beautification of the application. For example, folks who are paranoid about JavaScript.

JavaScript/THE hard candy shell

Lastly, put in the JavaScript that made interaction and all the fancies possible. ...

Hopefully I will have a little more time to explore progressive enhancement later.

References:
http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/
http://www.alistapart.com/articles/understandingprogressiveenhancement/

1 comment :