Designing for the Future Means Letting Go of the Past

Responsive web design has changed the way we approach websites. It’s mainstream enough that most 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 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.
  • 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.