Responsive Design Resources

This is important for those organizations who don't want to support an application for small devices. We used to use the "m." technique of providing our customers with special mobile versions of our sites. Today we can do better. Today we have the tools to welcome different device types to our site with a little thought for them during the design process. Below are some tutorials and articles that will help get you started with examples, demos, and code downloads.

Responsive Web Themes Part 1- CSS-Tricks

This is definitely the one you should start with. It is a screencast by Chris Coyier, well known in the web design world. In this video, Chris is discussing Responsive Web Design. Too many people are getting the terms Responsive, Fluid, Adaptive, and Progressive mixed up. This is a clear explanation of what Responsive design is all about. To see the entire screencast, you will also have to watch Part 2.

Responsive Web Themes Part 2- CSS-Tricks

This is Part 2 of the screencast by Chris Coyier. The discussion goes more into detail on designing and coding for devices of varying sizes. Chris talks about true responsive images, which are different than stretchy images if you are at all concerned about the bandwidth your mobile devices will require to view your pages. Responsive text and video inclusion are also discussed.

A Pixel Identity Crisis - at alistapart by Scott Kellum - January 2012

This January 2012 article is a discussion of pixel sizing, something you need to understand before you can launch into the world of responsive design. It discusses the difference between the hardware pixel and the reference pixel. The author points out the difficulty of testing without having the device in hand.

Responsive Web Design: A Visual Guide - at by Andrew Gormley - May 20011

responsive design guide

This is video tutorial, but unlike so many, this one provides you with the ability to download the companion files used in the video. The video is well-done, but it predates (May 2011) the above article on reference pixels and more complex media queries. However, it is a good introduction into developing a working example.

Convert a Menu to a Dropdown for Small Screens - at CSS-Tricks by Chris Coyier - July, 2011

This is a handy little trick to keep in your design toolbox. The sample files can be downloaded, and there is a short video demo for those that don't have the right devices to view the live demo. A companion article (below), shows how this can be degraded to work with or without JavaScript by adding a form and some server-side php code.

Unobtrusive Dropdown Page Changer - at CSS-Tricks by Chris Coyier - September, 2009

This article shows you how to make a dropdown similar to the one above, work with or without JavaScript. A form is used, so some server-side code is required when the target browser does not have JavaScript enabled. The submit button for the form is hidden until a non-JavaScript environment is encountered. There is a demo with and without this technique. No code download is available, but the code in the example is so short, you really don't need one.

Responsive Data Tables - at CSS-Tricks by Eric Dimon April, 2011

We know we should use the table tags when we have an actual table, but then we have the problem of what to do about small devices. This is an article on how to adapt your tables to small devices by allowing them to be fluid as far as they will, and then stacking each row of cells as a column, with the individual row-columns stacked on top of each other.

50 Ways to Please Your Customers - at Mobify by James Sherrett and Ben Terrill - 2012

responsive design guide2

This is an excellent little e-book with some good reasons to get rid of those "m-dot" sites. There are a lot of good design tips and links to other sites that extend the discussion. A must read.