A few weeks ago, I gave a sold-out talk about Responsive Web Design for New Media Manitoba and how recent developments provide unprecedented opportunities to deliver online content.

Responsive Web Design (or RWD) is a technique and methodology for both creating and implementing websites that takes into consideration the presentation of the site’s interface on a given browser and device.

Ideally, from a design and development standpoint, it means we design a website once and let it work everywhere. From a client’s perspective, it means we design one website and let it perform legibly and usefully for all customers. And for customers, it means a better experience of a given website or web application; no mobile apps, no m-dot insanity (e.g. http://m.cnn.com), and fewer performance issues.

I figured I’d pull out a few key points of the talk that were most salient.

  • In the bad old days of the web, we were handcuffed by large and energy-inefficient monitors, low bandwidth, browser manufacturers with no standards or scruples, massive QA departments, and static sizing. More unhappily, sites couldn’t scale written or visual content and they were built with spacer gifs, Band-Aid®’s, and either Flash- or image-based static content. No more.
  • Reading and using the web on mobile devices (both smartphones and tablets) is accelerating even faster than we could have expected. A majority of young people in the US have smartphones. And soon the majority of people will be accessing the web via mobile devices.
  • The W3C, though criticized often, should be given much credit to instituting and helping to implement more robust media queries in CSS3. Without media queries telling the plethora of new devices how to display a website, we would only have flexible websites which we’ve had, well, forever.
  • Planning is important. A responsive website requires additional time and thought and consideration. You’re designing for everybody–including folks on tiny mobile screens. (Luke Wrobleski’s Mobile Firstis a critical read here. Read it. I disagree that designing for mobile-out is an always-already requirement but you can’t beat Luke’s logic.)
  • The only two reigning examples of RWD are The Boston Globe and Smashing Magazine. These sites feature tremendous amounts of content of various kinds, sizes and formats and they display that content beautifully and elegantly on nearly every device: high definition or wide desktop, desktop, tablet, and smartphone. These sites also use web type with care and they present a consistent and clear reading model no matter how or where they are being displayed. These sites set the stage for all future sites.
  • Jeremy Keith writes: “So the web, I consider to be: resources (mostly HTML) delivered over HTTP, addressable at URLs. HTML, HTTP, URLs. That’s the web.” This should be on the reverse of every designer’s business card.”

You can download the original presentation [PDF, 3.2 mb] or, if the feeling strikes you, watch the presentation recorded on New Media Manitoba’s LiveStream channel.

Many thanks to New Media Manitoba for having me present about RWD. I’m open to any all corrections and feedback.

Responsively,
Andrew.

Topics