2014_06_06_featured Design

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

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.


(Source: emarketed.net)

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.


(Source: memgenerator.net)

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.


(Source: frabz.com)

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.


(Source: contentplus.co.uk)

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.


*(Source: searchengineland.com)

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.


(Source: sarnari.net)

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.


(Source: [bloggodown.com](http://bloggodown.com))

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.


(Source: weirdexistence.com)

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!

6 comments

  1. Patricia

    15 points mentioned in this page is really impressive and helpful for everyone who are developing the webpages. Thanks for sharing these information with us.

  2. Andrew Smith

    Thank you Patricia.

  3. Kenjiro

    One of the biggest problems with responsive webdesign is the lack of creativity. Take THEME FOREST for exemple where all themes looks much same, they’re all same style

    RESPONSIVE WEB DESIGN cost more but provide a very basic design style that becomes mediocre and repetitive. It takes more time to build a site, design styles are very limited restricted to the fluid style.
    It’s running slow, eats CPU and memory. The old Adobe Flash Design
    style was far, far superior with much more advantages and with more possibilities than the restrictive fluid style.

    Responsive Web Design – Is it really worth the effort ?
    Responsive Web Design – Does it really represent a progress in the design industry ? What is the middle way ?
    No, No We’re not stack in the past as long as that is not relevant for the present !

  4. Andrew Smith

    I understand your thought, Kenjiro. But still I think it’s a matter of taste, I personally like the look of responsive web site. And I believe it is the optimal solution to use in era of great variety of devices. As to the lack of creativity, this may be true, but here we come to prioritization question – whether web designers need this freedom to act or they should try to provide users with the best experience sacrificing their art ambitions.

  5. Ronald Dunkan

    Hello Andrew Smith…
    Great Post and here some issue is help for new web designer so recommended for all issue one time read and create attractive web design. thanks for sharing this post.

  6. Niki Singh

    Thanks for such a great post. When I create websites some of my clients don’t want to see a different version of their website (ie mobile responsive design) on mobile devices. They want their desktop version to get loaded on a mobile device. Reason being the hiding of some important sections of the website. Most of the clients are also complaining about the Hamburger menu, as according to them the hamburger menu icon is not easy to understand as a navigation menu. So I totally agree with you, “It’s a matter of taste”.

Leave a Reply

Your email address will not be published. Required fields are marked *