Google's Mobile Update: Know All the Pros & Cons of Your Next Mobile Friendly Site
As you know, Google has announced that as of today, the algorithm will be expanding its use of mobile-friendliness as a ranking signal for mobile searches.
The majority of websites that will suffer from this update will be the ones that only feature a desktop-oriented design. Adapting the design to work for smartphones and tablets as well may be easy, requiring a few changes to style sheets, or may be difficult, requiring a complete redesign.
Google is continually factoring user experience into their ranking evaluations, and with the explosion in mobile device usage over the past few years, this new announcement should come as no surprise.
Global Web Index (GWI) found in Q3 2014 that across 90% of the global internet audience surveyed, 80% of adults owned a smartphone and almost 50% owned a tablet, with 75% and 37% respectively using their device to surf the net.
In May 2014 Google added "User Experience" recommendations in their PageSpeed Insights tool, an application that allows owners to check whether their sites provide a good mobile experience.
Five important guidelines for mobile
Soon after, Google announced their Webmaster Tools addition to track pages with "Mobile Usability" errors - relating to five important guidelines:
- A defined viewing area that adjusts to the device's screen.
- Content that flows in the viewport, so users don't have to scroll or pinch the screen to see the entire page.
- Fonts that scale for easier reading on small screens.
- Easy-to-touch elements (e.g. buttons) that are well-spaced from other touch elements.
- Visual design and motion driven by mobile-friendly technology.
Then Google launched the "Mobile-Friendly Test" tool, that checks any given page against the guidelines mentioned earlier. Around the same time, the search engine launched the "Mobile-Friendly" label in search results, based on the result of the test tool.
Starting on the 21st of April, the new update which boosts pages offering a good mobile experience will be applied solely based on the "Mobile-Friendly" label.
Actionable ways to decide how to go Mobile
There are different ways to go mobile with your website and it's important to know the types available from both a design and SEO viewpoint.
In their Mobile SEO guide, Google listed three possible mobile configurations that site owners can choose from: Responsive Web Design, Dynamic Serving and Separate URLs.
Wondering which one you should choose? Here and the pros and cons of each!
1. Responsive Web Design
Responsive web design is where the same HTML code is sent to all devices but the browser is instructed on how to adjust the page to best fit the screen (known as rendering).
- There is only one URL
- Once the website has been adapted, future design changes have to be made only once.
- Web developers use a single set of code for all platforms.
- The website can be adapted to different devices.
- Responsive web design doesn't have to detect the 'user-agent' (the browser or device requesting the web page) and tends to load more quickly.
- If the desktop website is complex it may be impossible to create a responsive web design to fit onto a mobile device screen.
- It may take a lot of technical know-how to create a responsive web design from a desktop website.
- With a single website, even if it is responsive, you may not be able to provide mobile users with the experience they expect.
2. Dynamic Serving
A separate version of the design is created for mobile users, but the URL of the desktop website is maintained - the HTML code and CSS is served to different devices depending on the requesting 'user agent'.
- There is only one URL.
- Since the code used to render the page is separate, the design can be created for the needs of mobile users.
- There is no need for redirection.
- There are two sets of page code to maintain.
- The list of user-agent strings needs to be constantly updated to keep up with new mobile device models.
- If the user-agent detection has a glitch, the user may see the wrong version of the website.
3. Separate URLs (Separate Mobile Website)
The desktop URL has an equivalent but separate subdomain created for mobile users. A separate page is served to desktops and mobile devices, using user-agent detection and redirection to the correct URL.
- The code used to render the page is separate, so the design can be created to match mobile users' expectations.
- Doesn't require altering the desktop design.
- More error-prone since multiple tags need to be configured.
- The separate subdomain requires further configuration.
- Mobile customers who enter the desktop URL will have to wait to be redirected.
Once you decide on what type of mobile website is best for your business, and the new site is up and running, check if everything is in order with this mobile SEO checklist:
1. Run the Mobile-Friendly Test tool on a few page types to make sure they pass the test.
2. To make sure Google "sees" these pages properly, use Webmaster Tools' "Fetch as Google" feature (with Fetch and Render), using the Mobile: Smartphone option, to verify that no design elements (like images) are missing.
3. If you opted for Dynamic Serving, use Webmaster Tools' "Fetch as Google" feature to ensure the Vary HTTP Header is properly set.
4. If you opted for Separate URLs, use Webmaster Tools' "Fetch as Google" feature, using both Desktop and Mobile: Smartphone options to ensure canonical and alternate tags are properly set.
5. After everything checks out fine, use the "Submit to index" feature on the homepage and main categories (using the "Crawl this URL and its direct links" option) to expedite the indexing of your design and code changes.
6. Monitor the "Mobile Usability" section in Webmaster Tools for any errors that may show up over time.
You should now be "mobile-proof" and ready to offer your users the best possible user experience and also benefit from Google's ranking boost.
For more info on how to have a smooth transition to mobile, read the whole guide to this update on New Design Group's web design blog.
Follow Dmitri Logounov on Twitter