Google recently announced on their blog that starting April 21, 2015, the mobile-friendliness of websites will have a significant impact on search results. How does Google define “mobile-friendliness” and what are the implications of this change on design for the web?
Mobile-Friendliness
On a basic level, Google is defining a mobile-friendly website as one that is “readable and immediately usable” and does NOT require a user to pinch or zoom in order for the content to be legible or for the site to be navigable.
To find out whether Google views your site as mobile-friendly, run your URL through their Mobile-Friendly Test. If you have Google Webmaster Tools set up on your site, you can use the Mobile Usability Report to get a full audit of potential mobile usability issues across your site.
Mobile-Friendly Site Configurations
There are three site configurations that Google recognizes as mobile-friendly: responsive web design, dynamic serving, and separate URLs.
Responsive web design uses the same HTML on all screen sizes. CSS media queries are used to change the format of the content at different widths. “Responsive web design is Google’s recommended configuration,” according to part of their getting started with mobile manual.
Dynamic serving changes the HTML and/or CSS that is served to the browser dependent on the device. On the face of it, this sounds like it might promote a more optimal user experience than responsive web design, but it is impossible to guarantee that the website will be able to correctly identify the device on which it will be served, which can lead to literal crossed wires that will serve the wrong version of the site to a particular device.
Using separate URLs for desktop and mobile versions of the site is one of the oldest ways of serving content optimized for mobile devices. This type of configuration usually uses the format sampledomain.com for the desktop URL and m.sampledomain.com for the mobile URL. This strategy can suffer from the same user-detection agent problems as sites that are structured to dynamically serve the content. Additionally, this strategy also requires maintaining two versions of the website, one for each URL. This is disadvantageous because such sites can be quite difficult to maintain and because having more than one URL can dilute search engine results since multiple domains are being crawled for each page.
Implications on Design
So what does all of this mean in terms of design considerations? In general, the new mobile-friendliness standards by which Google will be judging websites are reflective of responsive web design best practices that have been considered standard for years.
Some key design elements that should always be taken into consideration from a responsive design and SEO perspective are:
Content Reflow
All content should reflow as necessary to fit the viewport well regardless of width. This includes images and videos, both of which should never flow beyond the available screen real estate. Additionally, absolute widths should be avoided in favor of percentage widths for all elements on the page as absolute widths may cause overflow past the viewport on some displays. Media queries should be used as necessary to reflow content as screen width changes.
Speaking of the viewport, a meta tag should be added to the head of the document that specifies width=device-width and initial-scale=1 like so:
<meta name=viewport content="width=device-width, initial-scale=1">
Typography
Google has very specific recommendations when it comes to typography for the web. Of course, variations on these guidelines may be necessary when it comes to a particular font, but in general, Google recommends the following:
- 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
Tap Target and Link Sizes
A “tap target” is a button, navigational item, or link on your website. These targets should be large enough on mobile to promote ease of use by site visitors. Google recommends that the most important targets be a minimum 48px wide and tall and that there be ample space (about 32px) between targets. Less important targets and links can be smaller, but they should still be spaced far enough apart so that a user’s finger can easily tap on one link without accidentally tapping another link.
Conclusion
The changes to Google’s search algorithms that will reward so-called “mobile-friendliness” are reflective of mobile usability best practices that have emerged since the debut of smartphones in the market. If you’ve already been designing and building websites with responsive design principles and an eye towards usability of those websites on mobile devices, they will likely pass Google’s Mobile-Friendly Test with flying colors. If there are still a few fixed width websites that you maintain, these latest changes to Google’s algorithm may help provide a business rationale for retrofitting or redesigning these websites.