Austin ipad and tablet users along with cell phone devices make up the city’s mobile usage community. The mobile user can now have access to not only their personal apps, but also the tools needed for small business owners on the go. But how does your business website rank with the rest of your competition?
Google provides small business webmasters guidelines for some of the current issues with mobile usability a business owner can face. Here are some of the problems and challenges your website can encounter.
Small Font Size
This report identifies pages where the font size for the page is too small to be legible and would require mobile visitors to “pinch to zoom” in order to read. After specifying a viewport for your web pages, set your font sizes to scale properly within the viewport. Read more about font size best practices in Use Legible Font Sizes.
First, configure a viewport to make sure fonts will be scaled as expected across various devices. Once you’ve configured a viewport, implement the additional recommendations below.
- Use a base font size of 16 CSS pixels. Adjust the size as needed based on properties of the font being used.
- Use sizes relative to the base size to define the typographic scale.
- Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
- Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.
For example, the following CSS snippet defines a baseline font size of 16 CSS pixels, with CSS class ‘small’ that has a font size of 75% the baseline font (12 CSS pixels), and CSS class ‘large’ that has a font size of 125% the baseline font (20 CSS pixels):
font-size: 12px; /* 75% of the baseline */
font-size: 20px; /* 125% of the baseline */
Touch Elements Too Close
This report shows the URLs for sites where touch elements, such as buttons and navigational links, are so close to each other that a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element. To fix these errors, make sure to correctly size and space buttons and navigational links to be suitable for your mobile visitors. Read more in Size Tap Targets Appropriately.
Size Tap Targets Appropriately
This rule triggers when PageSpeed Insights detects that certain tap targets (e.g. buttons, links, or form fields) may be too small or too close together for a user to easily tap on a touchscreen.
Small or tightly packed links or buttons are more difficult for users to accurately press on a touchscreen than with a traditional mouse cursor. To prevent users from being frustrated by accidentally hitting the wrong ones, tap targets should be made sufficiently large and far from other tap targets that a user can press them without their finger pad overlapping any other tap targets. The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site with a properly-set mobile viewport.
You should ensure that the most important tap targets on your site—the ones users will be using the most often—are large enough to be easy to press, at least 48 CSS pixels tall/wide (assuming you have configured your viewport properly). Less frequently-used links can be smaller, but should still have spacing between them and other links, so that a 10mm finger pad would not accidentally press both links at once. Users should not have to pinch zoom (or rely on other browser UI features for disambiguating finger taps, such as Chrome’s popup magnifying glass) in order to easily and reliably press the desired button or link.
Make important tap targets large enough to be easy to press
This applies to the tap targets your users will use the most, such as buttons for frequently-used actions, search bars and other important form fields, and primary navigational links. These tap targets should be at least 7mm (48 CSS pixels if you have configured your viewport properly), and should have additional spacing around them if they are any smaller than 7mm.
Ensure there is extra spacing between smaller tap targets
It is reasonable for infrequently-used links or buttons to be smaller than the recommended size of 7mm, but there should still be no other tap targets within 5mm (32 CSS pixels), both horizontally and vertically, so that a user’s finger pressing on one tap target will not inadvertently touch another tap target.
Viewport not configured
Because visitors to your site use a variety of devices with varying screen sizes—from large desktop monitors, to tablets and small smartphones—your pages should specify a viewport using the meta viewport tag. This tag tells browsers how to adjust the page’s dimension and scaling to suit the device. Learn more in Responsive Web Design Basics.