The Ultimate Guide to Mobile Friendly Web Design

Remember “mobilegeddon” in April of 2015? It sent webmasters and business owners into a panicked race to make their websites “mobile friendly.” However, despite all the hysteria, the data suggested that SERP changes were not as dramatic as expected. While the sky didn’t fall, one thing is clear; mobile search is here to stay. Now, with Google announcing that it would be updating mobile search results as of May, here’s how to plan for mobile search without getting caught in the hype.

How high of a priority is mobile search?

To be clear, mobile search is here to stay, and I’m certainly not suggesting you should ignore it if you’re in the process of redesigning or building a new website. But for startups or small businesses that may have limited resources, it’s important to allocate those resources where they will be most beneficial. So how do you know if a mobile friendly site is your highest priority? A good place to start is your analytics. Go to Audience -> Mobile -> Overview to get an idea of the current percentage of mobile users visiting your site. Of course, a low number of mobile users may be more indicative of a poorly optimized site than an industry trend, so do some research on how & when your audience uses mobile. Google’s Consumer Barometer tool and the AdWords Display Planner are great places to start

I have an app for my website, is that considered mobile friendly?

No — while apps themselves are obviously designed to be used on mobile, having an app doesn’t mean your website will pass Google’s mobile friendly test. Google clarified late last year that app install interstitials do not make a website mobile friendly, and thus would not earn the “mobile friendly” badge in the SERP. This refers to banners that take up the whole screen to prompt users to download an app when they visit a website on a mobile device.

I’ve decided a mobile friendly website is a high priority. What now?

If you’ve decided that you do in fact need a mobile site, there are a number of ways you can approach this:

  • Responsive Web Design (Google’s official recommendation)
  • Dynamic Serving
  • Separate Mobile Site

The best choice for you will depend on what your goals are. We’ll go over an explanation of each option, as well as the pros and cons of each.

Responsive Web Design

A responsive website uses the same HTML code for all devices. CSS is used to alter the website display for specific screen sizes or devices. Since the HTML and URLs remain the same all the time, Google typically has an easier time crawling these sites. While Google has stated numerous times that this is the preferred method, the jury is still out on whether it directly affects rankings.

Advantages of responsive web design:

  • URLs stay the same across devices
  • HTML stays the same across devices
  • Easier for Google to index your site
  • Easier maintenance over time
  • Faster load times (no redirection required)
  • Google’s recommended method

Disadvantages of responsive web design:

  • Higher cost up front
  • “responsive” doesn’t automatically guarantee optimization for conversion

Responsive websites are much less costly to maintain long term, but can be more expensive up front. In addition, since users don’t need to be redirected to a mobile version of the site, responsive sites usually have faster load times.

Dynamic Serving (also referred to as Adaptive Design)

Websites using Dynamic Serving keep the same URL across devices, but alter the HTML and CSS depending on the device (as opposed to only the CSS changing in Responsive Design). Since mobile content is “hidden” from Google’s desktop crawlers, it can be difficult for Google to “see” the mobile friendly version of the site without a Vary HTTP Header to point it out.

Advantages of dynamic serving

  • URLs stay the same across devices
  • Useful for “feature phone” users that cannot display CSS (common in many countries outside the U.S.)
  • Allows for optimization for specific devices
  • Allows for more targeted optimization of mobile specific keywords (ex: “restaurant near me” or other GPS targeted keywords)

Disadvantages of dynamic serving

  • Can be difficult to implement correctly (and can cause serious problems if implemented incorrectly)
  • More costly to maintain separate versions of a website

As Bryson Meunier pointed out, Responsive Design does not automatically guarantee true “optimization” for mobile users. Mobile users behave differently from desktop users, especially when it comes to search terms. Since Google can track a user’s exact location via the device’s GPS, mobile users often search for keywords “near me.” If your business or landing page is highly targeted to mobile users, this may make more sense for you.

Separate Mobile Site

As the name implies, a separate mobile site involves creating mobile (or tablet) specific URLs that correspond to a desktop version of those URLs. We see this often when we are redirected to an “m.” url when visiting a website on mobile. For example, “” becomes “” when you visit the website on a mobile device.

Advantages of a separate mobile site:

  • Less expensive up front
  • Allows more control of optimization specifically for mobile (ex: you can strip elements of a website that don’t scale well or aren’t necessary, and focus more on conversions)

Disadvantages of a separate mobile site:

  • More maintenance time & costs for multiple versions of a site
  • Requires 302 redirects to associate each desktop page with the appropriate mobile page
  • In some cases, sharing links between mobile & desktop can be confusing to users

Using a separate mobile version of a page allows for much more control and optimization, but webmasters must be committed to maintaining both (or all) versions of the website in question.

The bottom line

The key takeaway from all this is that there’s no single “correct” way to make a website “mobile friendly.” Each option has its pros and cons, and I encourage you to explore the idea that you can employ more than one method to meet your needs. For example, maybe a responsive website meets most of your needs, but you employ mobile specific pages for a targeted campaign. The best choice for your business depends on your unique goals, audience, and budget. That’s why it’s so important for web design and SEO to be combined during this process — neither one should be considered as an afterthought.

All Articles
Contact Us
Call Adlava