LIBERTAS
Mobile Compatibility and Touchscreen Readiness

Most mobile devices today use touchscreens for almost all functions. You will only find a few buttons on the sides, bottom and top of most devices and these are usually the power button, the volume buttons, the home button and a few others.

In fact, the major search engines, Google and Bing changed their search ranking algorithms, where mobile-friendly sites are now ranking higher. Bing actually indicates whether the site is mobile-friendly in its results:

Mobile friendly indication in Bing Results

What is a Mobile Compatible Website?

A mobile compatible site is designed specifically for mobile devices. By that, we mean it’s an HTML page that doesn’t display content using Flash or other technologies that don’t work on mobile devices.

Comparison between mobile friendly and non-mobile friendly pages

However, don’t mistake "mobile compatibility" for “mobile friendliness”.

For your users to easily have a good experience on their devices, you need to optimize your site for mobile devices.

Mobile compatible does not mean mobile friendly!

So what’s the difference between a mobile compatible site and a mobile friendly site?

A mobile compatible website has been designed for web browsers on PCs, but you can view it on a mobile device. Since it is ideally designed for large screens with more navigation options, the user will need to scroll a lot more in order to access information on the site. The text is also small, so you need to keep pinching the screen in order to make it legible.

Here are some of the features of a mobile friendly website:

  • A mobile viewport configured to display content according to the device screen.

  • Fast-loading images and other media.

  • Content optimized for mobile users, for example, shorter text and avoiding formats that don’t load in mobile browsers (this is mobile compatibility).

  • Landscape or portrait mode views. This is very important especially if you share a lot of video content on your site. Many mobile device users prefer to watch videos in landscape mode and other types of content in portrait mode.

  • Easily accessible click-to-email or click-to-call buttons, to make it easy for your site visitors to communicate with you.

  • A site structure designed for mobile users.

So, as you can see, mobile compatibility is a necessary part of mobile friendliness.

Mobile compatibility’s impact on SEO

Mobile optimized sites take advantage of improved user behavior.

  • 48% of consumers will begin their research on mobile from a search engine.

  • Moreover, according to McKinsey, 61% of users will not return to a mobile site with a poor user experience, and 40% will visit a competitor’s site.

Since having a page optimized for the mobile user experience is so important to people looking for websites on Google, making sure your site is compatible with all devices has a direct impact on search rankings.

In fact, mobile user experience was a major factor in the so-called "mobilegeddon update" of 2015.

What Is Touchscreen Readiness?

Touchscreen readiness is the measure of whether or not a page’s tap targets are far enough apart to eliminate accidental clicks by users on mobile devices. Since accidental clicks are hugely annoying for mobile users, touchscreen readiness is a factor in determining a page’s mobile friendliness.

What makes a page touchscreen ready?

Making a page touchscreen ready requires following certain technical best practices:

  • Make your site/business logo a link to your homepage. A study by Google [PDF] found that participants usually expected tapping the logo at the top of a page to take them back to the homepage, and became frustrated if it didn’t work.

  • Increase navigation/menu padding by 5-10 pixels or more if your design allows.

  • Use text that’s big enough to read on smaller screens.

  • use an easy-to-read font

  • Make sure the tap targets for your links and buttons are far enough apart. The average width of the index finger for most adults translates to about 45-57 pixels.

  • For app promotions or discount popups, participants preferred easily dismissible banners as opposed to large interstitials. These types of alerts could result in lower rankings anyway.

Make any links on your page visible by using a contrasting color. The same goes for any calls-to-action like click-to-call buttons. If there are any forms that your users are supposed to fill, make sure the field sizes are big enough and that the spacing is adequate to avoid unintended navigation which can be very annoying.

Use heatmaps on your pages to see where users are spending the most about of time and where they click on your pages to get an idea of bottlenecks, hotspots and potential pain points.

Touchscreen readiness and SEO

A page’s touchscreen readiness impacts search engine optimization by ensuring a user experience optimized for mobile devices. A page can’t be mobile friendly without being touchscreen ready.

Look at it this way:

Imagine you’re browsing a page on your phone and you click on the site’s hamburger button to open its menu. You don’t find what you’re looking for, so you go to close it, but the site’s loaded the close button beneath the menu button:

Mobile page hamburger menu with overlapping open and close buttons

When you encounter something like this, you’re most likely going to leave that website and try to find what you were looking for elsewhere. And you’re probably not very inclined to come back to this site in the future.

Since Google’s mission is to recommend only the best websites to their users, pages that provide bad mobile user experiences like the fictional one above

How to Make Sure Your Site is Mobile Compatible and Touchscreen Ready

Ensure cross-device convergence

If there are any files that users may need to download from your site, the file formats should be compatible with different devices including smartphones, tablets, laptops, and desktops. This will enable all your site visitors to download and share your files, ultimately boosting your site’s popularity.

Run a mobile friendliness test

You can actually tell whether your site is touchscreen ready. You can use WooRank to review your URLs for mobile friendliness. This includes mobile compatibility and touchscreen readiness:

WooRank Review showing mobile compatibility and touchscreen readiness

You can test your URL using Google’s mobile friendly test:

Google Mobile Friendliness Test page

Copy and paste your URL, then click the run test button.

Both tests will tell you how mobile friendly your website is overall, as well as any issues impacting mobile compatibility and touchscreen readiness.

Recent guides