Category: Strategy

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.

As I’ve previously described, I am planning to design and build my own theme for Responsive Geometry from the ground up. Now that Responsive Geometry exists, the next step in the process is defining project requirements that will help guide the design and development process. There are six major questions I’m asking myself:

Visual Identity: What kind of look and feel do I want for the theme?

There is so much I need to explore to answer this question completely and much of that exploration is going to happen in the design phase of the project.

To start though, I answered a question that I’ve often seen used with clients. What are some adjectives that you would use to describe the look and feel of your future website? My adjectives include:

• bright
• clean
• intricate
• colorful
• welcoming
• sleek

Search engine optimization: What design elements do I need to incorporate in order to make having great SEO achievable?

Google has recently announced that they are changing their search algorithms in a few weeks to award mobile friendly website formats in search results. There are a few design implications to consider as a result of these new Google-established parameters. To be clear, since the dawn of responsive websites, it has always been a good idea to consider the following requirements:

• Content should reflow to fit the width of the device.
• Elements such as images or videos should change width as necessary so that they never flow beyond the available screen real estate.
• Media queries should reformat content as screen width changes.
• Google recommends a 16px base font size.
• Typographic hierarchy should be defined relative to the base font size.
• Make sure that text has reasonable line heights.
• Use a restricted number of font faces in the layout.
• Make sure any “tap targets” are sized appropriately (minimum 48px wide and tall for your most important targets) on mobile. There should also be ample space (about 32px) of space between targets.

Aside from pure design considerations, there are a number of best practices that should be incorporated into the code and content structure as well, including the following.

• Use alt tags for all images.
• Make sure post titles use <h1> tags and that header structures are used hierarchically throughout the content.
• Use breadcrumbs that reflect category structures.

Content: What types of content formats will I need to account for?

Since Responsive Geometry is intended to be a blog that covers both design and code related topics, there are a number of specific content pieces that I want to make sure I account for in terms of design. I want to make sure design patterns are considered for the following content pieces:

• a standard blog post
• a tutorial
• a code snippet
• a screenshot
• an author biography
• a collection of related posts
• a category page

User experience: What are the user goals for visitors to the site?

More than anything else, I want site visitors to be able to find what they are looking for easily. I want navigation and content structure to be logical and to support a visitor’s individual goals when they are looking for something on the site.

I also want users to be able to interact with the content in a meaningful way if they so choose. I want to make sure commenting on a post or sharing it through social media is easy and accessible.

Accessibility: What do I need to do to provide the best experience for all visitors?

I want to make sure that I build a website that is as accessible as possible because inclusivity of all people who access the internet is really important to me. As such, I’m going to try my best to comply with The Accessibility Project‘s Web Accessibility Checklist.

Browser compatibility is also a huge accessibility consideration. As such I’ll aim for graceful degradation in terms of my code and I’ll test my final theme in Internet Explorer 9+, Chrome, Firefox, Safari, Opera, and mobile browsers on iPhone, iPad, and Android.

Integrations: Are there connections to other software that I need the site to have?

This is a question I ask of project managers and clients before embarking on any web build.

In the case of Responsive Geometry, the answer to this question is simple: I want the website to integrate with Mailchimp so that users can sign up for emails. Otherwise, I can’t think of any other integrations the site will need.

Conclusion

Systematically thinking through project requirements for my own projects is not something I’ve done before, though the exercise of writing this post has taught me that I should. Though many of the items I outlined here are reflective of the approach I typically take to building websites, I think it is going to be infinitely helpful to be able to refer to these requirements as I move to the information architecture phase of the project.

Do you usually determine requirements for your personal projects or do you tend to jump right in? I’d love to hear your thoughts on this topic in the comments!