by John Williams

There are more ways to access online con­tent these days and, as design­ers, it’s up to us to make sure that con­tent is pre­sent­ed in an effort­less, attrac­tive way regard­less of how a vis­i­tor is view­ing that con­tent. Used to be, we’d have to cre­ate com­pli­cat­ed mobile opti­mized sites that sit on their own domain, com­plete­ly removed from the con­tent of the full site. These could be pathet­i­cal­ly scaled down ver­sions of the desk­top site or com­plete­ly dif­fer­ent mate­r­i­al all togeth­er. The dis­par­i­ty between mobile and desk­top sites was frus­trat­ing for vis­i­tors and tax­ing for the folks main­tain­ing the sites.

Then the iPhone came and ush­ered in the app boom. Every­one want­ed a cus­tom app. Apps are great. They’re fast and beau­ti­ful and offer far more than any­thing the web could bring at the time. But apps are extreme­ly expen­sive to devel­op and require spe­cial­ized train­ing and pro­gram­ming skills.

That’s where respon­sive design comes in. Ethan Mar­cotte penned an arti­cle for A List Apart that described a new method for craft­ing web­sites: Respon­sive Web Design (RWD). RWD sets out to solve the prob­lem of access­ing web con­tent on a grow­ing num­ber of devices and screen sizes. Rather than cre­at­ing pix­el per­fect lay­outs for the desk­top, we’re encour­aged to build *sys­tems * that work under a vari­ety of sit­u­a­tions. It may seem like a lot to swal­low, so I’ve put togeth­er a list of resources that can help you on your way to cham­pi­oning this fan­tas­tic new way of think­ing about web design.

Learning Resources

1. A List Apart Responsive Web Design

This is where it all start­ed. Ethan Mar­cotte wrote the book on respon­sive design. No, seri­ous­ly…he lit­er­al­ly 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 arti­cle, he explains the rea­sons behind this approach and pro­vides some rudi­men­ta­ry exam­ples that will help any­one grasp the con­cept. I high­ly rec­om­mend you read this arti­cle and pick up his book.

### [2. Beginner’s Guide to Respon­sive 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 lev­el under­stand­ing about the process.

### [3. How to Design a Mobile Respon­sive Website](

![](/images/blog/2012/10/uxbooth.jpg “uxbooth”)UX Booth is run by a tal­ent­ed bunch. They remove a lot of the mys­tery with RWD. Take a look at their com­pre­hen­sive overview.


## **Frame­works**


### [4. Seman­tic Grid](

![](/images/blog/2012/10/semanticgrid.jpg “semanticgrid”)Semantic Grid is a frame­work for cre­at­ing grid-based respon­sive lay­outs with­out adding a lot of clut­tered markup to the HTML. While it’s not the most fea­ture-rich frame­work, it’s the eas­i­est to get going with. If you’re new to LESS and oth­er frame­works, this is the place to start.

### [5. Twit­ter Bootstrap](

![](/images/blog/2012/10/twitterbootstrap.jpg “twitterbootstrap”)This frame­work was cre­at­ed and released by Twit­ter. It’s com­plete­ly free and offers a rock-sol­id, sim­ple way to get your web­site start­ed. They’ve removed a ton of leg­work by craft­ing beau­ti­ful, respon­sive style for just about any web com­po­nent you can imag­ine. Every­thing from grid sys­tems, form ele­ments, and but­tons to slid­ers, nav­i­ga­tion ele­ments and tabbed pan­els are all styled beau­ti­ful­ly and are built for respon­sive lay­outs right out of the gate.

### [6. Foundation](

![](/images/blog/2012/10/foundation.jpg “foundation”)Created by the wiz kids at Zurb, Foun­da­tion is sim­i­lar to Twit­ter Boot­strap in it’s depth. They pro­vide a sol­id sys­tem for build­ing respon­sive lay­outs. They also pro­vide add-on pack­ages for extra styling and fea­tures. You only down­load what you need to keep your code as lean and opti­mized as pos­si­ble.

Testing Tools


This test­ing tool allows you to load any site and view how it would ren­der on a num­ber of stan­dard device sizes like iPhone, iPad and Desk­top.

### [8.](

![](/images/blog/2012/10/responsivepx.jpg “responsivepx”)ResponsivePX is sim­i­lar to the last tool. The biggest dif­fer­ence is that you can define the exact height and width of the device you’d like to test. This is help­ful for new devices like the iPhone 5 or ones that haven’t yet been wide­ly adopt­ed.

### [9. 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 sim­u­la­tor with Apple’s XCode soft­ware. It’s a bit trick­i­er to use, but for the most accu­rate rep­re­sen­ta­tion of your site on an iOS device with­out hav­ing to have that device handy, this is where you’ll wan­na be.

## Gal­leries


### [10.](

Media Queries is the best source for respon­sive design inspi­ra­tion. They fea­ture the best exam­ples of RWD on the web, includ­ing our very own redesign for [Atlanta Ballet](

### [11. Patterntap](

![](/images/blog/2012/10/patterntap.jpg “patterntap”)Patterntap isn’t just a respon­sive gallery. Instead, it’s a resource for hun­dreds of dif­fer­ent types of user inter­ac­tions, from nav­i­ga­tion to gal­leries and menus. They include sev­er­al mobile design pat­terns that will help any design­er find new and inter­est­ing design solu­tions.

### [12. Best Web Gallery](

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