About a decade ago, almost everyone who accessed the internet used a desktop computer. Just two screen sizes accounted for 77% of all web usage in 2006.
This pattern has completely shifted. Research by mobify.com found that today, ten screen sizes – different laptops, tablets, smartphones, monitors, netbooks and web-enabled TVs – account for 77% of web usage.
Interestingly, none of the screen sizes have over 20% of market share each. Today, when designing a website, marketers must plan for all kinds of mediums accessing the web grid, from smart TVs to heavy-weight iMacs down to the cheapest Android device out there.
The solution for a digitalized planet where smartphone and tablet users expect rich and intuitive web experiences as found on desktops will be responsive mobile design.
But responsive mobile design isn’t a magic bullet. It might solve the screen-size layout problem, but there are other intrinsic problems with the responsive approach that a lot of marketers skim over.
Below are some common mistakes that could affect your responsive mobile conversion.
Mistake #1: Bloated images
Images pose a leading responsive conversion problem. Because a responsive website makes use of a single markup across devices, it’s important to ensure that only large, attractive images are served to Retina iPad displays, whilst old smartphones acquire lesser low-resolution images that will load fast.
For image-rich websites, their woes begin with mobile page speed due to size of high-res images rendered to the wrong device. In addition, the cost of the wasted bandwidth used in sending weighty images to the wrong devices is basically throwing away money.
Paul Gian, marketer at Beyond4C’s recommends the following ways for optimizing images for all screen sizes and resolutions:
- Running images through Imagemagick (back-end process) for an optimal size.
- Using Lossy Compression to completely reduce the image size while maintaining depth.
- Rendering images through multiple servers, Amazon Cloudfront CDN preferably.
With these hacks, Beyond4C’s saw a 135% increase in mobile conversion as the hacks guarantee that you can constantly send the right images to the right devices.
Mistake #2: Slow page load time
Web pages with slow loading times have a major problem because mobile users are very irritated with slow web pages. The typical U.S. retail mobile site loads in 6.9 seconds in July 2016.
But, according to the Akamai study, “40% will abandon a web page if it takes more than three seconds to load”. And “64% of shoppers who are dissatisfied with their site visit will go somewhere else to shop next time.”
Web visitors have a tendency to get aggravated if they have to wait too long to see your web content. In his book Usability Engineering, Jakob Nielsen says people can handle up to 10 seconds of load time before they leave, but even a few seconds’ delay is enough to create an unpleasant user experience.
A number of the world’s largest companies understand that site performance and placing importance on their users’ time can be a competitive advantage in the market. It’s a big part of Google’s philosophy.
And Facebook’s design team has this to say:
“We value our user’s time more than our own. We recognize faster experiences are more efficient and feel more effortless. As such, site performance is something our users should never notice. Our site should move as fast as we do.”
Mistake #3: Long forms
Nobody enjoys having to fill out long forms on desktop sites; however, this becomes even more loathsome when you have to type several details with your thumbs on mobile.
Avoid the use of long, tiresome forms that make users type a lot. Long forms do not only frustrate your users, but also hurt your conversion rates when you use them for any kind of transaction. Take for instance Expedia, who lost $12 million dollars in revenue because they were making use of an unnecessary form field that confused their users.
By reducing their form fields from four to three, HubSpot improved their conversion rates by 50%. When it comes to forms, shorter is always better, particularly on mobile.
Mistake #4: Ignoring mobile user intent
Another common mistake that hurts responsive mobile conversion is the assumption that responsive design will fix all problems. Though a responsive design takes care of many mobile UX issues, it doesn’t necessarily take user goals into consideration.
According to smartinsights.com, there’s a 270% gap between desktop and mobile conversion rates, because people get mobile websites all wrong.
On desktop computers, long titles and many words have an effect that is sometimes totally opposite to mobile devices. More text on mobile devices will hide the page and push away the user from accessing their goal, which is most of the time the call to action.
Aside the menu bar, always focus on helping your visitors to navigate your web page easily, especially the call to action buttons. When designing your site, have mobile device users in mind and make their journey through your website much simpler, targeting your conversion rate.
Conclusion
Mobile media usage is growing faster than desktop, TV, radio, and print. More people are using mobile devices to access the internet more than ever before, so, it is of the essence to design mobile sites that are simple and pleasant to use. Sites that are difficult to navigate infuriates mobile users, making them leave your sites and locate other sites.
If you don’t make your website truly mobile-friendly, your visitors won’t complete your forms, will abandon their shopping cart, leave your site, and transact business with your competitors. This of course, would go a long way to adversely affecting your conversion rate.