Responsive Design Resources

(Cross-posted from the W&M Creative Services blog)

As we’ve gone through the process of redesigning the W&M website to follow responsive paradigms we’ve amassed a list of resources we’ve found useful, ranging from general topic familiarity to issue-specific tools and tricks. Since there are many organizations out there starting to take a look (or are already knee-deep) in a responsive design, we thought these links may be of interest to others as well:

General

• Responsive Web Design – Ethan Marcotte – The article that more-or-less started it all
• Responsive Retrofitting – Since many folks don’t have the luxury of a full rewrite
• Common Misconceptions About Touch – Steven Hoober – Since fingers and touchscreens are what have prompted us to even really need a responsive design in the first place, it’s best to know what you’re getting into
• The State of Responsive – Stephanie Walter – A great summary of the current state of the art
• Improving UX through Front-End Performance – Lara Swanson – Just making your site adjust to different sized screens doesn’t make it mobile friendly
• Printing the Web – Hans Christian – Since  we’re trying to accommodate all kinds of devices, can’t forget paper (plus it helps you focus on your content, which is helpful in any size and medium)

Tools, tips and tricks

• Multi-Device Layout Patterns – Luke Wroblewski – Outlines common responsive layouts and how they “flow” between different screen sizes
• Screensiz.es – A sortable database of phone, tablet and desktop screen sizes and resolutions
• Super useful jQuery plugins for responsive web design – Jean-Baptiste Jung – jQuery solutions for responsive navigation, photo galleries, tables, forms, a little bit of everything
• Text-align: justify and RWD – Patrick Kuna – A clever solution for evenly-spacing elements in a “grid” (or row)

Retina images

• Developing a Responsive Retina-Friendly Site – Paul Stamatiou – Using HiDPI image assets and responsive images
• A guide for creating a better retina web – Backgrounds, SVG, and high resolution images

Many of these links were discovered courtesy of two mailing lists: Responsive Design Weekly and CSS Weekly.

What other responsive design resources have you found that have been helpful?