Responsive Web Design: A Recap and Resources
Is it possible for us to “design once, display everywhere,” as the title of our July 27 webinar asked? Well, no. Not exactly. Responsive web design is, more than anything, about context, and different contexts may require unique solutions. This idea formed the basis of our discussion in the third event in AIGA and Adobe’s webinar series, “Breakthroughs: Where Inspiration and Technology Meet.”
Responsive design, as a philosophy, existed long before web designers practiced it, historically in the design of cars (anti-lock brakes, airbags, remote-control entry, for example) and more recently in the field of architecture. The premise, really, is designing machines, systems and structures that anticipate and respond to the needs of humans, rather than humans trying to adapt to various constraints. The field of human-factors engineering focuses on this premise; increasingly, designers of every discipline are influenced by findings in this field.
For our purposes, though, and in order to present AIGA members with a concrete, familiar example on which to build a foundation, we focused on responsive web design via a bite-sized design/build example. Dan Mall, our featured designer, took us on a quick journey through the basic elements of responsive web design, as outlined in Ethan Marcotte’s book of the same name. We discussed media queries, grids and flexible images, then watched as Dan created an example—playfully turning your webinar presenters into a rock band, The Responsives—illustrating each of these elements through descriptive code snippets and screen captures.
Scott Fegette from Adobe provided great insight for designers in general when it comes to designing responsively: his key words, “let go,” have been a theme throughout our series. To see what works, sometimes you have to break things. Print designers have much to bring to the table. The principles of good layout, typography and visual hierarchy are more important than ever as we design for new contexts and devices. But realizing you don’t have control over every detail in the final product is something today’s designer needs to be very comfortable with. Designing responsively is a perfect lesson in not letting the perfect be enemy of the good. He also gave us good tips on how to integrate responsive web design techniques using Dreamweaver. To become fluent with any kind of design language—which, in a sense, is what responsive web design is—takes a lot of practice, failing often and fast until you reach success. To help you quickly on your way to becoming fluent in these techniques, here are some helpful resources recommended by The Responsives.
- Responsive Web Design (A Book Apart) by Ethan Marcotte
- “Responsive Web Design” by Ethan Marcotte on alistapart.com
- “The difference between a Trend and a Shift” by Mark Boulton on markboulton.co.uk
- “Context“ by Jeremy Keith on adactio.com
- “Toffee-nosed” by Ethan Marcotte on unstoppablerobotninja.com
- “Responsive Web Design or Separate Mobile Site? Eh. It Depends” by Josh Clark on globalmoxie.com
- “Content Choreography” by Trent Walton on trentwalton.com
- “Responsive by default” by Andy Hume on blog.andyhume.net
- “Responsive images right now” by Harry Roberts on csswizardry.com
- “The Mobile context” by Mark Kirby on mark-kirby.co.uk
- “Mobile Web vs Native App: Give It a Rest” by Josh Clark on globalmoxie.com
- “Mobile Web Best Practices 1.0” via w3.org
- A List Apart
- LukeW’s blog
- Simon Collison
- Hicksdesign Journal
- Design made in Germany (Dmig)
- Media Queries, an ongoing collection of sites using media queries
- Less Framework
- jQuery Mobile
- 960 Grid System
- Media Query Bookmarklet via Sparkbox
- 1140px CSS Grid System
- Blueprint CSS Framework
- CSS3 Media Queries via W3C
The next AIGA-members-only “Breakthroughs” presentation will take place on September 21, when we discuss how publishing is being reinvented in the age of the iPad. Pre-registration and speaker information will be provided by AIGA shortly!