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