Most people think Responsive Web Design, and they think, “hey, that’s that tech everyone uses to make sure that their websites scale to the screen size properly!” The truth is, there’s a lot more to responsive design. Among other things, responsive design’s ‘media queries’ can:
- Tell you what browser the surfer is using.
- Tell you what kind of device the browser is using.
- Whether a device is being used in Portrait or Landscape mode.
- And a whole lot more.
The number of bits used in each color (i.e. is this an 8-bit, 16-bit, etc.)
And why is all of this important? Well, just on that first point above, there are differences in how HTML/CSS commands are processed in each browser, so an ept web designer can use media queries to figure out how to make a website look correct in every browser by showing each browser only what it ‘understands’.
Of course, there’s a problem in that logic — browsers are constantly releasing new versions that understand things slightly differently than they used to. Simply writing a site and asking ‘what browser are you’ via media query is only going to work in the short-term, because eventually, your assumptions about what each browser can do will be wrong. (There’s also many easy ways for a clever user to get his browser to misidentify.)
Enter Modernizr
Modernizr is a JavaScript library built with the explicit purpose of doing away with those assumptions by rapidly and thoroughly querying an incoming device’s capacities. It used to be that web pages would simply ask each incoming request for it’s ‘user agent string’ (i.e. which browser it identified itself as.) But as mentioned, that doesn’t tell the webpage what the device is capable of; it just allows you to base assumptions on the answer.
Modernizr, on the other hand, allows you to test every browser’s capacities directly. For example, rather than showing SVG graphics only to those specific browsers that you know support it, Modernizr will ask every browser ‘do you support SVG?’. Then you can show the SVG graphic to every relevant browser and an alternative to any browser that doesn’t SVG well.
As each page loads in a surfer’s browser, Modernizr runs a suits of fast media queries, checking whether or not the browser supports a long list of features. It doesn’t provide you any support for the features themselves — you still have to provide that — but it tells you what a browser will understand and what it won’t.
What that means is that, with Modernizr, there’s no guessing about what browser or device can handle what — it tells you precisely what media types the surfer will and won’t see, and attaches all of the appropriate classes to the HTML tag so that your webpage (which has naturally been coded to take advantage) will display only the most appropriate elements for every viewer.
Modernizr isn’t the only tool on the market that offers this kind of power in responsive design — but it’s a darn good one. Moving beyond user-agent assumptions is just plain good practice; finding a decent tool to do it with should be standard industry practice.
Leave a Reply: