Create a Mobile-Friendly Website and Avoid These Hazards

In a previous post, we discussed the importance of a mobile-friendly website and some freely available testing tools. Now it’s time to interpret the results and get to work.

Let’s look at three of the most common issues that can negatively affect your mobile site performance and how you can get started fixing them.

The Text is Too Small

If users need to zoom in to comfortably read your content or navigate your site, the text is too small.

The rule of thumb is that a mobile-friendly website shouldn’t require more than one finger to navigate. If it does, visitors probably won’t linger very long.

Make sure your site is using responsive web design so that it can scale properly and automatically on different devices.

One aspect of responsive web design is including a meta viewport tag on web pages to give browsers instructions about how to scale the content in different circumstances. You can set font sizes to scale properly within this tag.

Clickable Elements Too Close Together

There are few things more frustrating than trying to navigate a site and tapping the wrong link by accident. 

Make sure clickable elements are far enough apart that users can easily navigate your site. The typical guideline is 48×48 pixels for a tap target, which, incidentally, is about the size of a person’s fingertip on most displays.

Content Wider Than Screen

The horizontal scrollbar is so last century. This relic appears when content is wider than the viewport.  

The fix is to ensure that pages use relative width and positioning values for page elements instead of fixed values. It’s also important to ensure that images can scale properly for different devices.

Mobile-Friendly Website = User-Friendly

You may have noticed a theme to these fixes for common issues: The easier and more comfortable your site is for users, the higher your mobile-friendly score. With that in mind, it’s preferable to design your site for mobile from the get-go. We’ll explore some best-practices in our next post.