CHAPTER 5 Robust, Responsible, Responsive Web Design
We settled on the idea of serving two different levels of enhancement
— sort of an experience breakpoint — after determining whether a browser
is capable of handling complex layouts and enhanced functionality, or
whether it’s somewhere closer to a feature phone. As daunting as that may
sound, this process turned out to be simpler than you might think. The
first step is to split up our style sheet.
The initial style sheet is a feature phone-caliber set of styles: font sizes,
block versus inline elements, a couple of solid-color backgrounds. This
style sheet gets delivered to every user. Since it’s served to everyone, we’ve
recently started using the Normalize CSS reset^7 as the basis for our initial
style sheet. Rather than acting as a reset that zeroes out browser default
styles, it provides a sensible normalized set of defaults: useful to bundle
up our enhanced styles for qualified users, while serving as a reasonable
baseline for our basic styles.
The enhanced style sheet is pretty much everything else — advanced
layouts, animations, Web fonts, and so on — minified and gzipped, of
course.
What we end up with are two very different looking experiences,
granted, but not different core experiences. We’re not simply hiding
anything, even from basic users. No one is left out in the cold. A user on an
older or underpowered device will be provided with a far more usable view
of the site. For that matter, they likely aren’t expecting much in the way of
bells and whistles in the first place: the age-old question “Does my website
have to look the same in every browser?” writ large.
In the original version of Filament Group’s Enhance.js^8 and early
versions of jQuery Mobile, we used a series of largely unrelated feature
tests to determine whether a device qualified for the basic or enhanced
experience. We would set the result of these tests in a cookie, and use that
variable to deliver assets throughout the user’s time on the site.7 http://necolas.github.io/normalize.css/
8 https://github.com/filamentgroup/EnhanceJS