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
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
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
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
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
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.