Are You Ready for Mobilegeddon?

admin
#Mobile | Posted

On April 21, Google implemented a change in their mobile search to prioritize mobile-friendly web pages to the top of the search results.

Should I be worried about Google's mobile search change?

The new change is designed to provide mobile users with a better experience by yielding more results that are easily accessible on smaller devices. It also is an impetus for companies to transition to their site to more mobile-friendly interfaces.

mobilegeddon3

Your site may not get hit drastically depending on the volume of organic searches your analytics tool, like Google Analytics, reports. For example, in the case of Yahoo!, a highly recognized brand, if some of the top searches include “yahoo” or “yahoo.com,” we shouldn’t expect traffic volumes to decrease dramatically, unlike other popular and general search terms such as “search” or “news,” which could be subject to competing entities vying for the same terms.

In essence, organizations that wish to remain successful online must consider incorporating either a mobile switching mechanism or a responsive layout going forward.  

If you are using a CMS (such as Drupal or Wordpress), there are a large collection of themes you can choose to kickstart your transition rather than starting from scratch.

How do I "go responsive" in the short term?

Transforming a static site into a responsive one is no quick task.  It requires the same level of prototyping, in most cases, as a completely new layout. Many organizations may not be able to make this change immediately to comply with Google's announcement.

Although you should keep this task on the top of your to-do list, for the interim there are some short-term fixes to get the grade. For starters, use this tester to test your site’s mobile-friendly score.

mobilegeddon2

Most recommendations the tool yields might be easily fixable as long as it minimally impacts your stakeholder’s expectations. For starters:

  • Layout must be able to fit inside mobile dimensions. If you hold your phone vertically, and notice that the container of your layout hides within the boundaries of your screen, you should consider using fluid dimensions (e.g. em, %) or make the container smaller.

  • Text must initially be legible. If your mobile device loads content that requires users to pinch to zoom rather than simply swipe up and down to scroll, you are frustrating the visitor, and they will most likely be less motivated to return.

  • Links and buttons must be easily accessible. Not all of us have slim fingers, so having a layout with a lot of links mashed together can be infuriating for the user when they click on the wrong link. If you can’t make the buttons larger, try spacing them out more. Refer to Google’s documentation as a guideline.

  • Avoid using plugins when possible. It was acceptable in the past to use Java applets and Flash to provide more robust functionality to the user. Most browsers are now able to achieve the same results using standardized technologies like Javascript. Plus, third-party plugins are susceptible to incompatibility issues - not only technically but legally as well.

What are the best long-term approaches?

The common approaches are to use a responsive layout or a mobile switcher. Most would opt for the former as, SEO-wise, it includes all the metadata search engines need regardless of the dimensions. Mobile switchers benefit from separate code bases for each layout, but are susceptible to missing data (since some designers might opt to leave out certain features on a page for performance reasons).

A less common approach is to simplify your layout. Most layouts rely on blocks and widgets to display their content, but if your site doesn’t require template-related features (e.g. a blog that merely has a list of blog posts and a list of links at the top and/or bottom), then you might only need to make a few tweaks to pass the test...as long as you are not using fixed widths for font sizes.

mobilegeddon1

Will sites made a decade ago pass the mobile search test?

Interestingly enough, some of the most simple sites on the web still pass the test. It’s not about whether you use sophisticated viewports or CSS syntaxes. Simple HTML was designed to work with a large collection of screen sizes and resolutions in the first place (back when we used to have monitors running on 800x600). What made things more dicey was when we started using placement attributes and pixel-perfect measurements to make our sites look aesthetically pleasing.

Adding such levels of complexity was commonplace because mobile devices were not common a decade ago. But now with devices ranging from small 4” screens to widescreen television sets, it is imperative to accommodate responsiveness in coding and design.

To learn more about this transition, check out Google’s informational FAQ or subscribe to the Phase2 mailing list for more posts on responsive design.

admin