How and why to make your website 'Mobile-Friendly'

It's a fact that there are now more mobile devices than people worldwide!
A few years ago, the Internet was shaken by what digital marketers dubbed 'Mobilegeddon'. This term arose when Google announced it would modify its algorithm to favour mobile-friendly sites.

Sites that previously had performed well in search completely fell off Google search engine results page (SERP) because their sites were not mobile-friendly. Mobilegeddon was Google's way of acknowledging that Internet users are unequivocally going mobile.

After all, in the past five years, mobile use has grown nearly 400%, and almost 20% of users between the ages of 18-34 spend all of their online time on a mobile device. In 2012, 67% of people said they were more likely to purchase when visiting a mobile-friendly site, but 61% said they would bounce off a site if the mobile experience were poor.

Providing potential customers with a positive mobile experience could be the difference between making the sale. The reality of all this mobile activity is that today's businesses must have a professional, user-friendly website that looks good and functions well across an extensive range of mobile devices.

How do I know if my website is mobile-friendly?

Well, firstly, test your website on a mobile device! If you need to "pinch and zoom" to use the website or if buttons / clickable elements are too small or too close together, then the chances are your website will not be listed as 'mobile friendly'. Users find this a frustrating experience and are likely to abandon the site. As a result, Google will demote your website in the listings if it feels another website will offer a better experience.

Can I test if my website is mobile-friendly?

Yes – Google, Bing and other search engines have developed tools which allow you to enter your website URL to check (in real-time) how well your website performs on a mobile device.

Google Check: https://search.google.com/test/mobile-friendly
Bing Check: https://www.bing.com/webmaster/tools/mobile-friendliness

The example above shows how the www.rtecshop.com website we built previously didn't pass the mobile-friendly test, but it has now been rebuilt to ensure it will pass and will now be included in the results of mobile searches. I.e. the menu/navigation collapses and the content re-shuffles on the page to accommodate the new viewport. This website is responsive, but there are two choices: responsive or adaptive web design.

Responsive vs. Adaptive Web Design

Responsive web design is pretty much what it sounds like - a website design that responds to the device and size of the screen it's being viewed on.
On the other hand, adaptive web design is the creation of different website designs for each type of device. Adaptive websites identify the user's device and adjust the website to provide the best outcome for the user. The graphic below provides a visual representation:



Adaptive designs are technically more complex and, thus, tend to be more expensive than responsive designs. However, adaptive sites are known for their ability to offer the optimal experience for each individual with the optimal strategy for each device.

How do I start?

The work involved in making a mobile-friendly site can depend on your developer resources, business model, and expertise. For an example of how a desktop site might be redesigned to work on mobile, the following diagram displays how the "wheels page" (on www.rtecshop.com) displays on both a computer and a mobile device.

On a fundamental implementation level, transitioning an existing desktop site to a mobile entails using existing content sections from the desktop site and organizing them in a mobile-friendly design pattern.
For more information on the technical implementation of a mobile site, we recommend heading over to the Google Mobile SEO page here: https://developers.google.com/search/mobile-sites/mobile-seo/ - however, our team are happy to provide a quote to convert a website to a mobile-friendly website. Don't consider creating a mobile-friendly site a challenge - see it as an opportunity for your business.

Further reading

Google Developers - Building a site for mobile devices:
https://developers.google.com/search/mobile-sites/get-started

Google Developers - Google Mobile SEO Overview:
https://developers.google.com/search/mobile-sites/mobile-seo

Bing Mobile Friendliness Test Tool:
https://www.bing.com/webmaster/help/mobile-friendliness-test-tool-7338b34b
This also covers details surrounding: Zoom Configuration, Viewport Configuration, Factors that Determine Mobile Friendliness, Readability of Text, Content Width and Link Spacing.