Welcome back, this lesson is
on common issues and best practices.
Now that you understand mobile trends,
let's talk about mobile website best practices.
In 2015, Google announced that
mobile-friendly websites as they defined them,
would receive a boost in search rankings.
These best practices also improve
the overall user experience and mobile conversions.
However, issues on legacy websites
must often be overcome.
In this lesson you'll learn about
common issues in mobile web design and usability,
we'll focus on specific issues
that cause sites to not be mobile-friendly,
and then you'll learn what you can do to
improve the mobile user experience.
In this lesson you'll learn about
both the general and specific issues that
cause websites to not be mobile-friendly,
get an explanation of what you can do on
your current mobile site to make it so,
and you'll gain access to
the mobile-friendly test provided by Google.
On Google's developer website,
they've shared about common issues in mobile web design.
The first is forgetting the mobile customer,
good mobile sites are useful by
helping visitors complete their tasks
whether that means reading
an interesting article or
checking on the store's location.
But don't get caught in the trap of only
creating a mobile formatted site that
looks pretty on mobile
without having useful functionality.
A mobile-friendly site is one that's useful for
both mobile customers and
optimized for those customers' most common tasks.
Common issue number two,
is implementing a mobile site on a different domain,
subdomain, or subdirectory from the desktop site.
Multiple mobile site configurations are
supported by the search engines
but creating separate mobile URLs
increases the amount of work for maintenance,
updating, and can be a source of technical problems.
The solution here is to use
Responsive Web Design serving
desktop and mobile on the same URL.
It's very easy to think of your website
as the only source of inspiration,
but there are so many other sites
in your space to consider
whether they be competitors or
those that inspire you on a personal level.
Take a look at their best practices,
you don't have to be the first in your industry with
a particular technology or a mobile layout,
but you can still benefit from
learning from those before you.
Now let's get into some of
the specific issues that Google mentions.
The first one is blocked JavaScript,
CSS, and image files.
You need to allow Googlebot to access these
so they can see your site like an average user,
if your site's robots.txt
file disallows crawling of these assets,
it can harm how well algorithms both
mobile and desktop render and index content.
Unplayable content can also be prohibitive,
some types of videos or content are not playable on
mobile devices such as
those that are constrained by media license,
or with Flash, or
other players not broadly supported on mobile.
Unplayable content when featured on a page,
any website but especially mobile can
be very frustrating for users.
Using HTML5 standard tags for
videos and animations is the best practice.
Another specific is the use of interstitials,
interstitials are those typical ad overlays that
partially or completely cover
the content of a page a user is visiting.
These are seen on devices
where a website might be promoting a native app,
or a mailing list sign-up form,
or an advertisement, and make for a bad user experience.
In extreme cases,
the interstitial is purposely designed to make it
difficult for the user to exit
out and view the real content.
Any interstitial page significantly
impacts the user experience
and should be minimized on mobile devices.
Slow loading mobile pages can really be a problem,
it's important to make sure your mobile site loads
quickly especially for those users that might be
on slower access plans globally.
Users can become really frustrated if
they have to wait a long time to see your content.
Google's PageSpeed Insights tool can help
you understand some of the issues that should be fixed,
also make reference of the mobile pages render
in under one second resources
available from Google online.
Setting your viewport correctly is also critical,
because visitors to your site use a variety of
devices with varying screen sizes,
pages should specify a viewport
using the viewport meta tag.
This tag tells browsers how to adjust
the page's dimension and scaling to suit the device.
Yet another issue is small font size,
avoid setting the font size too
small to be legible on a mobile device,
forcing users to pinch to zoom in order to read.
Once you've specified a viewport for your web pages,
set font sizes to scale properly within the viewport.
Touch elements may also be too close,
buttons and links can be so
close to each other that a mobile user cannot
easily tap a desired element with
their finger without also tapping a neighboring element,
this can be so frustrating.
To fix these errors,
make sure to size and space buttons and navigational
links suitably for your mobile visitors.
Updating a website to be mobile-friendly is critical,
Google has included a mobile-friendly test
that you can run your website through.
If it's in responsive design already, it should pass.
The top three things to know when
building a site for mobile are number one,
to make it easy for customers.
Two, to measure the effectiveness of your website by how
easily mobile customers can complete common tasks.
Three, to select a mobile template, theme,
or design, consistent for
all devices using Responsive Web Design.
In summary, now that you've completed this lesson,
there should be no mistaking
the mobile errors possible on a website.
These impact both rankings
and the overall user experience,
they are vast though and
require a tight alignment between
teams to really execute on the fixes required.
Solutions are out there for teams
committed to doing the right thing,
and the mobile-friendly test is
one great way to get started with testing your website.
