Responsive web design is constantly evolving, mainly due to the fact that it provides a better user experience – a factor all web developers need to include in their work.
Improving user experience is the general aim of a good, adjustable layout that helps to easily navigate from each and every potential device.
Even though some brush it off as a passing trend, we believe that it holds a great promise as long as it’s adopted correctly.
Here are some most common mistakes made in responsive web design.
Too Many Resources
Mobify did an analysis for top 15 e-commerce vendors and found out that an average website used about 87 resources that were in total 1.9 MB of data. That’s a lot, isn’t it? Any responsive site will lose a lot of time loading 87 resources. Evidence shows that long loading time can have dire consequences – with an extra second of waiting, conversion rates drop by 3.5%, with 3 seconds of waiting – more than a half of users will leave the website.
To avoid this problem and mistake, you’ll need to make sure that each device receives those resources that are only necessary for loading the website in this particular case. CSS and JavaScript resources can be compressed with various tools – have a look around and adopt a solution that fits best.
Hiding Content
Sure, responsive design doesn’t accommodate as much content as usual, but that doesn’t mean it needs to be hidden. It should simply be re-arranged to fit the screen and offer the best user experience possible. Getting rid of navigation menus will limit the access to the information mobile users are looking for. According to Google, 90% of web users move across various devices when browsing, so assuming that users accessing mobile versions expect a ‘lite’ experience is simply wrong.
First Desktop, Then Mobile
Designing first for desktop and then handing the design over to be reworked into mobile environment is another common mistake. One design cannot be simply translated into another without any loss in content. It’s best to either first design for mobile and then desktop or adopt an altogether different approach – outline the website structure, its navigation and prioritize the content, and then use this framework to build desktop and mobile versions, improving the site’s functionality and provide a better user experience.
Forgetting the Touch
Mobile environment involves using our fingers to navigate websites – all buttons and other clickable content needs to be at least of the size of a thumb. Fingers are hardly as precise as a mouse, so the content needs to be more visible. Cramming links close together won’t help either and could be even annoying.
Bloated Images
Any responsive design developer will face this problem sooner or later – the images, or more precisely – their weight. Images need to be optimized for screen sizes and resolutions – a user browsing an image-rich website on his beautiful iPad Retina screen should see images of different quality that a person checking the website on their old smartphone.
In short, right images should be sent to right devices – otherwise, you lose on the page performance. There are many tools around to help with that, so make sure to employ one and avoid this mistake.
Leaving Testing till the End
It seems obvious, but developers still make this mistake – testing the website at the very end of the process. They face and try to fix problems with rendering the site on different devices. Testing should be a vital part of the development process – paradoxically, the development time will shrink and developers will have a chance to address their mistake or other problems before moving on to other sections of the site.