What is Responsive Web Design?

Written by Amit Agarwal on Jun 9, 2012

The number of mobile devices and web browsers have exploded in recent years and it is nearly impossible for any web designer to create websites for every device that is out there.

Responsive Web Design is a technique where you create a single design and it adapts itself based on the screen resolution of the client’s device which could be an iPhone, an iPad, a Kindle or even an upcoming Windows 8 tablet.  

Responsive Design may be good for SEO as well because you aren’t serving content over multiple URLs (the mobile page will have the same URL as your desktop page) and hence all the Google juice is preserved. Here are some excellent slides to help you get started.

Responsive Web Design 101

Thomas Byttebier reasons why a responsive web design is better than having separate mobile versions of your site for different device. He also shares a few good examples of websites that have implement responsive design.

Sara Cannon explores the various responsive web design techniques including progressive enhancement, flexible grids, CSS media queries, flexible images and video.

The Boston Globe is probably the most famous website that uses responsive design probably because it was the first major site to do so. Miranda Mulligan discusses how they redesigned Bost Globe and the challenges they faced in the design process.

Stephanie Rieger looks at the technical aspects of implementing responsive design. He stresses on building intelligence into the design so that it puts less strain on the client (like you may want to serve a lower resolution image to mobile phone using the various adaptive image techniques).

Subscribe to our Email Newsletter