Option 1 – Apply “mobile first” methodology
A “mobile first” approach which treats IE6-IE8 the same as mobile devices (source: Craig Buckler) is probably the best approach if you have the luxury of having enough time to write your CSS from scratch. However, this may not always be possible.
- Respond.js – “The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under.”
What are the pros and cons of Respond.js and css3-mediaqueries.js? css3-mediaqueries.js provides more comprehensive, robust support for media queries; but the downside is that it’s (reputedly) slower than Respond.js. Respond.js is focused solely on providing support for min-width and max-width features, and ignores another aspects of the CSS3 media queries standard. But in my book, this isn’t really a disadvantage, because min-width and max-width are the only features I am using in my responsive design process today.
The bottom line
Respond.js is probably the best solution in most situations where you need to get your responsive design working on IE6-8. It’s lightweight, it’s fast, and there is even a WordPress plugin for Respond.js.