by John Williams

There are more ways to access online content these days and, as design­ers, it’s up to us to make sure that content is presented in an effort­less, attrac­tive way regard­less of how a visitor is viewing that content. Used to be, we’d have to create compli­cated mobile opti­mized sites that sit on their own domain, completely removed from the content of the full site. These could be pathet­i­cally scaled down versions of the desktop site or completely differ­ent mate­r­ial all together. The dispar­ity between mobile and desktop sites was frus­trat­ing for visi­tors and taxing for the folks main­tain­ing the sites.

Then the iPhone came and ushered in the app boom. Every­one wanted a custom app. Apps are great. They’re fast and beau­ti­ful and offer far more than anything the web could bring at the time. But apps are extremely expen­sive to develop and require special­ized train­ing and program­ming skills.

That’s where respon­sive design comes in. Ethan Marcotte penned an article for A List Apart that described a new method for craft­ing websites: Respon­sive Web Design (RWD). RWD sets out to solve the problem of access­ing web content on a growing number of devices and screen sizes. Rather than creat­ing pixel perfect layouts for the desktop, we’re encour­aged to build *systems * that work under a variety of situ­a­tions. It may seem like a lot to swallow, so I’ve put together a list of resources that can help you on your way to cham­pi­oning this fantas­tic new way of think­ing about web design.

Learning Resources

1. A List Apart Responsive Web Design

This is where it all started. Ethan Marcotte wrote the book on respon­sive design. No, seri­ously…he liter­ally wrote the book about it. In doing so, he’s respon­si­ble for shift­ing the course of web devel­op­ment for every­one. In this article, he explains the reasons behind this approach and provides some rudi­men­tary exam­ples that will help anyone grasp the concept. I highly recom­mend you read this article and pick up his book.

### [2. Beginner’s Guide to Respon­sive Web Design](http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design)

![](/images/blog/2012/10/treehouse.jpg “treehouse”)Treehouse has a great primer for respon­sive web design. Give this a read to get a high level under­stand­ing about the process.

### [3. How to Design a Mobile Respon­sive Website](http://www.uxbooth.com/articles/how-to-design-a-mobile-responsive-website/)

![](/images/blog/2012/10/uxbooth.jpg “uxbooth”)UX Booth is run by a talented bunch. They remove a lot of the mystery with RWD. Take a look at their compre­hen­sive overview.

 

## **Frame­works**

 

### [4. Seman­tic Grid](http://semantic.gs)

![](/images/blog/2012/10/semanticgrid.jpg “semanticgrid”)Semantic Grid is a frame­work for creat­ing grid-based respon­sive layouts without adding a lot of clut­tered markup to the HTML. While it’s not the most feature-rich frame­work, it’s the easiest to get going with. If you’re new to LESS and other frame­works, this is the place to start.

### [5. Twitter Bootstrap](http://twitter.github.com/bootstrap/)

![](/images/blog/2012/10/twitterbootstrap.jpg “twitterbootstrap”)This frame­work was created and released by Twitter. It’s completely free and offers a rock-solid, simple way to get your website started. They’ve removed a ton of legwork by craft­ing beau­ti­ful, respon­sive style for just about any web compo­nent you can imagine. Every­thing from grid systems, form elements, and buttons to sliders, navi­ga­tion elements and tabbed panels are all styled beau­ti­fully and are built for respon­sive layouts right out of the gate.

### [6. Foundation](http://foundation.zurb.com)

![](/images/blog/2012/10/foundation.jpg “foundation”)Created by the wiz kids at Zurb, Foun­da­tion is similar to Twitter Boot­strap in it’s depth. They provide a solid system for build­ing respon­sive layouts. They also provide add-on pack­ages for extra styling and features. You only down­load what you need to keep your code as lean and opti­mized as possi­ble.

Testing Tools

7. responsive.is

This testing tool allows you to load any site and view how it would render on a number of stan­dard device sizes like iPhone, iPad and Desktop.

### [8. responsivepx.com](http://responsivepx.com)

![](/images/blog/2012/10/responsivepx.jpg “responsivepx”)ResponsivePX is similar to the last tool. The biggest differ­ence is that you can define the exact height and width of the device you’d like to test. This is helpful for new devices like the iPhone 5 or ones that haven’t yet been widely adopted.

### [9. XCode](https://developer.apple.com/xcode/)

![](/images/blog/2012/10/xcode.jpg “xcode”)This is for the hard­core nerd. If you’re devel­op­ing for iOS devices, you can get a full iOS simu­la­tor with Apple’s XCode soft­ware. It’s a bit trick­ier to use, but for the most accu­rate repre­sen­ta­tion of your site on an iOS device without having to have that device handy, this is where you’ll wanna be.

## Galleries

 

### [10. Mediaqueri.es](http://mediaqueri.es)

Media Queries is the best source for respon­sive design inspi­ra­tion. They feature the best exam­ples of RWD on the web, includ­ing our very own redesign for [Atlanta Ballet](http://mediaqueri.es/atb/).

### [11. Patterntap](http://patterntap.com)

![](/images/blog/2012/10/patterntap.jpg “patterntap”)Patterntap isn’t just a respon­sive gallery. Instead, it’s a resource for hundreds of differ­ent types of user inter­ac­tions, from navi­ga­tion to galleries and menus. They include several mobile design patterns that will help any designer find new and inter­est­ing design solu­tions.

### [12. Best Web Gallery](http://bestwebgallery.com/category/responsive/)

![](/images/blog/2012/10/bestweb.jpg “bestweb”)Best Web Gallery has a section dedi­cated to respon­sive design. They have a great selec­tion of sites.