A Ramble on Responsive Design
Responsive Design is the latest mantra to gain traction in the web community. Ethan Marcotte threw down the gauntlet and challenged the web design community to seriously reconsider how we think about design and code. Responsive Design is an approach that encourages us to build websites that respond to a user’s behavior and environment – i.e. a single code base that adapts to multiple devices. With a peck of flexible grids, a dash of media quieres, and 1/2 a cup of incredibly smart javascript, you could bake a single website that tastes yummy in people’s browsers, tablets, phones, TVs and whatever other crazy device hits next. Hallelujah – device ubiquity problem solved. Kind of.
I’ve got nothing against Responsive Design. In fact, I think it’s great. This isn’t a critique of responsive design inasmuch as it’s a critique of how we as a community adopt mantras at the expense of our process.
We Love to Love Things
We (the web creation industry) did what we do best with brilliant insights. We wholeheartedly, unabashedly embraced it. New grid systems, and javascript libraries were produced seemingly overnight. For decades we have looked at a 400x500px jpg the same way. Suddenly it’s got a certain allure, a newfound responsive sexiness that we didn’t see before. As with any new web technology, we see it start to pop up in our internal work first. Designers portfolios were flexible. Conference websites looked as slick on my busted ass iPhone 3G as they do on my equally busted 24 inch Dell monitor. We were preaching to the choir and the choir was singing along in perfect harmony.
All is not well in the world
Here’s where I go all Debby Downer on you. Somewhere in-between Ethan Marcotte’s line in the sand and www.mediaqueri.es we went from “Responsive Design” to “responsive design.” The goal became – “make this fat site skinny. Look! it animates as it gets skinnier.” Responsive design became an implementation technique and not a design strategy, the html version of a glossy button. It skipped right over all the things that we learned from “Mobile First” and “Content First” and “Users First” and went straight to the fun part. Design is more than what you end up seeing on the screen.
I love working in photoshop. I love writing code (most days). To me there is no better way to spend a day than designing something and seeing it come to life. We need to remember the core principles of Design happen before photoshop and textmate. It’s not about how to make fat websites skinny. That’s a byproduct, that’s implementation. It’s about how we as designers and builders and keepers of the internet magic fairydust can provide better solutions for our users and for our clients. That, as we all well know, happens before the first pixel comes into digital being.
Back in the dark ages (like 6 months ago), we debated whether or not websites also needed apps and whether those apps should be native or web. We were forced to start at the beginning. What do users need when they’re on their phones? Do people interact differently when they’re on their couch vs their desk chair? If I’m browsing this site while I’m driving in traffic, how can I get what I need without killing someone? Producing device specific code was costly. It wasn’t something that you could just toss off in a week or two before launch. The scope and scale of the effort necessitated the use of our whole brains. We approached it with Design with a capital D. For the record, we screwed it up all over the place. We made some good decisions, and many more bad ones. I’m sure the collective budgets of every poorly conceived and unnecessary iPhone app could feed a small nation for the next decade.
Design with a Capital D
Design is a multifaceted beast. It is UX. It is Content. It is Context. It is Visual. It is even Marketing and Branding . It’s the meat and the sizzle as I like to say (I’ve never once said that, punch me if I ever say anything remotely that lame). My personal challenge is to remember that this shit is complicated and beautiful. Lets not cheapen it by making things skinny, patting ourselves on the back, and moving on. It’s time to go back to our process and start thinking about device and context when we kick off a new project. How does responsive thinking affect our content strategy? How does it affect our advertising (there’s a great discussion of this starting now at markboulton.co.uk)? How does it effect our ongoing deployment strategies and feature releases? How does responsive thinking make our own businesses stronger?
So I’m the guy that asks a bunch of annoying questions and then bails. Before I do, let me reiterate for clarity. I believe much of the thinking on responsive design has been absolutely brilliant. It is Big Think at it’s finest. I love the questions and I love the discussion. Since then, we’ve become enamored with the output and not the process. Hopefully, I’ll be back soon with answers or more likely questions.
Great points Reid! There’s a vast gap between ‘responsive’ and “Responsive”… I do a lot of ‘responsive’ stuff lately… but then again, I’m also designing WordPress themes without any specific content/user in mind. ‘Responsive’ with a big R takes a LOT more work, planning, and critical thinking to get right; And even then, it’s not the right solution all of the time – Dedicated Mobile sites/apps designed just for mobile, factoring in filesize, server load, etc. will always trump a Responsive design that attempts to load everything that the full site does, just in a more palatable format… it’s just not particularly efficient or practical when a new screen resolution gets released for mobile every 3 months. Still, ‘responsive’ design is a step in the right direction if the alternative is a completely rigid site layout that only looks good on a traditional monitor. You nailed it though when you say that we need to really remember the big picture stuff (Design with a big D) before getting all caught up in thinking we’ve invented the wheel with a stupid little media query.
You are certainly right on the money. In particular, I’m reacting a pattern that I’m noticing when speaking to clients. I ask, “What do you think about mobile users?” They reply, “Can’t we just make it responsive or something?” It’s that particular mindset that gets my cheese all moldy. It’s that same half baked position that would give us design feedback like “make it all web 2.0y.”
The critique of any approach is only useful when couched in the context with which it was implemented. Budgets, schedules, and a myriad of other unseen forces will play into any project. Responsive design could very well be the correct approach given a set of circumstances. My hope is that we can use that tool in our box after we’ve tried to answer the question “what do our users need at this particular time and place?” and to effect make our entire design process more Responsive.
I haven’t done a whole lot of responsive design yet, but one thing I’m glad for is that it has allowed me to talk about context when I talk about content. I’ve been able to be more specific in my requests for content that the content owner think about context as well.
“I know you want 15 paragraphs of intro text on your welcome page, but think about the person browsing your site on a mobile device or tablet…”
At the very least, it has been a motivating factor for content owners to be more concise and thoughtful before sending me a 1200 word missive about why you should “click here.”
As with most new layers of technology, we have to look over the top of the hype and see big picture. But I’m glad I’ve been able to leverage the excitement to focus people I work with to think about the user experience more than in the past.
P.S. – No dates on your articles or comments? I’m not sure whether I’m late to this article or not. My initial instinct was to assume this might be too old and I shouldn’t comment.
That’s fantastic if it promotes people to be thinking about context. My experience has been that it removes the question of context from the discussion. “oh, we’ll make it responsive. no biggie.” Diving into it, I’m finding that responsive technology is actually pretty unremarkable (not a criticism) – Responsive Design is a paradigm shift. It (ideally) makes the starting point “lets think about context.” Whether you end up with one piece of code, or device specific code seems like a question that gets answered in process.
I often forget that the web dev/design community is still really young. As a whole, we’re still struggling to find a way to talk about growth. We also have a burgeoning market of conferences, and new school educators – with that comes a certain voice that tends to make me crazy. That voice focuses on ‘rules’ and ignores ‘process’.
Mark Boulton just published a brilliant post about the role of content in the design process. Definitely worth reading. Not only is it smart, it acknowledges how murky things actually are. Structure First Content Always
P.S. Honestly, i’m not sure if lack of dates was intentional or simply an oversite, but any comment from you Rob is always valuable.
Thank you, Reid!
I think it’s probably because I live in the higher-ed world, where we are notoriously a few years behind in technology (but we have a meeting scheduled to fix that
. I can use the responsive movement to frame the discussion without necessarily needing to commit to the “new rules” created by the movement. Higher-ed’s glacial pace of adoption means I can let the dust settle on the initial hype before acting on the fundamental changes the movement is promoting.