Coyier and Walton on Responsive Web Design Process

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)

Jump to Coyier’s post

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.

Jump to Walton’s post

2 thoughts on “Coyier and Walton on Responsive Web Design Process

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s