[MUSIC PLAYING]
ALAN KENT: How mobile friendly is your e-commerce website,
and does it really matter?
Hi.
I'm Alan Kent, a developer advocate at Google.
In this episode, I will talk about the importance
of making sure your e-commerce website is mobile friendly.
The most obvious reason to worry about mobile friendliness
is because more than half of Google's search traffic
comes from users on mobile devices.
That is traffic we are potentially
going to send to your site.
Designing great experiences on mobile devices
can be challenging due to the limited physical screen
real estate compared to desktops and laptops.
But guess what?
Simpler mobile website designs often also
perform well on larger screens.
Simpler pages can help shoppers focus on their shopping journey
with less distractions.
Mobile friendliness is clearly important to users,
and Google wants to direct users to sites
that best meet their needs.
For this reason, Google has published numerous articles
on how best to create mobile friendly websites.
Check out Google Search Central and web.dev in particular
for great in-depth articles.
So let's dig in, starting with some technical tips
and then moving on to user experience tips.
Some sites prefer to have a separate domain
name for mobile traffic so they can present a simplified user
experience to mobile users.
If a user lands in the wrong domain name,
they are redirected over to the other site.
The first tip in such cases is to keep the two sites in sync.
There's nothing inherently wrong with maintaining two websites,
but it can result in content, functionality, or performance
lagging on one of the two sites.
Content and functionality differences
can be particularly jarring to shoppers
when they visit from different devices.
If you choose to maintain two sites,
you may find automated tools, such as Puppeteer,
useful to check that the two sites behave similarly.
Puppeteer provides an API to control a headless instance
of Chrome, which makes it great for automating tests
as part of your build process.
With discipline, you can keep two sites in sync.
Just make sure you always allocate sufficient budget
to cover the work on both sites.
A better solution, however, may be
to consolidate the two sites using responsive web design.
Responsive web design uses techniques such as CSS media
queries to change page layout based
on the width of the display area.
This can make it easier to deliver consistent experiences
across all devices and potentially
lower total development costs.
The second tip is to make sure you design your mobile site
for indexing by Google.
Because most users issuing searches are on mobile devices,
Google crawls sites looking for content to index
using a mobile device user agent in the HTTP headers.
If you are new to search engine crawling and indexing
of websites, check out our How Search Works page
on Google Search Central.
Examples of problems that can occur
when indexing mobile pages include mobile sites
may omit information important for indexing
from pages in order to reduce the page size.
While this may reduce the number of bytes
to download, improving load performance marginally,
it may result in your pages not appearing in search results
as often--
not a good side effect.
User experiences, such as Infinite Scroll and Load More
buttons, are often popular on mobile devices.
They can, however, cause crawling problems
as the full page content is not loaded by default.
This can lead to Google not finding all of your content
to index.
To detect problems with Google indexing your mobile site,
check out Google Search Console.
Google Search Console provides rich insights
into what Google has indexed on your site,
including reports of problems found.
For more information, check out Daniel's wonderful series
of videos on getting the most out of Google Search Console.
To help Google find all of your pages,
consider using a sitemap file or providing Google Merchant
Center a feed of all your product pages.
These provide alternative paths for Google
to discover pages on your website
rather than relying on crawling alone.
Tip number three is to optimize your site for site speed.
Site speed is generally a greater concern
for mobile devices as they are often lower powered
with lower network performance.
In previous episodes.
I covered improving image and JavaScript performance
on your site.
I've included a link in the description
so you can check out those episodes for more information.
But there are other problems that
can occur, such as when using web fonts.
If a web font takes a while to download,
content may be displayed first with a default
font, which is then replaced with the web font
when available.
This can cause content layout shift as the page re-flows
due to the font change.
Potentially worse, rendering may be blocked completely
until the font is loaded.
PageSpeed Insights is a useful tool for analyzing web pages.
It provides a number of performance related reports.
PageSpeed Insights is particularly useful
as it includes both lab data from artificial tests
of performance on your site and field data
based on real user experiences on your site.
Most issues identified by the PageSpeed Insights report
include advice on how to resolve the issues.
For web fonts, review your site to see if you can reduce
the number of fonts you use.
Also try to reference the most important fonts early on a page
so they are loaded properly.
Check out Katie's web.dev article
on web fonts for more detailed advice.
The final advice regarding site speed is if you cannot make it
fast, make it meaningful.
For example, if submitting an order
takes some time to complete and there's
nothing you can do about it, show the customer
special offers or upcoming events while they wait.
Tip number four is less of a technical issue
and more of a usability consideration.
It is to make sure pages from your site
are readable on small and mobile device screens.
This includes making sure content does not spill off
the sides of the screen, making sure text is large enough
to read comfortably, making sure users can zoom in
on content if they want a closer look,
and making sure button icons are large enough
to be easily recognizable.
To test for these issues, you can obviously
try your website on your own phone
as well as asking some friends with different brands of phone
to try it too.
But during development, you can also
use tools like Chrome Developer Tools
to pick a mobile device to emulate
with your desktop browser.
This can make it easier to test how your site will
appear on a range of devices.
If you like automating tests, again, Puppeteer may be useful.
Fixing your site once you have identified any problems
is typically a matter of reworking your website's HTML
and CSS markup.
In addition to readability, make sure your site does not
suffer from common mobile usability issues.
Examples include navigation structures,
such as menus being too hard to use on a small device,
buttons being too small to tap easily,
buttons being placed in a way not friendly
to single handed use, and relying too heavily on keyboard
input to navigate your site.
Many usability issues are best found
by conducting usability analysis of your site.
It can be eye opening to watch a new user try to find a product
and complete a purchase on your site.
What is obvious to you is not always obvious
to a first time visitor.
And don't forget to check the experience of refining
on site search results.
Entering text is generally harder on a mobile device,
so make sure you don't require re-entry of text
to refine a search.
In addition to manual inspections,
tools can be used to find some issues.
Tools have the benefits that you can integrate them
in your website's build and release process.
For example, check out the mobile friendly test tool.
Simply enter the URL of a page on your site,
and it'll analyze for common issues such as, this site uses
an obsolete plugin, such as Flash, the viewport property is
not defined in a meta tag, and the font size is
too small to read comfortably.
Google Search Console also has a mobile usability report
for pages Google has indexed on your site.
Look for Mobile Usability in the sidebar menu.
Usability issues are, again, generally solved
by reworking the HTML and CSS on your website,
then testing to ensure the problem has been fixed.
Tip number six is to understand and simplify user experiences
on your site.
Example common areas for improvement
include forms for collecting payment and shipping
details in the checkout flow, and carousels is a popular way
to pack more information into limited screen real estate.
Use of techniques such as progressive web apps,
or PWA for short, can also deliver users
richer, app-like experiences on your website.
Detecting problems in your user flows
generally requires manual usability analysis.
Tools can help spot well known issues,
but they cannot be relied on to find all usability issues.
When using forms, ensure your site correctly
supports autofill for payment and shipping details.
To learn more, check out great content
and forms from Sam Dutton on web.dev.
If a site maintains a customer database with passwords,
make sure form fields are marked correctly so browsers can often
remember passwords for users.
Passwords, compared to standard autocomplete and autofill
fields, must be treated with special care
to ensure their security.
Better yet, consider using a third party identity provider,
such as Google, so shoppers are not
required to remember yet another password.
Each site that manages its own database of passwords
increases the risk of password theft, which
can in turn make other sites vulnerable as many users reuse
passwords across sites
If you use carousels on your site,
check out Katie's great advice on web.dev.
Practices such as auto advance in carousels
can look flashy, but often result
in poorer user experience.
Progressive web apps and potentially related
single page apps, or SPAs, is a large field and beyond
the scope of this video.
Check out web.dev for great articles on PWAs.
Tip number seven is personalization matters
on mobile devices.
Users on mobile devices generally
have a greater expectation of personalization.
This is influenced by multiple factors,
including mobile devices are typically not shared
and so are inherently personal, and smaller screens
means it's more important to make what is
displayed relevant to the user.
An effective way to determine if your site could
benefit from personalization is to perform a site audit.
For example, shopper interviews are a great way
to gain deeper insights into the expectations of your users.
Personalization comes in many forms.
It can be as simple as displaying products on the home
page that the user viewed on their last visit
or showing hand-curated offers based on the user's profile.
Personalization can also be advanced
using AI-driven recommendation engines based
on user actions on the site.
There are many great personalization
and recommendation products on the market today,
including from Google.
Personalization often benefits from remembering users.
Use of cookies is a common way to remember a user's tastes
from a previous visit without knowing their full identity.
Alternatively, a site may offer a more personalized visit
if the user creates an account and logs on,
accepting any terms and conditions to collect and hold
details about the shopper.
The last tip is to review if your site can leverage
more advanced input methods provided by mobile devices,
such as touch screens, cameras, geopositioning location
services, and voice input.
They can offer new and engaging ways for customers
to interact with your website.
Examples of advanced interactions
include using pinch and swipe gestures to zoom and browse
through product images on your product page,
using location services to show the user
products in the nearest physical store first,
supporting voice input to reduce the need to type
on a mobile keyboard, providing the user an augmented reality
experience so they can better visualize
what a piece of furniture looks like in their own home
before purchase, and performing image searches
for products based on sample material patterns captured
with a camera using surfaces such as Google's Vision API.
Many but not all native app features
are now supported by mobile web browsers.
Check out Google's Project Fugu for a list
of such advanced capabilities to see what is possible.
You can also use sites like caniuse.com
to see how widely a specific feature is supported
across browsers before using the feature on your own site.
Note that if a feature is not in all browsers,
JavaScript can typically detect if the feature is available
or not and react appropriately.
That means it is not necessary for all browsers
to support a feature for you to take advantage of it
on your own site.
Thanks for watching this episode on making
your website mobile friendly.
To be notified of new content as it becomes available, please
subscribe.
Until next time.
[MUSIC PLAYING]