Responsive web design resources

Boston Globe's new responsive design

Lately I’ve become fascinated with responsive web design, a technique that presents a more flexible website capable of conforming to the device you happen to be using at the time. A responsive website will be optimized for desktops, tablets and mobile devices. This is more complex than you might think at first, because many touch screen devices (like iPhones and iPads) have two different screen orientations: portrait and landscape.

There seems to be some debate in the web design community regarding exactly how this flexibility can be accomplished. However, there isn’t much debate about its usefulness. One platform served to many devices is the holy grail of publishing.

I won’t try to tackle that debate in this blog post, but I will show you some of the most useful tools and resources I’ve found in my own research. Here are some of the best resources I found for responsive web design:

1. Ethan Marcotte’s A List Apart article on responsive design kicked off the conversation about this technique. He discusses CSS media queries to determine screen size and enabling and disabling floats with that technique. This was the earliest resource I could find on the subject of responsive design. Ethan also wrote the first book on the subject, called “Responsive Web Design.” He also helped redesign the Boston Globe’s website to use responsive design principles (from my screenshots above). You should visit Bostonglobe.com and play around by resizing your browser to see it in action.

2. Jason Grigsby, VP at Cloud Four, a Portland company specializing in mobile & web solutions, wrote several great blog posts about responsive images and the challenges that surround them. You can find the series of articles broken into several parts (part 1, part 2, part 3). These articles cover some of the basics of responsive images, like delivering the mobile image first and upgrading to the desktop image when appropriate to conserve bandwidth for the user. He also links to several good articles on how to handle video embeds, data tables and third party widgets (ie. Twitter, etc) in a responsive way.

3. Think Vitamin’sA Beginner’s Guide to Responsive Web Design” is a great place to start if you’re looking for a quick overview of the concept. The article covers fluid grids, media queries and some additional resources as well.

4. DesignMondo’s 50 examples of websites using responsive design – this blog post is a great place to see a nice sampling of websites using responsive design. The screenshots show details of how the sites change in desktop, tablet and mobile devices (in portrait orientation). DesignMondo also has another great post about tools and services that will help you create, test and implement a responsive design. One of my favorites is ScreenFly, a quick and easy way to test your design in multiple devices and orientations (portrait vs landscape). It’s free and useful for testing a lot of devices quickly.

5. Smashing Magazine’sResponsive Web Design Techniques, Tools and Design Strategies.” As with most Smashing Magazine articles, this one is very thorough, but probably not a good starting point until you know a little more about all the components of responsive design. For instance, there is a very useful link to an article on how to debug CSS media queries. However, you would need to know what a media query is before you learn to debug it.

6. WordPress and responsive design. There is a great 30min video by Sara Cannon from Wordcamp San Francisco 2011. If you use WordPress (and I do) you’ll want to watch this short video to see how you can adapt your WordPress blog to use responsive design techniques.

7. The HTML Boilerplate – This is a free template using HTML5 and some responsive design techniques. If you want to play with HTML5 responsive design, you can download the code from their Git repository.

There are many other resources available for responsive design. However, I found these to be the most useful. If I’ve missed any that you think should be on the list, please feel free to post them in the comments below.

Thanks

This entry was posted in Design, Development, Mobile, Uncategorized, Web design and tagged , , . Bookmark the permalink.

2 Responses to Responsive web design resources

  1. G Love says:

    Nice. I’m also a bit enchanted with responsive design right now. I had the chance to put together a blog using those techniques, using the excellent Yoko templates as a starting point (http://www.smashingmagazine.com/2011/06/07/free-html5-css3-wordpress-3-1-theme-with-responsive-layout-yoko/).

    Overall, the easy part was the overall design. The devil was in the details…for instance, although some images scale well, others had to be switched out entirely for different sizes. It isn’t a huge deal for template-wide items, but if you have something unusual in the content area it can get tricky quick.

    It reminds me of the old days with the flexible width, vs. fixed width debates. Either one is easy to build a small website with…but oftentimes the more elegant/flexible design fall apart when coming up against business requirements like ad size and placement.

    With all that said, if you have a small to medium sized site to work with, I highly recommend playing with responsive design. It feels like magic to build a page that auto-magically looks great on desktop, tablet, and smartphones.

  2. Dave says:

    Hey Gary, thanks for the link to the Yoko WordPress theme. I’ve been poking around for a minimalist responsive design WordPress theme and haven’t seen that one. I think you’re totally right about the size/complexity of sites using that design style. I am impressed at how well the Boston Globe site turned out, but I doubt the RD techniques are carried throughout the entire site. Newspapers use far too many vendors to make that work in every nook and cranny of their site. However, with each progression of HTML and CSS I think that will become easier. If I were a mobile platform provider, I’d be nervous at the implications of this type of design. For the right kind (size/complexity) of site, it makes mobile platform providers irrelevant.

Comments are closed.