Responsive design mistakes—and how to fix them

Responsive design is a pain to learn, but it’s an important pain to learn. We’re no longer stuck in Web 2.0 with slow modems and limited desk space. We’re now creatures of screens—scrambling to buy, build, and learn everywhere and anywhere.

At Brotherhood Design, we’ve made a few mistakes learning the subtle nuances of responsive design. And that’s a great thing: if we hadn’t made those mistakes, our responsive designs would still suck.

So rather than watching you struggle—or, worse, repeatedly hit your head against a pixel wall—we’d like to share a few mistakes we’ve made over the years and the simple solutions to fix them.

The copy is too hard to read

It’s amazing how easy it is to make a few simple sizing mistakes, rendering a once beautiful website (or web app) into a microscopic or gigantic version of its former self.

Buttons, headings, and copy can easily be skewed depending on countless variables. So keep in mind the following when you’re working on sizing:

1. What’s important?

If you’re a designing a blog that gets (or will get) huge amounts of traffic, headings and copy need to be clear and easy to read. Not too big and not too small, otherwise users will end up scrolling endlessly—or needing a magnifying glass.

Equally, if you’re designing for an ecommerce site, make sure the product—and in most cases the prices—are easily digestible. If either of those are all over the place, you’re creating friction that’ll inadvertently affect sales. No one wants to find something they love (and will part with money for) only to realize they can’t see the price, or that the add to basket button disappeared in the media query.

2. Buttons and call to actions (CTAs)
As users buy and take action from mobiles and tablets, your responsive designs need to reflect the page and website goals. This can be tricky, as there’s a fine line between overwhelming users with CTAs and enabling a clean user experience.

If something works on desktop but falls short responsively, don’t be scared to deviate from the wireframe slightly. After all, it’s more so about what’s important and hitting those goals than it is to make sure it’s all crammed together.

Solutions:
Testing and mirroring is an absolute necessity when designing responsively. Never assume that just because something looks nice in Photoshop, Illustrator, or Sketch, that it’ll look amazing on a responsive device. Don’t get attached to your designs until you test them.

Pages take too long to load

Heavy imagery and videos slow down websites.

This becomes a problem on mobile devices used on the move. If your responsive designs are unnecessarily image/video heavy, then you’re going to need a user to commit more data (and time) to view your site.

Something to remember: users need convenience when mobile browsing. If sites are slow, then just like on desktop, users will bounce and search engines will look at your site unfavorably when indexing it.

Down the line, this’ll cause a myriad of problems for developers and marketers alike, so it’s best to avoid creating “slow design.”

Solutions:

Again, this is fairly dependent on what’s important on your site. Remove unnecessary images or videos that don’t add value on a responsive site.

ZenDesk does a nice job of this. Their desktop site has an engaging homepage animation. It’s not present on their mobile site, yet it doesn’t detract from the core value of the page either.

Ask yourself:

• What’s the purpose and what are the goals of the site?
• Will an additional image really be necessary?

The design kills the functionality

This mistake makes us cringe. Losing functionality through responsive design is a massive no. Clients and users won’t forgive you for it—at least not for a while.

There’s nothing more infuriating for a user to either:

• Have had a great impression of your desktop site, then hate the loss of functionality on your mobile site
• Be a new user on your site, notice the functionality is poor on devices, and then never come back (they might even tell their friends about it)

An example: the loss of the pinch and zoom feature on mobile. On a desktop, you can zoom in on information, easily adjust text size, and find a happy medium for readability. For folks with poor vision, or those desperate to look at some smaller information, the lack of a pinch and zoom feature is real buzzkill.

Solution:

Don’t leave functionality like this up to a developer. If you’re a text-heavy website or you know your designs are going to hit an audience where functionality is key, include an obvious screen or a prototype.

Remember: unless you put your ideas on a page in front of someone, they’re still your ideas. People aren’t mind readers.

You don’t understand our users

Don’t assume developers can just pick up a generic responsive design and create a perfect solution. It’s just not fair.

It’s why, as designers, we need to consider who’s using our designs as well as where, when, and how.

Here’s where persona marketing comes in handy. If you don’t have a marketer or a marketing department on hand, creating a brief persona document will help get your head around a few burning questions in your design work.

Information to include when creating a persona:

• Name: always give personas names (“Designer Dan,” for example)—it makes the process more human
• Image: faces make the process easier and more personal
• Profession: what does this person do for a living? Different professions prefer different devices.
• Location: if the main user base is in Brazil, they’re likely to use different devices than people in Japan
• Browsing habits: how and where do they browse? Are they likely to have a tablet on the sofa or be on a laptop at a desk?
• Goals: what are their goals and how would they try to get there?
• Challenges: what are their challenges in life and how would they try to solve these?

Solution:

Use persona marketing to learn more about your end users. The more you know, the easier it’ll be to decide which responsive design variations you should prioritize.

It’ll also help you get past the “one size fits all” responsive design barrier. Both your end users and your developers will thank you.

With persona marketing, go as in depth as you need to.

Takeaways

If there’s only one thing you take away from this article, make sure it’s this: you need to think about your designs.

Now, we usually wouldn’t recommend overthinking anything. But with design work, a meticulous thought process leads to great responsive designs.