October 18th, 2011
What does “Responsive Design” really mean?
Last week, designer/developer/A List Apart author Ethan Marcotte swung by the ‘Ship to talk about his work on the recent BostonGlobe.com redesign. The content overhaul that split the paper off from its counterpart, Boston.com, resulted in a site that relies heavily on “responsive design,” a system of code and design structures which create flexible, fluid pages that resize and reorganize content on any device or browser size — which means no mobile apps to build, just one site for all devices. (Some great examples of what that looks like here.)
Responsive design is still in its infancy — and isn’t going to be the answer for every brand and every site on the web. But it does mark a stark change in approach to design, development, organization, and just about every other component of building great digital experiences. Shortly after Ethan’s visit, art director Dan Mall and I hopped online to chat about our thoughts on what this might mean for the future.
Sara: So what’d you think of Ethan’s show and tell?
Dan: I think it was awesome. I’m a little biased though, because he’s a friend of mine.
Sara: Understandable. For me, coming in more or less cold to the entire premise of “responsive design,” there were two big takeaways. One, that this type of web design could really push a lot of companies to have all members of a team working together. It’s nearly impossible to sit down and architect a site like BostonGlobe.com without having everyone who’s at the table, regardless of job title, have a really good understanding of what the content means to the business, to consumers, how it should act and react, and what it should look like. And that’s awesome.
Dan: Yes. Agreed, which is why I’m glad that we work this way here.
Sara: The second big thing, probably the biggest thing for me, was the idea of content first, not mobile first. I really love that, in that it just shifts everything away from trends – which is not to say that mobile is purely a “trend,” but I’m not convinced “mobile first” is the most sustainable investment for a business, since what happens when things shift onto the next thing from mobile? There goes all the money you put into apps.
Dan: I think the difference for me is that the guy who coined the term “mobile first” (Luke Wroblewski) really meant the approach of it, not just that we should be making mobile apps. It’s the idea of prioritizing what content is important, because your space is so limited.
Dan: Actually, Luke’s book comes out tomorrow.
Sara: Nice plug!
Sara: Anyway – I think looking at content more holistically, rather than mobile first, desktop second, whatever hierarchy you want to put on it, just makes more sense for everyone. Business goals, design decisions, tech specs… all of it makes more sense by looking at the people and the devices and the habits together, rather than isolating your use cases, don’t you think?
Dan: I do think so, but I think there’s a larger discussion about it too, at least when it comes to design, because there are a ton of designers (and developers) that strive for pixel-perfection. And, in a way, responsive design bucks that idea, because it’s really about designing for scenarios that you can’t always plan for or control to the pixel. So, that sorta means that designers have to let go of their tight grasp of designs and really embrace the fact that the medium is inherently fluid.
Sara: Yeah, I imagine that’s not always an attractive idea for designers…
Dan: Right. But I think that’s to their detriment. To me, designing anything for the web means people might not see it in the way that you do, so we’ve gotta craft the system, not the actual pixels. Sometimes, those can be the same. Other times, not so much. And I love that about the web.
Sara: The thing that I do find a challenge about this mindset, that I’m not sure Ethan really answered, was how to build a site like this that is easily built for growth by the people on the business side after the fact. It’s undeniably functional, but for instance: the news team of the Boston Globe, have they been trained on how best to file stories so that they are getting optimized traffic? It’s a really big deal for a breaking news story to be the 6th story you see on a mobile device just because of how the code is set up on the back end. To me, that’s a huge part of the “responsibility” part of responsive design — how well have we designed content to display and perform in a constantly changing format?
Sara: It’s so much more than Design with a capital D, you know. And harps back to having everyone at the table willing to learn more about the other parts of the workroom that they may have never had to do hands on themselves before, to make the best kind of product for the business.
Dan: Yeah, that’s a great point.
Dan: In an ideal scenario, responsive design happens at the presentation layer so the content can remain agnostic from the form it’s in. It holds the promise of a design that could fit every form, and even be extra optimized for particular breakpoints (iPhone, iPad, other devices, etc). But because it’s such a new thing, there really aren’t very many best practices about it. We’re still figuring out what the practices are, much less the best ones.
Sara: Totally, which is what I find probably most interesting about all of it — the potential for pulling data off of a site designed this way could be some really valuable stuff. Are people on tablets in certain environments (trains, for instance) reading different content on a page than people on mobile phones? Desktops? How might you optimize layouts then to fit that bill? That could just push the design sophistication a whole other level forward.
Dan: Totally.
Dan: One of the most important things I learned when doing research about responsive design is that the word “context” hardly means what people think it does. A lot of peopleand agenciessimplify that word. They use “mobile” as synonymous as “on the go”. Butlike Ethan mentionedlots of people use their phones at home. And lots of people use their phones while sitting at a desk. So we can’t always assume that a “mobile” view means someone is walking around or traveling somewhere. All of this makes an even bigger case for the design to adapt to the use as opposed to the context.
