How to Use Responsive Web Design to Support Old Browsers
In my previous article, Is Internet Explorer Development Really a Waste of Time?, I hinted that it’s possible to support older browsers without significant development effort. In this tutorial, we’re going to create a simple web page which works in all modern browsers as well as IE8, IE7, IE6 and possibly earlier versions.
Before we start, please note that we’re not aiming for pixel perfection or identical functionality. That will never be possible, so don’t even bother. However, we’re NOT going spend any time testing, fixing or hacking IE bugs and the page will still work.
The Objective
This is the design we’ll attempt to create in modern browsers:
click any thumbnail to view the full-sized screenshot…
It’ll never win any awards, but contains typical components such as a header, footer, content, sidebar and drop-down CSS menu. Note that the header and menu are fixed at the top of the browser window.
Assume we coded this page using standard HTML5 and CSS. IE9 and 10 will work as we expect but, even though this is a simple design, IE6 fails to render the page correctly. The layout breaks because the floated elements trigger IE6’s double-margin bug. The menu appears in the wrong place (display: fixed is not supported) and it’s unusable because IE6 does not allow :hover or :focus on elements other than links.
While we’ve all encountered worse issues, the site is fundamentally broken.
IE7 fares better but its weird margin handling causes the titles to be cropped.
We could fix this with conditional CSS or an IE7-specific hack, but life’s too short for that sort of nonsense!
IE8 is acceptable. They layout and menu work as we expect and we’re only missing a few CSS3 effects such as rounded corners and drop shadows. I’m sure XP users stuck on that browser would be more than happy.
Responding to the Problem
Let’s consider Responsive Web Design. RWD uses media queries to apply styles depending on the browser’s width or height. For example, this link will apply the definitions in mystyles.css if the page width is 600px or greater:
<link rel="stylesheet" media="screen and (min-width:600px)" href="mystyles.css" />
RWD is generally used to support mobile browsers. Your desktop design is simplified for small screen devices, e.g. the layout is linearized into a single column and features which rely on hover effects are adapted for touch.
Unfortunately, some mobile browsers don’t implement media queries. This means we can’t rely on using a desktop design then simplify it when a small screen is detected. But we can switch it around, i.e. we start with a baseline mobile design and only apply desktop layout effects when the browser supports media queries and the screen dimensions become large enough to be practical.
This is referred to as “mobile first” and has become a best-practice technique for developers implementing responsive sites.
Guess which other browsers don’t support media queries? Why couldn’t we use a simpler mobile layout to support IE6, IE7, IE8 and any other legacy browser. Linearizing the layout will immediately solve most IE-specific issues.
The Solution
Let’s look at the demonstration page which supports IE6+, mobile devices and all modern browsers…
The page uses two stylesheets:
- simple.css — our basic mobile/legacy browser layout
- complex.css — overrides simple styles for the desktop layout
The simpler styles are always loaded:
<link rel="stylesheet" media="all" href="simple.css" />
We then use a media query to load the complex layout if the screen width exceeds 800px. IE6, 7 and 8 will ignore the declaration:
<link rel="stylesheet" media="screen and (min-width:801px)" href="complex.css" title="complex layout" />
Here’s where the magic comes in: we use a conditional stylesheet to load the complex styles in older versions of IE which support the desktop layout:
<!--[if (IE 8)]>
<link rel="stylesheet" media="screen" href="complex.css" title="complex layout" />
<![endif]-->
In this case, I’m only happy to support IE8. The layout won’t be responsive but, since IE8 does not run on mobile devices, we know this must be a desktop user with a reasonably large display. Were I prepared to live with the IE7 margin quirks, I could have used if (IE 8)|(IE 7) in the conditional comment.
That’s all we need other than the HTML5 shim…
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
The result: our demonstration page works everywhere! Fire up your old copy of IE6 or IE7 and you’ll see this design…
It’s not as pretty, but it’s far more usable than before.
If you’re already supporting mobile devices, this technique won’t require additional development. If you don’t have a responsive design, you will require a simple mobile stylesheet but that’s a minimal effort for the number of mobile and legacy browsers you’ll be supporting.
Easy. Or certainly easier than fixing old IE bugs or persuading millions of users to upgrade their browsers.
If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like A Crash Course in Mobile Web Design.
