What’s all this talk about Responsive Web Design?

Posted on June 5th, 2012 by Michelle Ryan

How do you view content on the internet? On your computer? Mobile? Tablet? TV?

If you answered yes to most or all of the above, you’re in good company. In the near future we will most likely only be adding to this list. Video game consoles, for example, now have web browsers. But this presents a challenge. How do you serve up a site on all these different screen sizes and input methods, not to mention the continued nuisance of multiple browsers?

Current solutions for smartphones include scaling down the size to fit or building a separate mobile version of a site. Scaling down can make content difficult to read and a site hard to interact with. Creating a separate mobile version is cumbersome leaving developers responsible for managing the code for multiple code bases. And that only addresses the mobile issue.

So what is the answer? Do we continue to develop multiple versions of the same site with every new device that emerges? This solution is not only unrealistic, but causes a single web site to suffer from a sort of multiple personality with disconnected designs and content across the multiple devices. Instead, why not leave users with the same experience no matter where they view a site?

Responsive design, we welcome you! With the responsive method of designing and developing, a site will fluidly adapt to fit all screen sizes, from the widest displays to mobile phones. Technically, responsive design is achieved through fluid grids, flexible images, and media queries. From a design perspective, it demands that we think differently. Rather than creating device specific layouts, we must design a single layout that adapts to multiple devices.

Responsive design isn’t the solution for all cases. There are times when the mobile version of a site should be different. But as the inventor of responsive design, Ethan Marcotte, said, it does allow us to “design for the ebb and flow of things.”

Want to learn more? Check out these great resources:
unstoppablerobotninja.com
teamtreehouse.com
webdesign.tutsplus.com
blog.responsivenews.co.uk

And finally, there’s a growing number of responsive sites out there. Below you’ll find a handful of well designed examples. If you’ve developed a responsive site let us know. We’d love to check it out!

This entry was posted in Design | Bookmark What’s all this talk about Responsive Web Design?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>