Responsive web and IE 7 – can we just get along?
When it comes to responsive web design, IE 7 is pretty far from people’s minds these days. With global usage of IE 7 having dropped to under 1%, more and more sites and web frameworks are dropping support for this 7-year-old browser. But who makes up that 1% you ask? In our experience: paying customers. Many organizations are still running IE 7, or default newer IE versions to run in IE 7 compatibility mode to get more life out of some mission-critical system or another. So while the rest of the world may be getting on with things, working with corporate IT still makes IE 7 a consideration.
But neither do we want to degrade our web experiences for newer, hipper, shinier devices and browsers. The growing usage of smartphones and tablets demands attention, so now we’re pulled in two directions. How do we cater to a new diversity of devices and browsers while still maintaining a usable experience for desktop users who may have no choice but to use IE 7? Here are some basics techniques to make this work.
Make IE do what it can
IE 7 and later supports three document modes: “standards” mode, “quirks” mode and “almost-standards” mode. Standards mode provides the greatest support for modern web standards such as HTML5, CSS3, and SVG – precisely the tools we want for responsive design and mobile-optimized web development. Telling IE to render in “standards” mode will ensure that newer IE versions that support these capabilities will actually utilize them, rather than defaulting to, say “IE 7 compatibility.” To instruct IE to run in standards mode, add a doctype as follows:
<!doctype html>
<html>
<head>
<title>The start of something good</title>
</head>
<body>
...
</body>
</html>
Instructing IE to render in standards mode helps us by ensuring whatever standards support is available is actually applied, but this doesn’t help our users running true IE 7 (or IE 8 for that matter) – those browsers don’t implement these modern web standards, and no document mode it going to make that standards support magically appear. We’ll need some Javascript for that!
Make media queries work
CSS media queries allow you to apply different style depending on the characteristics of the device and “media type” (screen, print, TV, etc.). This is a widely used feature in responsive web design to apply different styles – layout, typography, and graphic elements – to tailor the page rendering to the size of the device. IE versions prior to 9 don’t support media queries, and so may not apply the expected styles.
Using Javascript we can conditionally include a script that will interpret and apply our media queries – for example respond.js – so IE 7 users see the page style we want them to (typically the “desktop” view of our responsive pages).
<!--[if lt IE 9]> <script src=“/path/to/respond.js"></script> <![endif]-->
This javascript approach allows media queries for different views to be included in the same CSS style sheet files. The conditional around the script include ensure that only IE less than version 9 will include the respond.js script – from IE 9 on, CSS media queries are supported, so we don’t need the additional overhead of the script.
Add support for HTML5 semantics
HTML5 introduces a new set of semantic markup elements, and while these are not necessary for responsive web design per se, HTML5 semantic markup helps make pages more terse, readable and interpretable for automated processing.
There are a number of Javascript solutions that will define HTML5 semantic markup support so that they can be used with older versions of IE. We usually go with the widely used html5shiv, which you can add as follows:
<!--[if lt IE 9]>
<script src=“/path/to/html5.min.js"></script>
<![endif]-->
Again, the conditional here ensures that only IE versions prior to 9 will bother loading and running the script, since from IE 9 on HTML5 semantics are supported.
Combining these steps, a starter page for a responsive website that also supports IE 7 would look like this:
<!doctype html>
<html>
<head>
<title>The start of something good</title>
<!--[if lt IE 9]>
<script src=“/path/to/html5.min.js"></script>
<script src=“/path/to/respond.js"></script>
<![endif]-->
<link href=“styles.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
...
</body>
</html>
There are still many modern web standards we haven’t accounted for here. Features like CSS3 gradients and shadows and SVG that help make a site look great on devices with different sized screens and high density displays aren’t going to do a thing for IE 7. More Javascript solutions can be brought to bear (CSS3Pie for many CSS3 properties, Raphaël for SVG support), but how much of this must be done for IE 7 really depends on your scenario. All these solutions add complexity and overhead, so delivering a functional, if perhaps not optimal experience, that is lighter weight and easier to maintain may be best to deliver responsive design to modern browser users, while not leaving IE 7 users behind.
