Responsive web design is changing the way we approach websites. It’s mainstream enough that most B2B clients have an idea what is. Ask them to explain a responsive website and they may say “it’s a site that works on the desktop and mobile phones.” The more technical ones may mention flexible layouts and media queries.  Tell a client who is unfamiliar with responsive web design that it will make the company’s one B2B website accessible across a range of devices, and a likely reaction is, “Sounds good. Give me one of those.”

Although responsive web design is not the right answer for every website project (it still depends on your goals), in many cases it is the best way to go.  But when clients and agencies agree that they want their new site to be responsive, they think about the end deliverable. (Look! I can resize my browser and the website layout responds. Real users don’t do this btw.) They often don’t consider how it impacts the design and development process.

People can understand what responsive web design is and agree that it is the best way to approach a website, but when it comes to actually doing the work differently, they aren't ready.  Because responsive web design isn’t just a new end product. It’s a new conceptual beginning, workflow, and way of thinking. It’s a philosophical approach as much as a design.

The website design process: Change how you work and think before you change your site

The first thing you need to change is your mindset. Let go of counterproductive thoughts and behaviors from the desktop days. If you are agreeing to responsive web design, you are not just agreeing to change the way a website is built. You are agreeing to change how you work and think long before you ever build it.  Follow these tips to get started.

How to approach responsive design

• Content comes first.  Content is what matters and where it all begins. Determine the important content components and features you need to include for your users and business goals. 
• Start small. A small mobile screen forces you to focus on what matters most.  (There are enough blog posts about mobile first. Watch Luke W’s video.)   
• Define the value of the content or dump it. When you start small you’ll find there’s no room for interface clutter.  
• Learn to sketch.  (I don’t care if you can’t draw. Lines, shapes, and labels are all you need.) And do it with other people in small teams.
• Talk and collaborate. Challenge approaches. Discuss how interface and text elements will adapt across devices and sizes.
• No design comps. Forget those picture perfect mockups. Use style tiles to convey the visual essence of the design.
• Make it flexible. Everything about the design should be flexible and fluid. (Images, grids, intelligent markup.)
• Prototype fast – get it on the devices and in front of users as soon as possible.
• Iterate. Which is why you need to... (next bullet, please)
• Make mistakes. Trust me, it’s a good thing. 
• Iterate. And again. It's making your design better.
• Stop agonizing over small differences. Alignment, rendering, it will look different in some viewports. Get over it.
• You can’t plan and test for everything. (And there are no perfect breaking points.) No matter how much data you have on screen sizes and pixel densities, there will always be a device that won’t look quite right. There’s always one that gets away. 
• Accept the loss of control. Get over it. You never really had it with the web anyway. 

The future is filled with a myriad of displays and devices. Responsive web design is a great way to design websites for this future--but only if you let go of how you approached web design in the past.

Related Posts

- A Primer on Responsive Design, UX Magazine
- Responsive Web Design: One Website Solution for Many Mobile Options
- The Cost to Build A Mobile App--Is the Price Right?
- Your Mobile Design Isn't Working--Here's How I Know