5 Most Common Responsive Design Mistakes

The most common ways we access websites have radically changed over the last few years – Mobify reports (1) that today, as many as eight screen sizes account for 77% of web usage.

Be it laptops, netbooks, smartphones, tablets, web-enabled TV or desktop monitors, websites should look good and provide easy navigation for its users – and that’s where responsive web design comes in. Like with every other new solution, there are still a lot of mistakes being made around – find out what are the five most common responsive design mistakes and learn how to avoid them.

Hidden Content :: Responsive Design Mistakes #01

When designing our responsive website, it’s wrong to assume that users who access the site from mobile devices will expect to see it in its simplified, ‘lite’ version. According to Google (2), 90% of web user’s move across various devices to achieve their goals – limiting their experience in responsive design is a vital mistake.

That doesn’t mean that the site should be an exact copy of the one designed for desktop. Developers must look for efficient compromises to ensure that all the content is there, possibly re-arranged to fit a different screen, and that navigation is easy.

Surplus of Resources :: Responsive Design Mistakes #02

In one of their analyses, Mobify concluded that e-commerce websites use about 87 resources.
Loading all these resources takes a lot of time and that’s what every developer should avoid – a study demonstrated (3) that an extra second of waiting causes conversion rates to drop by 3.5%. Three seconds of waiting have a dire consequence – 57% of users were reported to leave the website after that time.

How to deal with it? Basically, by ensuring that each device receives only the resources it requires to load the web page. To put it simply, smartphones, tablets and desktops should each get a different set of resources. Have a look around the web – there are many tools for compressing and concatenating CSS and JavaScript resources, such as SASS or Uglify.

Desktop-Oriented Design :: Responsive Design Mistakes #03

Another common mistake is to design for desktop first and then translate the design into the responsive environment. This won’t work – you better prepare for content loss and a variety of navigational problems.

Instead, try to tackle the questions backwards and design the mobile version first. This might solve the problem, but there’s another solution to this issue as well. Sketch a thorough plan that you will follow when developing the site – this plan will be valid for every version of the site. It should define its structure, outline its navigation and prioritize its content.

Heavy Images :: Responsive Design Mistakes #04

This is a problem every web developer faces at some point. Images should be optimized for various screen sizes and resolutions – a user with an iPad Retina screen should see different quality images than someone who browses the website on an older smartphone. Responsive websites use a single markup across the devices, so how can developers make sure that right images are sent to right devices?

Mind you, it’s a serious question – heavy images affect page performance and, eventually, its conversion rate. If you don’t want to risk losing on page performance, have a look around the web – there are many solutions (4) that can deal with this problem for you.

Forgotten Touch :: Responsive Design Mistakes #05

Finally, developers shouldn’t forget that responsive design is based on touch – and touch is radically different form mouse navigation. For one, it’s much less precise and more prone to mistakes. That’s why all clickable content must be of the right size – Apple suggests (5) 44 pixels.

Moreover, links and buttons shouldn’t be placed too close to each other – otherwise, you’ll at some point face the annoyance of users who struggle to click the right button.

Final point:

Testing, testing, and testing. A project in development needs to be constantly tested during the process, not at the very end of it. This allows to spot and solve some mistakes, saving the overall time (and budget) of the project.

Article Reference:

This article is written by Monique Rivers. She is an Australian tech blogger who also loves good food and fashion. She works at Ninefold, a Ruby on Rails platforms that allows you to deploy Rails apps quickly and easily.