Chapter 8. Progressive enhancement and obsolescence control with Modernizr
This chapter covers
- Introducing responsive experiences
- Introducing progressive enhancement
- Diving deeper with Modernizr
- Using Modernizr to progressively enhance an element
So far we’ve talked about developing a website by starting with prototypes, then moving on to style tiles and content, and finally building the site. The final part of building a responsive site is to use a technique called progressive enhancement, enhancing a simple site into one that’s more technologically advanced.
The introduction of touch interfaces and small screen devices has been interesting, and they can be fun to design and develop for, but that’s merely the tip of the responsive iceberg. Although many users have access to the most modern mobile phones and tablets, building a responsive website also means supporting older, less capable hardware and making content accessible to sight-impaired users.
To achieve this, you first need a workflow that enables you to tend to the needs of all your users. We’ve talked about designing and developing for mobile first and building up from there, but let’s take that further. What if instead of throwing HTML, JavaScript, and CSS at a browser until you get what you want, you build from a basic foundational site and work your way up? Let’s see what happens.