In many industries, this may be conservative and, at the agency I head up in the UK, Bowler Hat, our B2C clients are seeing up to 85 percent of all site sessions conducted on mobile devices.
Suffice it to say, mobile has well and truly arrived. Yet, while responsive design has been around for a while now and is fairly well-established, the majority of sites tend to fall down on usability. That is, the majority of sites are still built for desktop and then dialed back for mobile. That form-fill that was mildly annoying on desktop is an absolute pig on mobile. Even if it is responsive.
This is not good enough in the mobile-first world we are racing toward in 2017.
In this article, I am going to look at how you can ensure you are truly optimizing for mobile users. We will look at the fundamentals of responsive design and page speed, but we will also look beyond this at user experience tailored to mobile devices. We will then wrap this up with a mobile optimization checklist that you can use to identify optimization opportunities.
Our goal here is to go the extra distance to create fully mobile-focused websites; to delight our users and drive conversions; to use mobile optimization to develop a strategic advantage over the competition. And, of course, Google wants to delight mobile users so we can improve engagement and on-page ranking factors and also benefit from improved SEO. Better for users. Better for search engines. Win-win.
Our first focus in gaining this advantage is to look at just how we deliver mobile-friendly content. There are three possible approaches::
- Responsive web design
- Dynamic content
- Separate URLs (mobile site)
Responsive website design is Google’s recommended way to tackle mobile-friendly sites and, as such, is the approach you should take unless you have very strong reasons not to.
Responsive design has been around for a while, so this is not a new concept. However, we still see sites that are technically responsive while not providing a strong experience for mobile users.
Ultimately, responsive design is just a small part of creating truly mobile-friendly websites.
You should utilize these tools while developing your new site and use Search Console to keep tabs on problems throughout the life of the site.
Search Console looks at the following mobile usability issues:
- Flash usage — Most mobile browsers do not render Flash and, as such, you will want to use more modern technologies.
- Viewport not configured — The viewport metatag aids browsers in scaling a page to suit a specific device.
- Fixed-width viewport — This problem attempts to circumvent mobile design with fixed width pages and is best shelved when a responsive design is adopted.
- Content not sized to viewport — Here the page content does not fit the window, and a user has to scroll. This can be fixed with relative rather than fixed widths.
- Small font size — This is a scaling issue and requires users to pinch the screen to zoom in.
- Touch elements too close — This is a common usability issue where it is too hard to tap a given element without also hitting the neighboring element.
- Interstitial usage — A full-screen pop-up often represents poor user experience on a mobile device and is something that Google is looking to crack down on in 2017.
These are the key technical elements that Google is looking for and reporting on to webmasters.
Optimizing your site to remove these issues may have positive effects on how the usability of your site is graded by Google and certainly has positive implications for users. Again, win-win.
Mobile optimization checklist
So we have three fundamental components of building mobile sites that your users will love (or that will delight your users and drive conversions in Google’s vernacular).
- Responsive design
- Page loading speed
- Mobile design and usability
The following is a checklist based on the the three key areas reviewed in this article. We use this approach to review sites to determine areas that can be improved for mobile users.
We have reviewed many sites and have yet to find any that provide a perfect mobile experience. In most cases, the sites have a wide range of potential optimization opportunities.
Review this list point by point and refer back to the designing for multiple screens whitepaper for any required clarifications.
Basic mobile optimization
- Responsive design
- Page speed
- Hosting speed
Home page and site navigation
- Keep calls to action front and center.
- Keep menus short and sweet.
- Make it easy to get back to the home page.
- Don’t let promotions steal the show.
- Make site search visible.
- Ensure site search results are relevant.
- Implement filters to improve site search usability.
- Guide users to better search results.
Commerce and conversions
- Let users explore before they commit.
- Let users purchase as a guest.
- Use existing information to maximize convenience.
- Use click-to-call buttons for complex tasks.
- Make it easy to finish converting on another device.
- Streamline form entry.
- Choose the simplest input method for each task.
- Provide a visual calendar for selecting dates.
- Minimize form errors with labeling and real-time validation.
- Design efficient forms.
Usability and form factor
- Optimize your entire site for mobile.
- Don’t make users pinch to zoom.
- Make product images expandable.
- Tell users which screen orientation works best.
- Keep your user in a single browser window.
- Avoid “full site” labeling.
- Be clear why you need a user’s location.