newspaper user fire lightbulb users home office mic library display tv bubbles4 rocket power facebook linkedin2 user2 shield modern-mic slideshare pinterest-p instagram newspaper-o laptop people hand quill map2
SEOWeb Development

What differentiates a mobile-first website

Why should your website work seamlessly across all devices?

Websites designed to provide an optimal user experience whether accessed using smartphones, tablets or other small screens are mandatory across the web. Who says so? Google does. And as we all know, they are the search behemoth and hold sway across the internet.

Google goes mobile-first

In 2016 Google announced their intention of going mobile-first; indexing responsive or mobile compatible sites ahead of those which are not responsive or mobile compatible. In a Google webmaster blog post on December 18, 2017 they said, “Mobile-first indexing means that we’ll use the mobile version of the content for indexing and ranking, to better help our – primarily mobile – users find what they’re looking for.”  

Google wants to help people find the content they want, quickly and easily. Google does not want users to have sub-optimal experiences. So, what is an optimal experience? It is one that works seamlessly on all devices and where a user can very quickly find the content and information they desire.

Mobile matters because more searches are performed on mobile

In 2015 more mobile searches were completed than searches on desktop computers. Mobile is where it’s at.

Jumpshot monthly searches via Moz

This graph courtesy Rand Fishkin from MOZ

Mobile search dominates and voice search makes it easier

In 2017 voice search grabbed an increasing amount of user searches. This means mobile users are using their verbal queries to search for information. Therefore, not only are more searches being performed on mobile, they are being performed using speech and longer queries. Read our blog post about voice search.

The facts are clear: Websites which will have an edge in search results are responsive to device and present the best user experience no matter the screen or device type. Sites which fit this criteria will rank better on full-rollout of mobile-first. Of course the caveat on this is content.

Poor content and lack of engagement will not be trumped by a responsive website. As Google put it, “Make sure the mobile version of the site also has the important, high-quality content. This includes text, images (with alt-attributes), and videos – in the usual crawlable and indexable formats.”

What is responsive web design?

As Google defines it, “Responsive web design (RWD) is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device.” This tells us that every user sees the same content, no matter what type of device they use to visit your business on the web.

On RWD sites users don’t have to pinch or stretch a page to read the text or to click a button or enter text into a form. Neither does their device get served content that is different than what desktop users see. Google also tells us that there are no horizontal scroll bars to get to content which doesn’t fit the page.

What does responsive website look like?

Google provides the image below to help us comprehend the difference between a well done RWD site and Google recommends RWD as the way to go. Sites which are responsive elegantly display content so that it can be viewed and interacted with easily by the user, no matter their device.

Google image showing different size viewports and how they work on mobile devices

Consider the examples below of a restaurant whose website is not responsive to mobile devices. People trying to access this site on a phone cannot read the website’s home page or view the restaurant menu, nor can they easily interact with the site — the text is just too small. On the Home page a visitor cannot read the text in the featured blocks. Nor can they read the menu page text. If you wanted to submit your name to their newsletter signup form in the site’s footer, it would be hard to do as the form fields are so small.

Restaurant website not compatible on mobile    Menu page on a restaurant website that is not mobile friend.y

 

If this site was responsive, it would organize the blocks of content in such as way that you could interact with the site without expanding, or guessing or having fat finger fumbles. All the buttons on the site would be large enough for a finger to touch them without impacting any other content, eliminating fat finger errors.

In the example below, note how our website resizes as the edge of the window is dragged. This is an example of a site which is responsive.

 

 

The site’s content fluidly scales and then stacks to fit the screen size of the device. There is nothing the user needs to do to experience the site at the optimal size for their device’s screen. The site does the work. And this is the crucial element of a site that is responsive.

Another critical element is for all items on the site to function with touch. Remember on mobile devices there is no mouse click. So, what happens to your special elements and widgets when they are touched? Do they act as you expect them to? If they do great, they are mobile compatible.

Google does say that they are implementing mobile-first in a very deliberate way. “We continue to be cautious with rolling out mobile-first indexing. We believe taking this slowly will help webmasters get their sites ready for mobile users, and because of that, we currently don’t have a timeline for when it’s going to be completed.”

Just because Google is being cautious about mobile-first indexing is no reason for you to wait to get your site ready. Test your site now with Google’s Mobile Friendly detector to see if it’s mobile ready.

In the example of the restaurant site above, the Mobile Friendly detector notes:

What Google tells you when they determine your site is not mobile friend.y

 

 

But, Google doesn’t leave the site owner out in the cold. They offer tips and adjustments to make this site compatible with mobile devices. Suggestions are specific to the test results of the tested website.

Google's mobile friendly detector suggestions for website repair

What should you do if your site is not mobile ready?

If your site isn’t mobile friendly, you will need to upgrade it. This may mean changing your CMS’s theme or getting another theme. If you have a static html site, it means having your site recoded.

So, as you plan your mobile friendly website look for themes which are responsive. Test the theme demo in multiple devices (just as you should for your live site.) Testing a site across multiple devices can help you understand the experience various users have.

If you need help doing this, a professional consult might be the way to begin. If your site isn’t responsive and failed the Google mobile compatibility test, call us. We’ll give you a free consultation to learn how to make your site ready for mobile-first indexing.