Part II: How We Achieve Responsive Websites for Legacy Browsers

Earlier this week, we posted part I of "Responsive, Adaptive, Fluid..." an exploration into "what is responsive web design?" Now in part II, we're diving a little deeper into how to achieve responsive websites for older browsers, and why responsive web design is important in today's marketplace .

A Link to the Past 

While current versions of Chrome, Firefox, Safari, and even Internet Explorer allow us to use media queries to achieve responsive websites, the ever-popular Internet Explorer versions 6-8 do not support this feature (and many others). Thankfully, there are several solutions for making this work in Internet Explorer 6, 7 and 8. We have been using Scott Jehl's respond.js to make our sites responsive in these older versions of IE. Simply reference this very lightweight (3kb) script after your CSS has been included, and then "crack open Internet Explorer and pump fists in delight." While this will make the older IE's parse and interpret your media queries, it will not make them listen to the cool new HTML5/CSS3 things you are trying to do. Another widely used JavaScript library, Modernizr, allows for a more consistent experience within these new HTML5/CSS3 websites in older browsers. This way, we can take full advantage of what HTML5 and CSS3 can do without sacrificing control over the experience in our older friends.

For years, web designers have been practicing the concept graceful degradation: giving users with the latest browsers an exciting and full experience while still maintaining a simple and accessible experience for those with older browsers. This still leaves much to be desired in the older browsers. Progressive enhancement states that we must now work in the opposite direction: delivering the most basic experience first and then building upon it for users with better bandwidth and browsers, enhancing the experience as the rendering capability of the device and user's connection allows. After all, the content of our sites is what drives users to visit them in the first place: everything else is just decoration.

Looking Ahead

It's a very exciting time to be in the field of web and interaction design. An ever-increasing number of tablets, smartphones, and laptops have forced us to abandon the old practice of simply creating separate desktop and mobile versions of a site. Instead, one universally accessible and flexible version of a website must be served up to any device that requests it. Many people think these practices will be carried over into television interfaces, which currently leave something to be desired on smaller screens as an increasing amount of users try to access their televised entertainment on their tablets. While tablet computing may be a trend, designing responsively for different screen sizes is not and is the best practice going forward. After all, who knows what the next great mobile device may be or what size it will be. By beginning to implement these practices now, we can create websites that are ready for whatever may be coming down the pike.

For some hands-on experience with a few terrific responsive websites, check out the below links (and don't be afraid to resize your browser to see how they react!)

http://bostonglobe.com

http://thinkvitamin.com

http://css-tricks.com