10 Responsive Web Design Mistakes & How to Avoid Them

Responsive web design is a tough pill to swallow for any business, but it’s a crucial pill to swallow to ensure your sustainability. We no longer belong to a world where low mobile data speed and limited disk space are a constraint. We now belong to a feed driven world where users want to do things ‘on the go’.

The key to a killer responsive web design is to commit mistakes, this will help you in learning the subtle nuances of responsive design. I hope you’d have come across the saying “Making mistakes is better than faking perfection” but the key takeaway here is to make new mistakes.

So rather than watching you repeatedly hit your head against a pixel wall, I’d like to share a few mistakes we all make and how simply we can solve them.

#1. Web pages take too long to load

Lots of images and videos will slow down your website.

Mobile users need convenience when they are browsing. If the site is slow, then they’ll just bounce and search engines will degrade your website while indexing.

Urban Tree Infrastructures have done a good job at this. There mobile site doesn’t detract from offering their core values to the visitors, while offering smooth UX.

Solution:

• Remove unnecessary media that doesn’t add any value to your website.
• Think about the end objective while designing the website.

#2. Not knowing your buyer persona

As a designer it is your duty to consider who is using your website as well as when, how & where.

Here’s where understanding your buyer persona becomes crucial. Having a complete understanding of your buyer persona will help answer a few burning questions about your design.

Solution:

• Learn more about your end users.
• Get over the “One-size-fits-all” design barrier.

#3. Failing to design for gestures

Different devices allow for different input methods.

Failing to design for touch functionality is a common mistake made by designers nowadays.

Solution:

• Create navigation that works well with common hand gestures like touch/gestures.
• A suggested spacing of minimum 23 pixels should be placed between different items to avoid interfacing errors.
• Ensure that the CTA buttons are adequately sized.

#4. Not doing A/B testing

What works well in one device may not always hold up on other devices. So, prior to taking your website live it is recommended to test it on multiple devices to uncover general UX issues and sort them out.

Running short on time and budget for user testing is usual. But testing the website on multiple devices will at least help you doubt your development decisions.

Solution:

• It is recommended to run your site through Google’s Mobile Friendly Test to identify potential UX issues.

#5. Linking to Non-mobile friendly sites

The problem with responsive design arises when your mobile device agnostic web site links to other non-responsive website. In such cases, you may want to look for an alternate responsive source to link to.

Solution:

• If you’re linking to an external source it is recommended to provide the user with a consistent responsive experience.

#6. Designing for devices instead of screens.

Using screen size for responsive design instead of device classification is astute as many devices are gradually emerging out of their categories.

Some phones now are as big as a table and some desktop manufacturers are rivaling the size of televisions.

Solution:

• Use only screen size (Micro-screens, Small screens, Mid-range, Large, Extra-large) for responsive breakpoints.

#7. Buttons and CTAs:

For users to take action from mobile devices, your design should reflect the website goals. There’s a thin line between enabling a clean UX and overwhelming users with CTAs.

Something working well in desktop may fall short responsively.

Lokaa Developer have nailed their buttons, sizing, and page goals.

Solution:

• Know what is important and hit those goals.
• Never get attached to your designs until you test them.

#8. Hiding content

Hiding content while designing a layout for mobile devices will only make your web page slower. The content will be loaded regardless.

Solution:

Build a clean layout which will omit unnecessary content. Your website will load even faster.

#9. Consistent navigation.

Never insist on consistent navigation across the different layouts of a responsive site as different screen sizes and devices require different types of navigation.

Solution:

• Consistency should be ensured in: Link or button labels, Typefaces, Colour treatments.
• Consistency should not be maintained in: Button size, Visual layout, How the navigation works.

#10. Making the copy too hard to read

A few simple sizing mistakes will render the website into a colossal or negligible version of it’s former self. The elements of a website can be easily skewed due to various reasons.

Solution:

• Ensure that the headings or copies are clear & easy to read. Neither too big nor too small.
• In case if you are designing an e-commerce site, ensure that both the products and it’s prices are easily digestible.

A meticulous thought process is vital for creating great responsive designs. Responsive design is essential, ensure you do it rightly.

This article was written by Santhana Krishnan Indrakumar, Social Media Marketer @ echoVME.