Responsive Design Resources

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
  • HTML5 Boilerplate – lean, mobile friendly HTML5 template with customizable options to get your project started
  • Modernizr – a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
  • Flexslider – fully responsive slideshow for photos, video or HTML)
  • 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)
  • embedresponsively.com – Helps build responsive embed HTML code for embedding rich third-party media into responsive web pages (like YouTube, Google Maps, Instagram, generic iFrames and more)
Retina 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?

~Tiffany Broadbent Beker (@tb623)