The Executive Suite: How to Fix Common Mobile Content and Usability Issues

Mobile recently became the dominant device for search queries, finally toppling desktop usage. We knew this day would come; the prevalence of these electronics only continues to grow. So it’s time to up your mobile content game.

A recent Pew Research Study revealed that not only has the number of smartphone owners nearly doubled since 2011, up to 64% from 35%, but 46% of smartphone owners say this gadget is something “they couldn’t live without”.

Jerry Dischler, Google’s vice president of product management, commented on this movement, saying, “Billions of times per day, consumers turn to Google for I want-to-know, I want-to-go, I want-to-do, and I want-to-buy moments. And at these times, consumers are increasingly picking up their smartphones for answers. In fact, more Google searches take place on mobile devices than on computers in 10 countries including the U.S. and Japan.”

The facts are plain and simple, mobile is taking over and Google has already been taking steps to accommodate this. To help ensure that your business is also focused on mobile content and usability, here are solutions for some of today’s most common mobile content and ranking issues.

Viewport Configuration, or Responsive Design
For those that are unaware, viewport controls the way web pages are displayed on mobile devices. Without a configured viewport, pages will appear on mobile devices as the typical desktop screen width, only scaled to fit the screen. This leads to an extremely poor user experience since the visitor will need to scroll side to side to view the content on the site. Not to mention that Google will likely penalize you. By establishing a viewport, a site owner has complete control over the page width and scaling across various devices.

For this to be resolved a site must be equipped with a “meta viewport tag”. This tag informs various browsers of how to alter the page dimension and scaling to accommodate the device viewing the site. By utilizing Google’s Responsive Web Design Basics countless issues to support layout changes such as setting the viewport, size content to viewport, CSS media queries for responsiveness, and more can be resolved.

Fixed-Width Viewport
Thanks to Google’s Mobile Usability reports, you are able to monitor any of your site’s pages that are set to a fixed width for viewport. Fixed width creates the same negative user experience described above, and if this issue is occurring, you are likely being penalized and should fix the problem as soon as possible.

To alleviate this concern, a responsive design for all web pages is highly recommended. The viewport must be set to sync up with the device’s width and scale accordingly. To do this correctly, you will want to reference the experts. Check out how to Set the Viewport in Google’s Web Fundamentals.

Content Has Not Been Sized to the Viewport
This again brings us back to the issue of horizontal scrolling. This is predominantly caused by two issues. The first is when absolute values in CSS declaration are implemented. The second is caused by images that are set to specific browser widths. Either way, this will ultimately cause a “content not sized to viewport” error.

In order for this problem to be remedied, all site pages must utilize the relative width and position values for CSS elements. Additionally, an image must have the ability to scale under Google’s instruction and guidance. Check out Size Content to the Viewport on Google’s site for more information.

Font Size
On the other side of the horizontal scrolling issue is the “pinch to zoom” problem. This becomes problematic when the font size for the page is too small and illegible. Luckily, this is an easy fix. Simply set your font sizes to scale properly within the viewport as well. You can learn more about this in Google’s Use Legible Font Size guide.

Flash
As it currently stands, the majority of mobile browsers do not accommodate Flash-based content. Sites that employ any content that relies on Flash, whether it be for animations, videos, or navigation, are essentially damaging the site’s potential since users on mobile can’t view the content.

In the unfortunate event that you receive a Flash error message, Google provides the necessary information to resolve the issue. It’s likely caused by CSS vs. JavaScript animation conflict, animation timing, or custom easing. A review of Google’s Look and Feel guide will help reveal the source and solution to whatever Flash issue is ailing your site.

Small screens have taken over. It is absolutely essential for your site and its content to be effective on mobile devices across the board. Google has laid out all of the necessary information and tools to set you up for success. Make mobile your priority and your users will respond in kind.