In my last post, I delivered a barebones primer on the subject of responsive web design. It was based on hosting and attending the recent Responsive Summit and hearing what some of today’s leading web designers and UX professionals are doing with responsive design.
The summit covered a huge amount of ground including: design workflows, W3C, browsers, grids, layout, content-out approaches, progressive enhancement, how responsive web design fits with editorial design and resolution independence. Not bad for one day. I plan to publish all of the content from the Responsive Summit next week.
Because there’s much more to say (and those attending the summit knew way more than me) I thought I’d do a bit of a round up of some of their previous writing about responsive web design. So in this post I’ll be curating some of their thoughts and giving you a stepping off point to read more from them on the topic.
Lewis Nyman – @lewisnyman
“Responsive design is still a new way of thinking. Media Queries are a great tool to enhance the experience of browsing a web site on multiple devices and it’s a great idea to consider devices that do no support them. We would be dreaming if we expected an easy solution from day one but at least we have a range of options in front of us that allow us to find the best solution for the problem at hand.
“It’s important to bear in mind that context is key, a well informed decision will always yield better results instead of quickly choosing the most popular solution.”
Techniques for gracefully degrading media queries »
Alex Morris – @aexmo
“Before the idea of responsive design came along we made fluid sites quite happily. The only drawback with fluid sites was they literally scaled to fit. They were dumb and, as a result, in most fluid sites layout became a problem pretty soon, with horrible line-lengths and weird wrapping issues aplenty.
“Along came media queries and we started to figure out that targeting screens with specific dimensions was nice and easy. The ubiquity of the iPhone and iPad lead to a lot of ‘responsive’ sites just having treatments for both those devices resolutions – to hell with what fell between – which of course is fundamentally flawed.
“The idea of breakpoints is useful if you have lots of data to show what devices and resolutions you want to target. Sometimes it’s desirable too if you really don’t care about supporting everything…”
Responsive design and breakpoints »
Nathan Ford – @nathan_ford
“We need a solution to responsive advertising, or else most of our efforts to promote adaptive layouts to large-scale websites will be squashed by cold, hard business reality. There will likely need to be new tools built, old ones adapted, and thousands to convince. But, by defining how we – the web design community that will have to work with these requirements – think this would best be solved, and getting our ideas in early, we can be influential in bringing about a solution that solves everyone’s needs. After all, that’s what we do every day, right?”
Responsive advertising: a ranged solution »
Paul Lloyd – @paulrobertlloyd
“Even if you have grasped the entirety of this technique, you still need to recognise the underlying reasons for taking a responsive approach in the first place. If we are talking about truly device-independent design, then the attributes of popular devices can’t be the looking glass though which we make our decisions. Furthermore, if we are talking about adaptable design, fixed pixel widths can’t be our measurement, nor can layout be the only focus of our attention. I’ve seen little discussion around how different input methods might effect our design choices, but I’m sure this will come.
“If there is a simple truth underlining responsive design, it’s that you can’t assume anything. However, if one thing can be relied upon then it’s that relative units, percentages and ems are far more robust than absolute units like the humble pixel.”
Two years »
Mark Boulton – @markboulton
“Responsive Web Design has quite rightly shifted the web standards based design community to a new way of thinking. It’s not really just a layout technique. Responsive design ... is a much broader, holistic practice. It involves every step of the design process in determining the outcomes of the actuators, or defining the sensors and then designing systems around those inputs. The whole thing is involved.”
A responsive experience »
Chris Armstrong – @Armstrong
“By taking the device resolution out of the equation, you get layouts that should work across all devices and contexts, even ones that haven’t been invented yet. If, for whatever reason, a user has their base font size set to 80px, then this approach should still produce an appropriate layout for the space available. Talk about device independence.
“And finally, technology changes, but the human body has stayed pretty constant for the past few thousand years. By designing for human constraints (readability) rather than technological constraints (device size and resolution), your layouts won’t date any time soon.”
The Goldilocks approach to responsive design »
Josh Brewer – @jbrewer
“Start designing from your content. Stop designing from some imaginary page.”
Quoted in Build Conf 2011 »
Cennydd Bowles – @Cennydd
“After years of promise, mobile technology is finally setting the agenda for web designers, developers and users. Widespread support of CSS3, webfonts and HTML5, along with new practices like responsive design, are allowing designers to cater for increasingly diverse screen sizes, contexts of use and input methods and deliver more engaging experiences.”
User-centered design »
Remember, you can some of the thoughts from the responsive summit over on Lanyrd