If you’ve not seen them, these two recent and excellent reads pull together a number of instructive tips for responsive web design process.
Chris Coyier, “Notes to an Agency Starting Their First Responsive Web Project”
This is a well crafted, succinct list providing summaries (with links!) of important emerging responsive design trends.
Choice notes include:
- “Designing first for a small screen means making the tough decisions about what is most important and what can be cut.”
- “Don’t think in terms of exact screen sizes.” — with rationale
- “Use as much ‘real’ of data/copy/media as you can.” — because real content makes a difference when designing for a wide range of devices and form factors
- “Hover is totally out.” (with a helpful link to this piece by Trent Walton)
Speaking of Trent Walton, he’s just published a fantastic overview of his working process.
Trent Walton, “Where to Start”
Also a series of notes, in very readable paragraph form (and benefiting from Walton’s wonderful knack for typographic design).
Some of my favorite points, each illustrated with helpful thoughts and examples:
- “ditching the assembly line method of site building for a more communicative, iterative process will be helpful.”
- “I still use Photoshop, but I use it differently.”
- “I finish in a mobile-first fashion,” but “I begin with wide views because the layout is usually more complex.”
- “let media queried breakpoints be defined by content/layout rather than any specific device. Whenever things don’t fit or hierarchy breaks, add a media query. My favorite example of this is if we set a max-device-width media query at 480px to target an iPhone 4, the iPhone 5 wouldn’t display any of the targeted styles because the screen is larger.”
Well worth reading, contemplating, and assessing.