Watch a Demo

Responsive Design Is Not Enough: 4 Steps to Make a Mobile Website Successful

| February 18, 2014
Sign up to get bi-weekly insights and best practices, and receive your free CX Industry Report.
Thank you!

Get ready for some great content coming to your inbox from the team at UserTesting!


When I talk about mobile with web companies and designers, I often hear statements like, “We’ve done a responsive design, so mobile is all taken care of.”

If only it were that simple.

Responsive design is wonderful, and it’s probably the only practical way to deal with the ongoing proliferation of screen sizes and resolutions in the mobile world. But it’s a technique, not a solution.

Saying responsive design solves your mobile problems is like saying that owning a hammer enables you to build a house.

Most discussion of responsive design is focused on the details of how to do it: prototyping rather than using static designs, navigation strategy, icon fonts, and so on. In other words, we focus on how to use the hammer. James Young’s article on Creative Bloq is a great example.

But there’s a deeper discussion we need to have about what we’re building with that hammer. Reformatting a computer-centric website to look good on mobile is often not enough to make it work well.

Usage patterns and user expectations are different in the mobile world than they are on the desktop.

Smartphone users are often in quick-response mode, impatient and easily distracted by other things happening around them. Tablets are often used at home while the user is in a comfy chair or in front of the television: a more leisurely setting, but one in which you may be competing with TV shows and movies designed to suck in the viewer’s attention.

A website designed for the personal computer won’t necessarily deliver on the user’s needs in a mobile device, even if it’s been reformatted. You need to understand how people will use your site on tablets and smartphones, and then design to enable those usages. Rather than reformatting, you may well need to rethink the site’s core functionality so you can deliver optimal experiences on computer, smartphone, and tablet.

Here are some pointers on what to do:

1. Create usage scenarios.

What tasks are your users trying to accomplish on each class of mobile device? Which ones are most important? Do they need to do something on mobile that can’t be done at all on the desktop? Are there mobile features you should take advantage of (location, for example)?

2. Pay attention to what you’ve cut out.

Most successful computer websites have been lovingly optimized so that all of the elements on the page work together to delight the user. Responsive designs usually toss aside some of those elements to fit onto a smaller screen. This can leave users bewildered when they can’t find all of the functions they expect. Think about how the user will accomplish the task at hand, and how they can discover functions that are no longer visible. You may need a help function or a site menu that’s not required on your computer site.

 3. Think very carefully about icons and usage flow.

We sometimes see mobile web designs that imitate look and usage flow of either iOS or Android. Unless you’re prepared to serve different versions to each operating system, that’s a mistake. You need a neutral design that will be understood easily by people on either platform. For example, you should avoid icon designs that have conflicting meanings on the two platforms. Better yet, label the icons with text so there’s no confusion.

4. Involve users in the design process early.

The move away from static designs to wireframes and prototypes is an opportunity. You can do user tests of the prototypes to get early feedback, while it’s still easy to change the site’s flow and functions. Validate the scenarios you created in step one. It can save you from a huge amount of rework at the end of the development process.

Ready to learn more?

    For more on how to make your mobile website match the needs of mobile users, check out our eBook, The Four Mobile Traps.