This is an epic guest post by Digital Hothouse. Digital Hothouse is a small, full service digital marketing agency based in Auckland, New Zealand. Our primary focus is on SEO and between the team we have over 25 years’ experience in SEO both in New Zealand and overseas.
Whilst we may be small, we focus on the delivery of the best possible ROI for our clients. Our clients include Fairfax Media, Stuff.co.nz, Makita, GO Rentals, CPG Hotels, Sharp New Zealand, Oyster Bay Wines, Postie+ and more. Find us on Twitter.
Google’s mobile-first index is coming. Whilst no official date has been set, Google’s Gary Illyes announced at SMX Advanced in Seattle back in June that it would likely start to roll out in early 2018. It’s amazing how quickly three months have passed since that conference and with only three months left of 2017, it’s definitely time to start putting some of what we learnt as delegates of the conference into action and the mobile-first index tasks are at the top of our list.
Just a quick note for those who may not have heard; Google is moving to a mobile-first index. That means their index (how websites are ranked) will be based off the mobile version of your website from early 2018. Currently all rankings are taken from the desktop version of your site. Got it? OK, let’s crack on.
What does this mean for SEOs, designers and developers?
Well, there are big changes ahead that’s for sure. For some, those changes will be relatively minimal but for others, there is a huge shift in design, development and optimisation just around the corner. We decided to take a look at the top five things that designers and developers need to know ahead of the switch and what you can be doing now to prepare your existing site, and how to build new sites.
Table of Contents
- Top 5 things designers and developers need to know about the mobile-first index
- 1. Text Size, Tap Target and Padding and Scaling
- 2. Gestures, Keyboards and Site Search
- 3. Accessibility
- 4. Conversion friendly
- 5. Page Speed
Top 5 things designers and developers need to know about the mobile-first index
Whether you are a designer or a developer, it is likely that the briefs you are going to receive both in the lead up to and following the move to the mobile-first index are going to change. Whilst people like to say that they design and develop for mobile first, we have found that this is simply not the case in what we see.
Yes our clients definitely want pages that look good on mobile as well as desktop, but inevitably they still get their desktop designs done first and then see how these will look on mobile.
That’s all about to change.
Once the mobile-first index kicks in, it makes no sense to design and develop for desktop first. Whilst your site needs to look and work well on both desktop and mobile, your primary focus needs to be on the mobile device.
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. Luckily most theme devs already keep this mind, whether they’re WordPress themes for business, portfolio themes, minimalist themes, or even church WP themes… most devs know how to implement the following effectively.
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.
1. Text Size, Tap Target and Padding and Scaling
Who: Designers primarily
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.
- Allow your font sizes to scale within the viewport
- Use 16px as your base font size and scale relatively as needed
- 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:
- Make tap targets at least 48px wide
- Space tap targets at least 32px apart
Scaling is another important element for responsive 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 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, maximising every inch of screen real estate – especially important considering the huge reduction in space available now.
2. Gestures, Keyboards and Site Search
Who: Developers primarily
Whilst you are trying to move away from the need to pinch and zoom on your mobile site, people may still have a desire to do so. This is especially true of images on e-commerce sites as the user tries to get a more close up view of the product he or she is looking at purchasing. 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.
Top tip: allow for common gesture features on your e-commerce site like pinch/double tap zoom.
Designing and developing a 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, pre-empt the user’s needs and meet their expectations.
This is probably one of the most important elements of a mobile-first site. Often navigation is one of the first things to get cut back on a mobile device for obvious reasons. Less real estate means something has to go. Whilst burger menus do tackle this issue to some extent, the lack of breadcrumbs and secondary navigation can make finding content more difficult on mobile.
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 search for, allowing you to refine your navigation, search function and your content. Triple winner.
Who: Designers and Developers
Adding rich media to your pages is a great way of increasing the engagement with your content no matter what device you are on. There are however some best practice guidelines you should follow when adding rich media on a mobile device:
- Leverage HTML5 for video and rich media content
- Use the video element to load, decode and play videos on your site
- Use unsupported formats e.g. Flash and some proprietary video platforms
We’ve already touched on navigation and how this should work side by side with your internal site search. Whilst a good internal site search should be the ‘go to’ if people can’t immediately find what they are looking for in your navigation, you should also ensure that content is not buried so deep that you need to use the site search to find it.
Top tip: Consistently test your global navigation and use that all-important internal search data to drive changes and improvements to the UX.
Don’t overwhelm people with navigation options or they will just default to the site search.
Interstitials and Overlays
Ah. The hotly debated interstitials and overlays. Wherever you stand on them (we’re not a huge fan of them on mobile here), there are certain things you need to avoid at all costs on your mobile device (as these are not only damaging to the user experience but could also land you with a search engine penalty):
- Don’t use full-screen overlays or interstitials to promote your app, email list or advertisements
- Do continue to use interstitials if they are un-intrusive. Google doesn’t hate all interstitials, just the ones that take up the entire page that cause UX issues
- Do use static banners to promote your app
4. Conversion friendly
Who: Designers and Developers
A good mobile site is one that converts. Whether that’s a form fill, a phone call or an order. Whilst all the other factors we have looked at so far will help with that path to conversion, there are a couple of key things you can focus on to get that conversion over the line:
- Ensure the path to conversion from any page on your website 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
- 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
- Ensure there are no pop-ups at the checkout stage
As mobile search continues to grow, more and more transactions will be completed on mobile devices. The importance of optimising the path to conversion on mobile will only be intensified with the introduction of the mobile-first index.
5. Page Speed
We’ve probably saved the most important ‘til last. Page speed is the single biggest factor that developers need to focus on to prepare for the move to the mobile-first index. There are a number of ways that you can improve your mobile site speed. From improvements to your current site, moving to a better web hosting provider (we’ve built comparisons for best hosting Canada, Australia hosting reviews, and more), to a shift to AMP or a PWA, speeding up your website will help to boost your rankings on the mobile-first index. Here are just a few of the ways you can look to speed up your mobile site speed:
- 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.
- 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.
- 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.
- Do nothing – If your current mobile-friendly, responsive 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.
There is no getting away from it; the mobile-first index in on our doorstep. Now is the time to get to action. Whether you manage your own site or your client’s sites, we recommend undertaking a full mobile audit straight away and assessing the current strengths of the site. From there, you can then decide whether you need to make major design and development changes to prepare for the mobile-first index.
With a passion for digital marketing and web design (primarily WordPress), Matthew never stops learning! He rather reads up on new marketing strategies than binge-watch the next big NetFlix special.
Check our about page for more info.