Mobile web lessons learned from analyzing websites at scale

Mobile’s brought the web
billions of new users and has introduced a lot of
new possibilities for web developers to take advantage
of such as direct touch manipulation, high density
displays, and new hardware capabilities, such
as geolocation. I’m Paul Kinlan. And we’re going to look
at some of the trends that we’ve noticed at
Google and tell you where there’s great
opportunity for you if you get the
fundamentals right. The Google PageSpeed team
had a great question. For a mobile page,
does poor usability diminish the benefits
of a fast page load? Now, on the web, if
the average page load time is about seven
seconds– and we at Google recommend that you
should aim to load your page in less
than two seconds. But even if you do
achieve those goals and the user has to
spend an additional five seconds pinching and
panning and zooming just to find the content that
they’re interested in, then the site really
isn’t fast at all. We looked across
the top 1,000 sites and sampled over a
million URLs at random to determine how well
the web works on mobile. And we found some very
interesting results. We found that a
high number of sites had content that forced the user
to pan, pinch, and zoom around the screen just to be able
to get access to the site. And from a recent
ad study, we know that users hate
having to do this. We found that over 32%
of the top 1,000 sites had text that was too small
for users to read comfortably. And this got even worse with
the long tail of the web. Now imagine you’re
on your mobile and you’re viewing a page
that’s not mobile friendly but has been designed
to use a 12 point font. Because of the scale that
the browser introduces it actually reads like
a four point font. And this is just
not great for users. A large number of sites also
block the ability for users to scale their screen. In a test that I run, 15% of
sites that had a viewport also blocked zoom in. This is bad for
users who require an enhanced accessibility
and are frequently being blocked from being able
to view a page comfortably. Not only were
displays suboptimal, interactions were
hard for users, too. Over 60% of the
top 1 million sites had issues with
interaction, where elements such as
links and buttons were too close to each
other for the user to accurately click on and
complete their intended action. I’ve dropped this in because
it’s a pet peeve of mine. I hate typing on
my mobile device. Yet many sites still
have really long forms that don’t autocomplete
or help me enter text. Why? And a recent study
by the Ads team show that users hate having
to fill in forms, too. People still use Flash
and another embeds. These tools just do not
work in the mobile web. So why are we still using them? For someone like me who believes
in the ubiquity of the web, it’s clear that it’s not
easily accessible everywhere. As depressing as these
stats are, there is hope. It presents a massive
opportunity for you and your business to get
ahead of the competition and delight your users. The Google PageSpeed
Insights team built a tool to help
you identify issues with the performance
of your page load and address these problems
with actionable guidance. We’ve extended this
tool to now include detection of common
user experience issues. But how do you avoid these
mistakes in the first place to build a great
experience for your users? I’m going to talk about
seven simple steps to get you started building
great mobile web experiences. Now this sounds
silly, but you would need to understand that
you must go mobile. If you’re not thinking about it
already your users will want it and your competition are
probably already building it. Now there’s actually
a lot of things that you need to do
to go fully mobile. But these next set
of tips will help you avoid the common pitfalls
of mobile web development. The most important and
critical thing that you can do is to always use a
mobile viewport meta tag and always size it
to the device width and set the initial
scale to one. This viewport will work really
well across all devices. Users hate panning. Always ensure that the content
fits in the viewport width and does not force
the user to scroll. For example, developers often
don’t scale their images correctly or size tables to
fit on mobile, forcing the user to pan left or right. Never, ever disable zoom. Even though your users
hate being forced to zoom, there’s very little reason
to lock this experience even if you’re building apps. And by making sure that
your users can zoom in, they will thank you for it. So simply use the default
viewport method type we presented earlier
and you’re good to go. When it comes to reading
text on the screen, the Apple iOS team have it best. Above all, text must be legible. If users can’t read
the words in your app, it doesn’t matter how
beautiful your typography is. And the same
applies for the web. So we recommend that you
use at least a 16 point font, sensible line spacing, and
a good contrast in your text. Limit the use of web
fonts to just the headings so that the body
copy is immediately visible to the user. Web fonts are loaded
from the remote server and the text is
blocked from rendering until it’s been
fully downloaded. So remember, the most
important thing in your site is your content. Make it easy for people to
interact with your page. Increase the minimum
touch size to 48 pixels and add padding of at
least seven millimeters to areas of your site that
will accept user input, especially if there are
other touchable areas nearby. This will help
users and browsers understand whether
clicks happened and complete the
action for the user. Make it simple for people
to enter data into a form. Guide users through
the data that they need to enter on your
form by giving them a hint with a placeholder. For example, if you’re
entering a telephone number, have a sample telephone number
in line in the form element. Add labels to tell the
user the type of data and also drastically
increase the touch target size for the form fields. For example, use the
label to tell the user if it’s a home telephone number
or a work telephone number that you’re expecting
in the form. Make sure you use semantic
input types, such as telephone, number, and date to give the
user the appropriate keyboard to make their lives
so much easier. Browsers on mobile
phones have great tools to make it easy to enter
data, such as a phone dial pad or even a quick hint with
the [? ads ?] sign on the form when you’re expecting that data. The browser understands
a huge amount of information about you. So let the browser help your
users by enabling autocomplete. Tell the browser if
you’re expecting a street address, a credit card number,
an email address, or even a person’s name, and
it will automatically fill out the form. PageSpeed helps with
most of these issues so use it at every single
stage of your project so you can catch problems
before they occur. For example, you can use
the API to check your site on every single deploy or build. And it’s as simple as issuing
a cURL command to the API with your site address. If you follow these simple tips
and use our Web Fundamentals guide with PageSpeed insights,
you’ll be off to a great start. Thank you for watching. I’m Paul Kinlan. Now go out and build some great
sites that work on all devices.

Leave a Reply

Your email address will not be published. Required fields are marked *