Creating a Great Mobile Website Means Engineering a Great User Experience
The best responsive websites focus on the visitors and how to satisfy their needs. To create a great responsive website, web developers and marketers need to avoid these five critical mobile responsive problems that affect usability (and search rankings).
Google created the Mobile-Friendly Test you can use to see where your site stands. If it finds errors, they will be one of the five items listed below.
Flash Usage
Flash is an Adobe product that requires the use of their plug-in in your web browser. Flash is not natively supported in all browsers, and it does not work at all on Apple devices. The end user is responsible for maintaining it, updating it and troubleshooting it.
Technology has evolved to the point where the level of native browser technologies (CSS, Javascript, HTML, etc.) that are found in all browsers can replicate most of the effects that developers relied on Flash to do.
So for mobile visits, it's important to use these other tools and stay away from Flash.
Even Adobe has stopped it’s support of mobile Flash. The technology still lives on in desktop applications, but thanks to Steve Jobs and his belief that the web should not be reliant on 3rd party fixes, flash is pretty much dead for mobile devices.
Touch Elements Too Close
When you are using your finger as a cursor, you need an area large enough for the finger to accurately choose the intended link or button. These interactive links on a mobile interface are thought of as "touch elements."
When touch elements don't account for the size of a human finger, it means the user can't do what they came to the website for.
It’s the simple logistics of having items too close to each other. It’s often referred to as the hit-target. Google recommends that any hit-target be 48 CSS pixels in size. (Think about someone with gloves using a phone during the Minnesota winter.)
Content Not Sized to Viewport
The viewport is the viewing region of your screen. There are certain HTML elements that do not conform to a viewport, meaning that they scale to fit the width of the device. (Think: HTML tables; they do not scale and the content doesn’t drop to the next line.)
Also, let's say you have images that have a declared dimension of 1000 pixels wide. This width is much wider than the viewport. The image would extend beyond the edge of the screen and cause the site to scroll horizontally.
This is only OK if that is the intention of the site developer (but side scrolling is another general item Google frowns upon).
Viewport Not Configured
Configuring a viewport means that you have added meta information into the head section of your HTML document. It tells certain browsers how to display the content.
The default would be to fit the page content to the window, but that would make a site really small on mobile devices.
At Media Junction, we usually override the default behavior by setting the zoom to 1. That means that 16px body copy would display at a full 16px.
Additionally, we could chose to scale content down to fit a particular device.
Small Font Size
Small font size errors are usually the result of link text being too small. It relates back to the click area.
Google is really starting to favor sites that are keeping accessibility and usability best practices in mind when they are being built and this requires fonts to render at least 14 points by default with the guidance leaning to 16 point type.