February 12, 2019 | by Jon Fletcher

Mobile optimized vs mobile friendly: It’s not a fair fight

Why Google will make sure there is only one winner for digital publishers

 
Every publisher knows the importance of a seamless mobile experience. But, with multiple terms being used, it’s important to know the differences between mobile-optimized and mobile-friendly, and what Google and your readers expect you to provide.

Mobile-friendly

Mobile-friendly is the minimum your site should aim for. The website will display correctly across multiple devices by adapting to fit the size of different screens. Mobile-friendly is also known as scalable design.

Mobile-optimized

Mobile-optimized is a website that is designed and built for the needs and usage patterns of mobile users. A mobile-optimized website adapts to make the user experience as frictionless as possible for users of different devices. This includes features such as ‘thumb-friendly’ click locations and single column scrolling.

Mobile Responsive

There is also a third category, mobile responsive in which media queries are used to automatically adjust the layout of text, font sizes, images, buttons, and sometimes removing or swapping content.

So, the page displays correctly in each version and will give the users the information they came for. But, mobile publishers have two powers to obey: their readers and Google. Both demand more than just displaying correctly. This leaves us with a question:

Which type of site will still be relevant in 2-3 years?

As more readers consume content on mobile it will become the primary benchmark for user satisfaction. No-one is more aware of this trend than Google. They prioritize sites with the optimum mobile experience and they do not wait until popular demand to implement it.

Mobile devices are no longer a secondary screen, where we will tolerate a secondary experience. Almost half of all smartphone users spend more than 5 hours per day on their device. Mobile users also account for over 50% of web traffic and Google uses mobile first indexing for over 50% of search results.

mobile reader times

Mobile is how most people are going to view your content, so the experience needs to be tailored to their needs, not a squashed and awkward desktop version.

Users want clearer clickability and interactivity

On desktop, the screen is larger and the mouse cursor will give away clues about the interactivity of elements of your site. On mobile, the user is navigating with a clumsy finger. Buttons and interactive elements have to adapt. Mobile optimized sites are designed to have simple, larger navigation elements, intuitive swiping, and fewer interactive elements to give the user a clear pathway through the site.

Everyone wants faster loading speed

All users are impatient but mobile readers are especially impatient. 40% of users will leave a page once it takes longer than three seconds to load. In addition, users will visit 5.6 more pages when the page loads in under two seconds, as opposed to eight seconds.

It is possible to have a well-designed mobile-friendly site, that loads quickly and users and receptive to. But, technology marches onwards, relentlessly. What is acceptable today will be below par tomorrow.

Why Google will continue to demand more from mobile sites

We already know that Google uses mobile page speed as a ranking factor. From Google’s developer fundamental blog, we also know that they value User-centric performance metrics. The questions they use to determine this performance are: Is it happening? Is it useful? Is it usable? Is it delightful?

Mobile-optimized sites will load content ‘Above the fold’. This is a key component of page speed.

The page will display the content a user will see first before the rest of the page. The page is still loading but the user is able to digest the initial information. Google encourages and recognizes this as the ‘first meaningful paint’ which is a key indicator of the overall page performance.

First meaning paint

Truly mobile-optimized sites create the first meaning paint and the hero elements first by embedding the above-the-fold styles and the minimum amount of CSS style sheets that are needed to render the first viewports of content.

This means that there are no JavaScripts file to load, allowing users to start reading with roughly 40KB without content shifting or flickering.

Normally browsers respond to a request by creating tasks in a queue on the main thread that are executed one by one, including the application’s JavaScript. These tasks can take time to execute and—as they are done in a single thread—can dramatically slow page performance.

Mobile page loading

Conclusion

Whilst a mobile-friendly site may still be able to display in a pleasing manner for users, Google is clearly gearing search results to performance-based metrics of mobile sites.

This is key because it represents a fundamental difference in the development of the sites. The appearance of the page is no longer the relevant question. Google cares how the page is built and how it is going to perform.

For digital publishers, the idea of a mobile-friendly website is likely to slip out of the lexicon. Mobile technology continues to dominate our age, through popular demand and the irresistible force of Google, mobile readers will — have already— become the priority.

A mobile-optimized website will be the default standard for high-quality publishers.