Notes to an Agency Starting Their First Responsive Web Project

Published by Chris Coyier

This past week I talked with a design agency who was about to embark upon their first responsive web design project. It sounded rather app-like. They were interested in hearing about my experiences, what to expect, what the process is like or could be like, what the deliverables should be, things to watch out for, and things like that.

This is what we talked about:

  • The "mobile first" philosophy is a great fit particularly for web apps getting a fresh start. Designing first for a small screen means making the tough decisions about what is most important and what can be cut.
  • As you scale up in screen width from there, consider loading in any additional content you need dynamically. That means small screens (often mobile devices with slower internet connections) aren't downloading things they don't need, which keeps things fast. Here's a technique to do that while maintaining the media queries in CSS. Demo.
  • Media is an important consideration. Make sure your images/audio/video scale well and that you aren't serving (for instance) desktop size images to mobile size devices. This is particularly challenging. There are a couple of responsive images solutions out there now to pick from. Video is harder, but you can at least make it fluid.
  • Don't forget about the X-axis (left and right) while designing. I think navigation that slides in from the side no matter where you are on the site is a pretty nice technique (ala Facebook iPhone app). Here are other responsive navigation patterns you can look at. Mobile design isn't just squishing things to fit in one long vertical column.
  • Your workflow will probably be more iterative than it has been in the past. Do mockups, code them and get them in the browser, find points of particular struggle, then get everyone back at the table and work them out. Repeat.
  • Responsive design isn't always the answer. Sometimes a dedicated mobile site or app is. Although when starting a project fresh, it often is. Plus, Google likes it and working with a single code base is nice.
  • Don't think in terms of exact screen sizes. Perhaps mockup a smallish, mediumish, and largish design and work from that. "Breakpoints" (where the design shifts around via media queries, beyond what the fluid grid is doing) should be "shrink it till it breaks, put breakpoint there, shrink it till it breaks, put breakpoint there, repeat". And don't forget about vertical media queries.
  • The "deliverables" to the client should definitely be a fully interactive HTML/CSS/JS website, even if they will be doing the actual implementation of it themselves. There is too much interactivity and too many possible screen sizes to make flat design comps workable.
  • Gallery of lots of responsive sites: http://mediaqueri.es/
  • Use as much "real" of data/copy/media as you can. Even if you fake it. If you do fake it, use real looking stuff, not cats.
  • Testing on real devices is a good idea. Adobe Shadow can help make that easier.
  • BrowserStack has a bunch of virtual devices you can test on.
  • Remember to think about interactions. Desktop has keyboard and mouse, mobile has touch and gestures. If you were, for instance, designing an interaction with drag-and-drop, that needs very different implementations depending on the environment.
  • Hover is totally out.
  • Sometimes the "source order" in the HTML makes shuffling things around a pain. Here's a clever little ditty for moving things around. And the future, if you are interested.
  • If you haven't read them, the classic reads are this article and this book.