What is “Mobile Usability” in GWT?

If you click on the Search Traffic tab on the side bar of GWT, you’ll see a link for Mobile Usability.
image083

The Mobile Usability page lets you know how many pages on your website have errors related to mobile usability. Some of the common errors related to mobile are: viewport not being configured, touch elements too close, small font size, flash usage and content not sized to viewport.
image085

A simple way to fix viewport not being configured errors is to add this meta tag to all of your pages in the section.

Filed under: Documentation→Website Performance
Tags: , , ,

Why you should adjust size content to viewport

Sometimes you may have content on your page such as an image that has a width that is larger than the device’s width causing the horizontal scroll bar to show up. It is important to adjust the size content to fit within the width of the viewport so that the user does not need to scroll horizontally to see the entire page. You can do this by using relative width sizes such as:
width:100%

Making images and content responsive is one way to improve the usability of your website.

Filed under: Documentation→Website Performance
Tags: , , , , , ,

Why you should size tap targets appropriately

We have all experienced a website on our mobile device that had tightly packed links or buttons making it difficult to accurately press on a touchscreen. You may click on one link but it sends you to a link that is next to it that you did not want to go to. This is why you should space your links appropriately so that the user does not click on a link he/she wasn’t aiming for. This also makes it so that the user does not need to zoom in to carefully pick the link they want to go to. Make the important tap targets larger than the ones that are not important. Make sure that there is proper spacing for smaller tap targets. Designing a good user interface will improve the usability of your website tremendously.

Filed under: Documentation→Website Performance
Tags: , , , , ,

Why you should use legible font sizes

To improve the usability of your website, you should always use a base font size of 16 CSS pixels. Furthermore, use sizes relative to the base size to define the typographic scale. It is common practice to use a line-height of 1.2em to have the proper vertical space between characters. Lastly, restrict the number of fonts used. Having too many fonts and font sizes can give your page layout a messy look.

Filed under: Documentation→Website Performance
Tags: , , , ,