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.