Google’s #MobileMadness:

Mobile Web Design & Your Search Rankings

Last week, Google shook things up for digital marketers by releasing an update to its algorithm.

The search engine now considers mobile friendliness as a ranking signal for its mobile results because the proportion of users searching from mobile devices has grown significantly over the past few years. Mobile visitors account for almost half of all traffic in comparison to desktop users and this number continues to rise. Google wants to provide the most relevant results that are optimized for the end user and their device.

So how do you make sure you don’t plummet in mobile search results? Get a plan to build a responsive website.

A responsive website adapts to the device on which it’s being displayed. The most common technique is to use CSS media queries to conditionally apply styles based on the size of the browser window, without having to use different HTML content.

For example, when you visit the new Parisleaf homepage on a desktop, it looks like this:

When you visit it on mobile device, like the iPhone 6 Plus, it looks like this:

Notice how the text adjusts size and layout automatically in the mobile version? That’s the responsive stylesheets at work, reorganizing the site based on the code in the stylesheets.

You can try it with our site if you’re on a desktop. Grab any corner of the window and shrink it down. You’ll see how our coding automatically reorganizes the content for you. Websites that aren’t designed with responsive code won’t do that.

How do I know my site is mobile-friendly?

If you have to pinch-and-zoom to view content on your screen, it was not developed for mobile.

Google has also provided a Mobile-Friendly Tool to test your site against how it interprets a mobile-friendly, responsive web design. Plug in your URL, click analyze, and your results will be displayed with a ‘yes’ or ‘no’ answer.

Some of the elements Google looks for to determine mobile-friendliness are:

  • Text size
  • Relative space around clickable links
  • Ease of use on mobile devices
  • Condensed navigation and information that differs from your desktop website design

What are some things you should avoid before transitioning to a mobile friendly website?

  • Building a mobile site on another domain, subdomain, or subfolder from your desktop site (eg. m.yourwebsite.com).
  • Working with a developer who is not well-versed in responsive web design. Check out the developer’s portfolio and contact past clients.
  • Not taking into account all device sizes like iPads, Google tablets, different Android devices, etc.

How do I transition to mobile?

Luckily, if you’ve designed and developed a website from the ground up with us in the past couple of years, it’s already been designed as a responsive website.

If you haven’t touched your website in the past couple of years, here are a few things to consider:

  • Responsive websites have to be built from the ground up. There’s no effective way to “convert” an existing non-responsive site to a responsive website.
  • Look for partners that understand the role content and user experience have in the web design and development process.
  • Try to avoid templates because they aren’t flexible and limit your ability to customize the site.

Need some examples? Check out our work with Seattle-based Reactor and see how we combine great design with responsive functionality.

Want to learn a little more about the web design process? Check out this interview with Benji Haselhurst, our web designer, as he talks about the process of designing the new Parisleaf site.

Need a personal touch to see if your website is ready? We’re always ready to help! Just email Chad, and we’ll get a time set up!

About Maria Juan
Maria Juan is a native Floridian and recently joined the Parisleaf family by way of San Diego.

An analytics junkie and self-proclaimed social media addict, she provides organizations strategic digital marketing campaigns to reach broader and newer audiences through the power of the Interwebs.

She’s always happy to chat about it on Twitter at @_mariajuan or LinkedIn.


Originally published at beta.parisleaf.com.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.