JUAN FELIPE RINCON: Hello, good afternoon
and welcome to this third installment
of a mobile-friendly websites for small medium business.
My name is Juan Felipe Rincon.
I'm a member of the search quality team for Google,
and I'm here to help you learn a little bit more
about mobile-friendly design.
Learn some very simple techniques and practices
you can implement on your website in preparation
for our ranking change on mobile search results on April 21st.
I hope that these tips will be helpful and useful,
particularly for those of you who own small businesses who
may not necessarily feel you are particularly technical
or who might not feel like you actually own
the code of your site or can modify the code of your site.
And that these will prepare you to either feel
that it's not as complicated as you might think, or have
an informed, intelligent conversation with those
who manage and maintain your website.
So let's get started.
And we will present and move on.
So in the last-- and this here's the four presentations.
We've been talking about both the tools and some
of the techniques you need to use
and implement on your existing website
to make it mobile-friendly.
In the previous two installments,
we talked about the PageSpeed Insights tool,
the mobile-friendly tests, and the mobile-usability tool-- all
of these three mechanisms that you
can use to check how your site is being
perceived by Google today.
And whether or not we are considering
it to be mobile-friendly based on the criteria
that we have learned over the years
represent the mobile-friendly website.
If you didn't get a chance to see that video,
you can catch it on YouTube.
The link to it should be in the Google Webmasters community,
or if you go to the Google Webmaster channel on YouTube,
you should be able to see the video for that.
In the second installment, you saw
we talked about viewports, zoom, and plugins.
That was really to talk about how to actually tell
a browser this page should be presented a particular way
on a mobile device.
Today, we are going to be focusing
on the user experience.
Specifically on the interaction the user
has with your buttons, tap targets, margins, and font
sizes.
Let's get started.
First, let's talk about tap targets.
A tap target is pretty much anything
that you expect a user on a smartphone
would be tapping at with their finger.
And when you look at a tap target,
if you have a lot of smaller or tightly-packed links or buttons
on that page, it makes it very difficult
to use on a smartphone.
Think about that time when you tried
to use a page on a phone and the Edit button
and the Delete button are right next to each other
and they're really tightly squeezed together.
And all of a sudden, you try to tap on Edit
and you tapped on Delete by mistake.
Most designers don't do that very often,
but you'd be surprised how often that happens and there are very
easy ways of avoiding that.
The first thing to remember is that the average adult finger
pad is about 10 millimeters wide,
and this is fairly standard.
And so if you think about the amount of space
that a user might need-- that a user's finger might actually
be using when contacting a touchscreen,
it helps you determine how much spacing you
need on the actual buttons to prevent two buttons from being
pushed accidentally.
So here's a good guideline to use, or a good rule of thumb,
if you will, to use when defining
the minimum size, width, and height for important tap
targets on your site.
For things that are really frequently used,
we recommend about a 7 millimeter--
a minimum width and/or height for these tap targets.
And if you look back at our previous presentation
where we had the menu across the way,
and even in the previous slide, all we
did here was take the exact same menu
and just change the minimum height of the element to seven
millimeters.
We, in this case, actually made each
of the buttons a little bit wider in the menu
and just [INAUDIBLE] can take up to 50% of the screen.
And we made the Home button a minimum
of 7 millimeters wide and tall.
Another element to think about is
that not all of the links on your page
are actually that important.
So if you have less important tap targets on your page,
you should at the very least leave a 5 millimeter gap
or margin between these targets to avoid
these inadvertent taps.
This is something you can easily do in CSS by simply
establishing that the spacing between these two
should be-- you can even define in millimeters-- that's
5 millimeters-- or you could try to do it in pixels.
By five millimeters on a physical device
is a good rule to prevent overlap of your finger
on to different tap parts.
The follow on piece is also about legible fonts.
If you have a base font that is too small,
it is going to be illegible even with a proper view port
configuration.
You are not going to be able to read it easily,
and then you would be necessarily
be forcing the user to zoom into the page
to actually read the text.
Generally speaking, you should use
a base font size of 16 CSS pixels
when you're defining a page.
This is a good practice also for desktop browsers
if you think about it from monitors
getting bigger and bigger.
But at the very least for your mobile responsive design,
you should think of a base font size of 16 pixels.
And if you do want text that needs
to be smaller or larger than that, then what you could do
is set that as a percentage of that baseline font
to 16 pixels.
So consider defining a small font that
might be 12 pixels and a large font that
might be 20, but always in relation
to that reference size of 16 pixels.
The other thing to consider is that line spacing matters.
If you have too much squeezed up text,
it makes it difficult to read.
Browsers by default implement a CSS line height,
which defines that spacing between two subsequent lines
on a paragraph of text as 1.2 em units,
and em is a typography unit that is
proportional to the font size that is defined.
That is a really good default.
You should keep it.
There are many responsive design toolkits, or even
CSS practices, that will reset the browser
defaults to units of one.
You might want to look at whether you're
using such a CSS reset tool or a style sheet on your page.
And if you're doing so, then look at whether or not
your line height needs to be defined more explicitly for 1.2
em's.
That'll make it much more easier to read.
One third piece which plays on with these two
is to make all of these responsive designs
that we've talked about over the last three sessions.
We've used style sheets.
And you might use sheets as well, not necessarily
in the document-- embedded in the document,
but you might use them linked in order to facilitate maybe
your development workflow.
You might also have JavaScript files that allow your page
to have more interactivity.
The key piece to remember is that Googlebot
needs to be able to render your site
and recognize the mobile version of it.
And specifically, you should check if your robots.txt
file is allowing Google to crawl your JavaScript and CSS
content.
If Googlebot can't crawl your JavaScript
and CSS can't see it, and those CSS or JavaScript
files are important to make your page be responsive on mobile
or operate well on a mobile, then Googlebot
won't be able to interpret that your page is mobile friendly.
The general piece of advice and the general piece of guidance
is that you should treat Googlebot as a regular user.
Then you should make sure that Googlebot
can crawl your page if it's required for a user
to experience it.
And that you shouldn't be showing content
to Googlebot that is different worked
from what your user sees.
In particular, if you're doing Googlebot specifically
targeting-- which, generally speaking,
if you're showing Googlebot different content than you're
showing your users, it can be in violation of our webmaster
guidelines as well.
You may also be unsuspectingly giving Google the wrong message
that the page is not mobile-friendly.
So it's a general practice.
Let Googlebot see your page as if it were user,
and make sure that Googlebot can crawl your JavaScript and CSS
files.
That was it for the technical element of this presentation.
With the sessions from last week and with this week,
and if you implement those simple recommendations,
you can get a mobile-friendly page if you already have one
and you don't want to have a separate website.
Next week, we will talk about dual site setups.
How about if you have a special mobile site
and a special desktop site.
Do you have to do anything in particular?
There are a few things that you should
do that you can do to improve Google's understanding
of the content in each of these pages
and how it connects to each other,
and we will talk about that next week.
Between now and then, I would encourage
you to take the mobile friendly test on your site.
Maybe this is the first time you've joined us
or maybe you've been following along with us.
Either way, it will be a good check
to see if you're making progress.
We encourage you to read the webmaster's mobile guide
on our developer website.
And if you have any questions, concerns, or other thoughts,
or want to discuss with other folks
in the community about how to make your website more
mobile friendly, please visit our Google Webmaster Help
forms.
They're a fantastic resource to answering your questions
about how Google understands your website
and how to understand Google's tools and Google's presentation
of your search results.
We do encourage you to follow us on Google+ and on Twitter.
We provide news, announcements, and invitations
to further events there, and we certainly
hope that you'll take advantage of that opportunity.
And with that, thank you for today.
We will look to see if we have any questions from you that
come into the Q&A.
And as always, my name is Juan Felipe Rincon.
You can follow me on Twitter or on Google+ if you would like.
Although the Google Webmasters channel will probably
give you more consistent information than I do.
I don't post all that regularly.
With that, let's see if we have any questions.
We don't have any questions for today,
but we do if you do have any additional questions,
please join in our webmaster forums Off
and we look forward to answering them.
Thank you very much and good afternoon.