Responsive design is a method of web design that has been developed in response to the almost infinite number of screen sizes designers are faced with today. Rather than create multiple websites or relying on browser-sniffing, it uses fluid design and a CSS3 feature called Media Queries to adapt the website design depending on the size of the browser window.
Media Queries have been used for years to specify print stylesheets. They are fairly sophisticated, accepting both a range of widths and arguments such as media (screen, print, aural), orientation (portrait, landscape), and color. They are commonly used to adjust the layout, typography and size of images and icons down for mobile devices, however, I used the “Mobile First” technique of using the mobile design as the default and making modifications as the window gets larger.
One of the additional problems with mobile devices (and one of the pillars of Responsive Design) is page load time. They often don’t have the processing power to load pages as quickly as desktops and often have data limits that make the large images of desktop websites prohibitive. A number of methods of changing images based on screen size and device are being worked on but there is no easy answer yet.
I discussed the responsive icons used on this site in an earlier article. In short, I chose an icon font for the limited impact on page-weight, the ease of resizing, resolution-independence, and the ability to style them with CSS. It was easy to implement using CSS :before and :after selectors and adds to the visual appeal and usability without adding noticeably to the download time.
Mobile Navigation in Responsive Design
Design for Internet Explorer
So Responsive Design is a great idea and media queries are supported in all modern browsers… (Say it with me) except Internet Explorer. Until version 9. Unfortunately, there are people who are still stuck with earlier versions of IE for one reason or another and others who simply don’t bother to upgrade.
Respond.min.js adds basic media query support for IE versions 6-8, which combined with conditional comments allows them to get essentially the same experience as those with more advanced browsers. All you have to do is call the script.
The last workaround for IE was a little script to add HTML5 support for older versions. I like HTML5 for its increased semantics and accessibility as well as how easy it makes to use common techniques like form validation. This script makes versions on IE that don’t support HTML5 recognize the elements for styling.
<!--[if lt IE 9 ]>