Mistakes to Avoid With Responsive Web Design

by Brian Rinaldi on July 2, 2014

The modern web is always changing, and this article is more than two years old.

By Ramya Raju

Nowadays, when it seems like everyone has a smartphone or tablet, the importance of creating mobile friendly websites cannot be overstated. As a result, business owners have lapped up the idea of responsive web design because it can give a complete experience to users on different platforms – from desktop computers to smartphones to tablets. Creating a website with responsive design makes sense because it works across different devices and as a result you saved money on developing different websites for different platforms.

But, to make the most out of responsive web design, there are some mistakes you need to avoid.

Don’t Design for Desktop First

One of the common mistakes people make is design a website for desktops first because they think it will be easy to turn it into a responsive design for other devices. But this mistake during the planning stage itself can become a huge issue for you. It can cause rework and errors can creep up too.

It might seem time consuming or difficult to create websites for mobile devices first. This is because it can force you to make trade-offs on what content to include and to think in a way you are not used to. However the content and design on the whole will be a lot better. As a rule of thumb you can start with smaller devices first. Once you have the right design for mobile, it can be easily adapted for bigger screens.

The Trouble with Navigation Menus

When designing for mobile, the problems with navigation design can become the bane of your existence and have to be avoided. Unlike fixed width designs, navigation for responsive design should be done according to the device type (so your smartphone navigation may differ from your tablet navigation and still differ from the desktop navigation).

Many designers find themselves overwhelmed by task of trying to create a navigation menu that works across all screens. In many cases designers struggle to convert horizontal list menus to vertical list menus, especially to fit smaller mobile screens. However, since the navigation menu is not designed according to the screen, it can create a poor user experience.

See Also:  Microservices Series #1: Microservices are software components that work

Content Shouldn’t be Hidden

Responsive designs generally have less space for pictures and content but that doesn’t mean your content should be neglected. You will have to re-arrange it in a way that it can be read easily. You can easily do that by creating navigation links using anchors that can lead users to the content they have been looking for on the page. Those who hide content using CSS need to realize that the content still gets downloaded, hence you have nothing to lose by giving users a complete viewing experience. Quite simply, users should not be penalized for the device they use.

Separate Mobile URLs

Having a separate URL for your mobile site can be a complete disaster and, arguably, defeats the whole purpose of a responsive design in the first place. Users end up wasting precious time as they are redirected from the website to its mobile version. Moreover it can seriously hurt your search engine rankings too. But, of course, there are some benefits to having different URLs. It ensures that you can construct mobile sites with lighter pages that perform better on smart devices. The site will be more catered for viewing on specific platforms as well. Unfortunately, the negatives of having separate mobile URLs outweigh the positives.

Creating Poor Mobile UX

You cannot simply compress content meant for desktop into a mobile version; doing that will affect the viewing experience for your users, who will be put off. It is important that you create an appropriate user interface to work within the constraints of space of mobiles. You can use strategies such as using dropdown menus in place of navigation bars that are used in desktop versions as this will save you space. If you design for mobile first, this usually isn’t an issue.

Don’t Disregard Cross-contextual Conventions

When you are working on responsive design, you can’t just think of desktops and mobile devices because there are many other devices that have to be factored in. People may be visiting your site from Internet-enabled smart TV’s or set top boxes that contain a brower. Even tablets come in a wide array of form factors nowadays. But that doesn’t mean you have to create an indigenous user interface for all devices – you would be better off creating different websites. What you can do is create responsive navigation that keeps the context of the device in mind and creates a design that’s easily understandable to users.

See Also:  Microservices Series #4: Beware the monolith

Don’t Ignore Page Load Times

With the pervasive access to broadband on desktops, web developers have gotten used to including relatively large resources on their web pages. However, when dealing with mobile, our users may often be on slow and limited 2G and 3G connections. Also keep in minf international users who often have to pay based on the amount of bandwidth they use.

The point is, even though a page may load easily on a desktop, it could potentially take a long time on mobile devices or use excessive, and pricey, bandwidth. To makes matters worse, when users are forced to wait, even if only for a few seconds, on their device for a site to load, they will often leave the page and thus you will lose your mobile traffic.

Not developing for Touchscreen devices

Most handheld devices today use a touchscreen. Even many laptops are now coming touch-enabled. Hence it’s important that when you are creating a responsive design that you don’t overlook the importance of handling touch. There are two aspects to this: the first is that clickable items, such as buttons, take into account the size of a user’s finger (don’t make the user have to zoom to click); the second is that you properly handle touch events (doing so can also overcome the 300ms delay for click events that still exists on some devices).

Conclusion

These are few simple mistakes that often happen because of oversight. If you manage to steer clear of them you will ensure that your responsive design works well across all types of devices and makes its mark.