12 Resources for Responsible, Responsive Design


by John Williams

There are more ways to access online content these days and, as designers, it’s up to us to make sure that content is presented in an effortless, attractive way regardless of how a visitor is viewing that content. Used to be, we’d have to create complicated mobile optimized sites that sit on their own domain, completely removed from the content of the full site. These could be pathetically scaled down versions of the desktop site or completely different material all together. The disparity between mobile and desktop sites was frustrating for visitors and taxing for the folks maintaining the sites.

Then the iPhone came and ushered in the app boom. Everyone wanted a custom app. Apps are great. They’re fast and beautiful and offer far more than anything the web could bring at the time. But apps are extremely expensive to develop and require specialized training and programming skills.

That’s where responsive design comes in. Ethan Marcotte penned an article for A List Apart that described a new method for crafting websites: Responsive Web Design (RWD). RWD sets out to solve the problem of accessing web content on a growing number of devices and screen sizes. Rather than creating pixel perfect layouts for the desktop, we’re encouraged to build *systems * that work under a variety of situations. 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 championing this fantastic new way of thinking about web design.

Learning Resources

1. A List Apart Responsive Web Design

This is where it all started. Ethan Marcotte wrote the book on responsive design. No, seriously…he literally wrote the book about it. In doing so, he’s responsible for shifting the course of web development for everyone. In this article, he explains the reasons behind this approach and provides some rudimentary examples that will help anyone grasp the concept. I highly recommend you read this article and pick up his book.

### [2. Beginner’s Guide to Responsive 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 responsive web design. Give this a read to get a high level understanding about the process.
### [3. How to Design a Mobile Responsive 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 comprehensive overview.
  ## **Frameworks**   ### [4. Semantic Grid](http://semantic.gs) ![](/images/blog/2012/10/semanticgrid.jpg "semanticgrid")Semantic Grid is a framework for creating grid-based responsive layouts without adding a lot of cluttered markup to the HTML. While it’s not the most feature-rich framework, it’s the easiest to get going with. If you’re new to LESS and other frameworks, this is the place to start.
### [5. Twitter Bootstrap](http://twitter.github.com/bootstrap/) ![](/images/blog/2012/10/twitterbootstrap.jpg "twitterbootstrap")This framework 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 crafting beautiful, responsive style for just about any web component you can imagine. Everything from grid systems, form elements, and buttons to sliders, navigation elements and tabbed panels are all styled beautifully and are built for responsive 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, Foundation is similar to Twitter Bootstrap in it’s depth. They provide a solid system for building responsive layouts. They also provide add-on packages for extra styling and features. You only download what you need to keep your code as lean and optimized as possible.

Testing Tools

7. responsive.is

This testing tool allows you to load any site and view how it would render on a number of standard 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 difference 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 hardcore nerd. If you’re developing for iOS devices, you can get a full iOS simulator with Apple’s XCode software. It’s a bit trickier to use, but for the most accurate representation 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 responsive design inspiration. They feature the best examples of RWD on the web, including 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 responsive gallery. Instead, it’s a resource for hundreds of different types of user interactions, from navigation to galleries and menus. They include several mobile design patterns that will help any designer find new and interesting design solutions.
### [12. Best Web Gallery](http://bestwebgallery.com/category/responsive/) ![](/images/blog/2012/10/bestweb.jpg "bestweb")Best Web Gallery has a section dedicated to responsive design. They have a great selection of sites.

About Search Discovery

Search Discovery is a digital intelligence company that empowers organizations to make better, dynamic and transformative business decisions. We're focused on delivering results for our clients through digital analytics, SEO, digital media, and technology.


Comments

Let's Talk.

You're excited. We're excited. Give us a shout so we can get this party started.

!
!
!