15 Responsive Web Design Issues You Don’t Want to Deal With


Andrew Smith

June 10, 2014

Back to Resources

Responsive web design is not only about pretty layouts and fashionable templates. Your utmost goal is to provide users with a uniform user experience across all devices. Creating independent experiences for each just doesn’t pay off – they’re too resource intensive. The focus should be on creating adaptive experiences, which scale to the user.

Here are the main mistakes you want to avoid in order to accomplish your goal safely and effectively.

1. Hiding your content from users

Responsive sites sharing the same code base have a great chance to reach content parity. Unfortunately some site owners decide to hide or remove content when dealing with the real-estate constraints of small screens. This isn’t a great idea. You shouldn’t punish users for browsing on smaller screens. Instead, do everything you can to let these users enjoy the maximum functionality of your website.

2. Ignoring contextual conventions

Since each device operates with its own form factor, constraints, interface conventions and opportunities, we must take all of these into consideration when creating natural-feeling experiences. Try to grab the personal factor of device usage (mind the way people hold the device, which icons they expect, etc.). Sympathy to both the user and device will show you the way. Reaching these goals can be easier with certain tools for building your responsive web design effectively.


3. Utilizing too many JS libraries

Ever seen an online menu which took 20 JavaScript libraries to display? No doubt it’ll look amazing on desktops, but to mobile users loading these may seem like an eternity. Ensure you are aware of how many requests are made and how large these libraries are. If you have the opportunity, try using CDNs for regular libraries instead.

4. Assuming it’s all about the layout

Mobile isn’t just about small screens and the right layout. Mobile context unlocks many new uses, patterns and possibilities for web designers. Stop presuming you’ve finished right after the layout is ready. Leverage all things the device is capable of and base your user experience on mobile facilities such as initiating phone calls, using user location, and more.

5. Displaying too much content at once

Suppose you’ve decided to deliver the full user experience to your customers regardless of context. Now your site has a whole lot of different stuff to load which takes time and makes users even more irritated. You should know that most mobile users leave sites after just 5 seconds without proper response – which means your mobile version of the site should be just as great, but much lighter, than the desktop one. You should remember that you don’t have too much time to catch users’ attention.


6. Relying much on device dimensions

The harsh reality is we can control neither what browser sizes our visitors use, nor what dimensions the creators design for their devices. This drives us towards the solution which would make our designs hold together regardless of the device dimensions. Let your content determine its breakpoints in your responsive design itself to ensure it looks great in any landscape.

7. Over resourcing your site

Imagine what happens to your responsive site when it needs to load 80 resources before it renders? Of course, it slows down. Now imagine how it affects your conversion rates on mobile… Improve the performance of your responsive site by ensuring only the most valuable resources are sent to your visitors’ tablets, desktops and smartphones. Make sure you know how to compress and concatenate your CSS and JavaScript resources with tools such as SASS and Uglify.


8. Faking your great design to make it responsive

Squeezing your beautiful website design into a responsive framework which works on all browsers, though degrades in older ones is both complicated and expensive. Instead of manipulating your existing design, try rebuilding your site from scratch – which is cheaper and easier in most cases. Another option is to use adaptive templates instead of a single responsive design. These will let you break up your design into several responsive templates targeted to different sizes and resolutions of the screen.


9. Design for desktop in the first place

Though you may assume building the desktop site then translating its content into a mobile-friendly web design is easier, it may actually be better to start with mobile. This way you ensure all the correct and valuable content is included on your mobile site and the designer will have less re-work to do later.

10. Bloating your images

The major issue with responsive web design is usually images. With a single markup used by a responsive website across devices, it’s rather a challenge to serve beautiful images to Retina displays and smaller low-resolution images loading quickly on old smartphones at a time. Luckily, there are solutions for dynamic image optimization across different sizes and resolutions. One of them is Adaptive Images.


11. Creating a separate URL for your mobile copy

This is a debatable one. On the one hand, a separate URL allows you to construct your mobile site with smaller pages that ensure better performance and are more device-friendly visually. On the other, redirecting to the mobile version wastes precious seconds and may be detrimental to your site’s SEO. Decide on your priorities and choose what seems right for you.


12. Slurring your navigation

Instead of forcing mobile users into the vague ‘meat’ navigation where they’d wonder what they‘re going to end up with, or overloading your site navigation with text (both of which no doubt look fine on computer screens), it’s better to give visitors some clear visual views about what your clickable buttons do and where they lead them.


13. Abusing touch targets

While these are perfectly that unique feature of handheld devices, you should consider two things before indulging in touch targets on your responsive site. First, human fingers are not as precise as mouse clicks. Second, there are situations when your customers can’t easily hit the target at once. That’s why you should make sure your touch targets are at least 44px square and there are few of them on your site.

14. Dismissing touch

Some abuse touch, some just plain forget about it. Remember about mistake #3? If you’re making a site for mobiles, think in the mobile context. Make sure your navigational links on mobile devices are simpler, bigger and pushed on touch screen easier.


15. ‘Slamming the door’ on your users

Whilst most website visitors across devices are definitely not very enthusiastic about those full-page ads leading them anywhere but where they wanted to go, unsophisticated mobile users are even more likely to get confused by such an ad and leave your site immediately. Remember there are some UI issues for novice users to take to consideration to make their experience on your site more pleasant. So you best never slam the door on people. Instead, keep the door open to your website users to show them you treasure user experience over business purposes.

Closing Words

In the business of creating adaptive experiences there is still place for experiments and mistakes since we are just at the tip of a big iceberg. Don’t be afraid of the pitfalls I mentioned and keep moving forward towards better responsive design ideas and solutions.

Have you run into some other mistakes or problems in responsive web design? Please share your ideas!

Subscribe for the lastest CX content

Copyright © 1999-2021 Momentive|888-684-8821|Privacy notice|California privacy notice|Terms of use|Cookie policy

*Net Promoter, Net Promoter System, Net Promoter Score, NPS and the NPS-related emoticons are registered trademarks of Bain & Company, Inc., Fred Reichheld and Satmetrix Systems, Inc.