I’m often asked how I’ve changed my process to adapt to a world that is all about responsive web design (RWD). Short answer is, I haven’t.
A responsive process is a responsible process. RWD Presentation from 2012
Okay, that’s a bit of a lie, but it’s also true. Everything that was important before RWD is important now. I still need to understand the vision, design principles and goals for a project. Content is still king, but I pay attention to it a little earlier. Okay, a lot earlier. Designs are driven by the message or the content. Websites have always been black holes without content. A user experience vision directs the entire project so that everything ties together. I design in a way that fits and excels in the medium. Web standards and accessibility are crucial. Having a plan for deployment and the life of the site is a must. So what’s the big deal with RWD?
A website is a black hole without content.
We weren’t looking at our projects from the right perspective.
Understanding the Web
I’ve said this so many times, but the web is not fixed width. Even that statement doesn’t really get to the point. The web is a fluid medium with fluid workflows and so many outcomes.
90% of people move between devices to accomplish a goal. - Google
Think about that for a moment. Now picture a website you use frequently or your own website. When you moved from your smartphone to your tablet or laptop, was the experience delightful? Congruent? Or did it feel broken? I think we all want it to be delightful, but far too often it’s broken. The cause of this isn’t new. Technology is just at a point where it’s making it painfully obvious that our information flows from one device to another. From a website to an app. From one database to almost anything.
The old starting point
Stop me if you’ve heard this one. A company has designed a website, coded the HTML, built or themed the CMS, and is ready to launch. The only thing left to tackle is the content. Cue the the #sadtrombone.
If you work online, you work with content. Wether writing or filming it, coding or organizing it, labeling it or designing its typography, this work is about creating a digital space where content can exist and thrive—and where it’s findable, accessible, understandable, useful, and meaningful. - Sara Watchter-Boettcher
A website is a black hole without content. Hell, a web design process is a lie without thinking early and often about the content, the message, the reason people are visiting the site. People come to accomplish tasks, but it’s the content (text, video, images, etc.) that allow them to understand what’s going on. I’m not going to say we should be “content first.” I think there are too many “this thing first” approaches, but content is still king. Let’s think about the king early and often. Let the message drive the design.
Abstraction
Here’s the big difference for me when thinking about a RWD project vs. projects I tackled a few years back. Just like HTML (structure) and CSS (presentation) are abstracted from each other, so must content be abstracted from design during a web development project. I need to understand the content, its purpose and its form before I can understand how the design can best tell its story. Things like content audits, page tables and an excellent site map allow us to think about the content without locking it into a design or layout.
We (as an industry) have trained our clients to think of content in terms of layout. “Put it in the sidebar,” we say. “That should go in the footer.” Stop! Stop it. Stop. It’s not about location. It’s about priority. What is the most important content for your users? Because guess what: layout changes across contexts. There (probably) isn’t going to be a sidebar on your small-screen design.
Real content for real solutions
There has been a lot of debate around Lorem Ipsum in wireframes and design mock-ups, but if you don’t have real content in your wireframes, you’re doing it wrong. The content informs the interaction decisions and tells you when a design will break. How can Lorem Ipsum do that? This is why I insist on having real content that will live and breathe on a future web project in my wireframes. I believe in informed design thinking rather than guessing based on past experience.
For years I designed with a specific resolution in mind. It was a default setting (ahem... 960.) Whether sketching in notebooks, wireframing in OmniGraffle, working in Photoshop or designing in the browser, I knew what the canvas size was going to be, or so I believed. Those days are gone and maybe never really existed. I’m a big believer in designing for the small screen first and progressively enhancing. (I know. I said no firsts first. Give me this one, okay?) So how did I change my workflow from a fixed canvas size to a fluid one?
Abstract designs from devices at the start.
Unless I am designing for a specific device, it is essential that I stop thinking about devices and start thinking about experiences. Check out this article I wrote on responsive process for .NET Magazine on crafting experiences while being able to remain device agnostic.
It’s about understanding
I need to understand the web as a medium. That’s important, but even more important is to understand that the web is about people. People connecting to people, not machines to machines. The experiences we create for the web should connect in a personal way and a big part of that is delivering a clear message (ahem... content) to an audience in a way that works in their context. RWD is a great way to do that, but you need to think about your content and design solutions in a clear way. Allowing them to shine as a consistent message with a congruent experience that just plain works on all devices.