Preparing Your E-Commerce Site for the Mobile-First Index

By in LiveChat Blog > Ecommerce,
google mobile first index

With 2018 just around the corner, we wanted to make sure you were prepared for some big changes that are coming in the New Year. If you manage an ecommerce site, or you have clients who have an ecommerce site, this post is going to outline how you can be preparing now for Google’s shift to a mobile-first index in 2018.

What is the mobile-first index?

Google first announced that they were moving to a mobile-first index way back in 2016. Since then, there has been a lot of speculation about when the index would swap out from the current desktop index to the mobile index, but as yet, we still don’t have a fixed date.

Back at SMX Advanced in June, Google’s Gary Illyes suggested it would be rolled out in early 2018 and later reports suggest it will be an extremely soft roll out which may have already started.

The mobile-first index is a huge shift for Google (and webmasters, developers, designers, SEOs). When the mobile-first index rolls out, Google’s index (how websites are ranked) will be based off the content on the mobile version of your website, not the desktop as is currently the case.

What does this mean for SEOs and marketers?

The move to the mobile-first index means probable changes. We have to assume that everyone by now has a mobile-friendly website; a site that can be accessed on a mobile device without the need to pinch and zoom. There are a couple of ways of doing this: responsive website design and a specific mobile website (usually an m. site).

If you have a fully responsive ecommerce website design, the chances are that the impact of moving to the mobile-first index will not be as big. Theoretically the responsive version of your site that Google sees on mobile is exactly the same as desktop. Sometimes, however, designers and developers like to tweak the content that is seen on mobile in order to deliver a better UX so it is still worth carrying out a parity audit of both your desktop and mobile versions to make sure you are not missing a trick.

If you have a separate m. site, then you need to pay close attention. Chances are you set up that site for a reason. To deliver a pared down version of your site on mobile to improve the UX. If there is a big disparity between the content on your desktop version and your mobile version, however, you could find yourself dropping in the rankings when the new index kicks in.

Anyone not jumping on board with this is going to get left behind, especially now that mobile traffic has overtaken desktop traffic and that trend is only going in one direction.

So, what can you be doing now to prepare for the mobile-first index and what are going to be the main things to focus on.

Let’s take a look.

Site/Page Speed

This is going to be one of the key factors that Google will take into consideration when ranking sites in their mobile-first index. Google is desperate to speed up the mobile web. Faster sites offer a much better user experience (UX) so improving your site and page speed on mobile will help you to rank better in their new mobile-first index.

Ecommerce sites in particular need to look at the experience they are providing to users on a mobile to ensure that more conversions are carried out on a mobile device rather than just researching a product on mobile and completing the transaction on a desktop.

Here are a few of the ways you can speed up your ecommerce site:

1. AMP The Accelerated Mobile Pages (AMP) Project is an open source initiative to improve the mobile ecosystem. Thanks to the pared-down HTML that is used by AMP, it allows you to load your web pages much faster than regular HTML. Google also caches your content on their own cache to speed up load time even more. All this results in a much faster, sleeker user experience and should, in turn, lead to improved visibility in the search results.

Whilst this was originally targeted at publishers, we are now starting to see ecommerce sites slowly moving over to AMP. There have been big leaps in supporting the purchase path for users on an AMP site and whilst we are not quite there yet, it is only a matter of time before ecommerce sites can feel the full benefits of going AMP.

2. PWA Progressive Web Apps (PWAs) are an alternative to moving to AMP. Their main selling points include:

  • Reliable – loads instantly
  • Fast – respond quickly to user interactions
  • Engaging – feels like a natural app on a device with an immersive UX

You can find out more about PWAs on the Google Developers Website or watch this cool video.

3. PWAMP(!) – a term first introduced by Google’s Gary Illyes at SMX Seattle, PWAMP is a combination of a PWA built on AMP HTML, JS and CSS. Whilst PWAMP sites may not validate as AMP pages, they are lightning fast and provide all the benefits of a PWA as listed above. They could be the future and one to keep an eye on. Read more about PWAMP here.

4. Do nothing – If your current mobile friendly, responsive ecommerce website is performing well, delivering a great UX and loading quickly, there may well be very little you can gain from moving to AMP or any alternative option. We would always recommend a full audit of your mobile site before deciding on any potential new path.

Conversion Rate Optimisation

We’ve already touched on this, however getting people to convert on a mobile device is a huge signal to Google that your site is delivering a great UX that meets the customer’s needs. For ecommerce sites, there is typically one goal: a sale.

There are lots of things you can be doing to improve that opportunity to convert but streamlining the checkout process is one that you can be working on now. Here are some tactics to help improve your conversion rate:

  • Ensure the path to conversion from any page on your ecommerce site is no more than 3 clicks away
  • Enable click to call by wrapping your phone numbers with tel: links or schema
  • Cut back on the amount of information you request at check out – keep it to the bare minimum on mobile. whilst your marketing team may want to collect as much demographic data as possible, do you really need their date of birth? What about those three phone numbers? Make your check out form as streamlined as possible which again will help to speed up the process.

  • Provide an option for people to save their basket or create a wishlist so they can complete their transaction on desktop if that works better for them

Note: Amazon’s Wish List is the perfect example. You can even make your wishlist public which can help with gift buying around Christmas and birthdays

  • Ensure there are no pop-ups at the checkout stage – the person is just about to convert, do they really need a pop-up to tell them about another product or offer?

Site Search

This is one of the most important elements of a great mobile-first site. When user access your website on a mobile device, you have a lossless screen to play with. That often means a lot fewer navigation options. In these instances, users will often resort to site search. Whilst burger menus tackle the navigation issue to some extent, a good site search is essential to successful ecommerce sites (both on mobile and desktop).

A quality internal site search function means that not only can the user find what they are looking for quickly and efficiently, but you can also gather data about the things that people are searching for, allowing you to refine your navigation, search function, and your content. Triple winner.

Things to consider with your internal site search include:

  • Prominent placement and usable design – your site search must be accessible at all times without scrolling back to the top of the page. The search bar must be big enough to type into and ensure you are delivering an appropriate keyboard
  • Allow search within results pages – make sure people can easily refine their search query if their initial search doesn’t deliver what they were looking for
  • Offer filtering options on the results page – once a search query has been entered, allow users to refine those search results further still be including filtering options on the page
  • Offer auto-complete – if you effectively track your internal search, you will know which are the most popular search queries and this can help to inform your auto-complete options, delivering a much better UX
  • Allow for errors – there will always be typos and different ways of spelling words so make allowances for this in your search and offer autocorrect to avoid user frustration
  • Allow for faceted sorting of search results – this supports the filtering options above and gives users the option to ‘Sort by’ or ‘Order by’. Amazon do a really good job on this:

Gestures and Keyboards

Gestures

This one may not seem like a big one, however, it can make a big difference to ecommerce sites. A mobile-first focussed website will often be one that tries to avoid the need for users to pinch and zoom, however in many cases, there is often both a need and a desire from users to pinch and zoom on an ecommerce site.

If you have products that people want to look at in more detail, it actually makes more sense to allow them to pinch and zoom that the auto-zoom that you find on a lot of sites. Giving the user the ability to go as small or as big as they want gives them much more flexibility to engage with your content and products.

A barrier to conversion in this instance is either the inability to zoom on a particular image, or worse still, a low resolution image that becomes badly pixelated when the user does zoom in.

Keyboards

Designing and developing an ecommerce site for the mobile-first index means thinking more carefully about the user experience on a mobile device. If a user is entering data into a field that is purely numerical, make sure you have enabled contextual keyboards that change based on the required inputs. The same goes for email fields, URLs as well as the standard text keyboard. Users install a wide variety of keyboards so don’t assume functionality – instead, preempt the user’s needs and meet their expectations.

Text Size, Tap Target and Padding and Scaling

Text Size

The User Experience on a mobile device is going to be crucial as we move towards the mobile-first index. Ensuring users can engage with every element of your content without the need to pinch and zoom helps to deliver a high-quality user experience.

Dos:

  • Allow your font sizes to scale within the viewport
  • Use 16px as your base font size and scale relatively as needed

Don’ts

  • Require customers to zoom in order to read, interact or consume your content

Tap Target and Padding

Another key area for designers to focus on is the tap target and padding elements on the page. There is nothing more frustrating for a use than having to either pinch and zoom to click on a button on a page or worse still, clicking on a nearby button by mistake and have to click back. Either of these actions is likely to lead to a negative experience and the likelihood of a bounce off your site. Here are a couple of things you can do to ensure your tap targets are optimised:

1. Make tap targets at least 48px wide

2. Space tap targets at least 32px apart

Scaling

Scaling is another important element for responsive ecommerce site design. As we move to a mobile-first index, you should be designing for mobile first and then working out how that design will best transfer to a desktop. Your mobile-responsive designs should scale on a mobile device so they can accommodate both portrait and landscape device orientations. You should also allow your content and media to scale to the fill the device screen size, maximizing every inch of screen real estate – especially important considering the huge reduction in space available now.

Is your ecommerce site ready for the mobile-first index?

Hopefully, this post has given you some great ideas and insights into what needs to be done to prepare your ecommerce site for the move to the mobile first index. A lot of this comes down to design and development so speak to your agency or in-house team and find out what they are doing to ensure you are ready for the move. You can also check out this great post which looks at some of the elements that make up great website design.

If you don’t know where to start with all this, we recommend following these steps:

  • Conduct a parity audit of your website, comparing what Google sees when they crawl the mobile and desktop versions of your site
  • Run a number of page speed tests across the key pages on your site, specifically focussing on the mobile speed
  • Conduct a checkout audit – run through the process of purchasing something from your ecommerce site and establish whether this could be streamlined
  • Do some site search testing. Are you getting accurate results? Could you offer more filtering options? Can you find what you are looking for?
  • Check out some of the best-selling products on your site and see whether you can easily view them on mobile. Is there an option to zoom? Is the information clear?
  • Finally, navigate your way around your mobile site. Are the buttons easy to press? Is the text easy to read? Does the site look good in both portrait and landscape?

Whilst your website may be classed as mobile-friendly, is it really? Following these steps above will put you in a much stronger position and prepare you for the move to the mobile-first index.

discussion

comments powered by Disqus
Rate us! Rate this chat to help us become better support. +