By Mat Marquis CHAPTER 5Progressive Enhancement
Responsive Web design is, in a sense, a natural extension of progressive
enhancement. Responsive Web design and progressive enhancement
both aim to ensure a usable experience for all users, regardless of their
browsing context. RWD is concerned more with providing users with
a natural-feeling layout and presentation for accessing content, and
progressive enhancement aims to ensure access to that content regardless
of a browser’s features and capabilities. We often see the two concepts
conflated — a rare bit of Web development confusion that ends up working
in everyone’s favor. To many, responsive Web design extends beyond
simply a flexible layout tailored by media queries, and includes such
concerns as the ever-fluctuating landscape of mobile browser features,
offline experiences, and network performance. These concerns are the
realm of progressive enhancement for sure, but it’s a blurring of lines that
I’m glad to see — the kind that only serves to highlight potential issues
that might inhibit users’ access to the sites we build, and keep those issues
at the front of our minds.
The foundation of progressive enhancement is to think in terms of an
element’s inherent meaning: what is the best way to express this widget in
markup alone? How can we represent the intention of an element in a way
that works for everyone, and then build up from there? At the core of every
jQuery Mobile widget is markup that’s meaningful regardless of JavaScript
or CSS. The range slider^5 , for example, is powered by a number input, which
degrades to a text input in browsers unfamiliar with the relatively new
number input. In JavaScript-capable environments, that input is enhanced
to a sliding control. Whether a user receives the enhanced or the basic
experience, they’ll be able to input their data. When you apply this principle
to an entire site, you build a site that makes sense — one that’s usable —
before layering your JavaScript enhancements over that.