Mobile SEO: Responsive Design vs. Separate Mobile Site vs. Dynamic Serving

By Jim Robinson | SEO
Posted April 6, 2015






Mobile SEO Implementation

UPDATE – May 11,2016: I originally wrote this post prior to Google’s “Mobilegeddon” update in April of 2015, and I’ve been happy to see so many people finding it useful when deciding between responsive vs. separate mobile site designs, as well as dynamic serving. From my standpoint, everything you’ll read here is still valid, so read with confidence! -JR

The SEO industry is abuzz with talk of Google’s impending mobile-friendly algorithm update on 4/21/15. If you receive significant search traffic from mobile devices and don’t have a mobile-friendly website, there’s a good chance you could be impacted by this change in a couple weeks.

Hopefully you’re in good shape and have already verified that your site is mobile-friendly. If you’re starting from scratch, however, and are scrambling to get a solution in place, one of the first decisions you’ll need to make is how to approach the implementation at a high-level: responsive design, separate mobile site, or dynamic serving. Here’s a quick run-down of each to make sure you head down the right path from the beginning.

Responsive Design

Responsive design delivers the same code to the browser on a single URL for each page, regardless of device, and adjusts the display in a fluid manner to fit varying display sizes. And because you’re delivering the same page to all devices, responsive design is easy to maintain and less complicated in terms of configuration for search engines.

The image below shows a typical scenario for responsive design. As you can see, there’s no device detection that occurs when the page is served; whether it’s a desktop or mobile device, each user agent (or device type) enters on a single URL and gets the same HTML content.

Responsive Design

With all the discussion surrounding Google’s mobile-friendly algorithm update, I’ve noticed a lot of people suggesting that mobile-friendliness is synonymous responsive design – if you’re not using responsive design, you’re not mobile-friendly. That’s simply not true. There are some cases were you wouldn’t want to deliver the same payload to a mobile device as you do to a desktop computer, and attempting to do so would actually provide a poor user experience.

Google recommends responsive design in their mobile documentation because it’s easier to maintain and tends to have fewer implementation issues. However, I’ve seen no evidence that there’s an inherent ranking advantage to using responsive design.

Pros and cons of Responsive Design:

Pros Cons
  • Easier and cheaper to maintain.
  • One URL for all devices. No need for complicated annotation.
  • No need for complicated device detection and redirection.
  • Large pages that are fine for desktop may be slow to load on mobile.
  • Doesn’t offer a fully mobile-centric user experience.

 

Separate Mobile Site

You can also host a mobile version of your site on separate URLs, such as a mobile sub-domain (m.example.com), an entirely separate mobile domain (example.mobi), or even in a sub-folder (example.com/mobile). Any of those are fine as long as you properly implement bi-directional annotation between the desktop and mobile versions.

The image below shows a typical scenario for desktop and mobile user agents entering separate sites. User agent detection can be implemented client-side (via JavaScript) or server side, although I recommend server side; client side redirection can cause latency since the desktop page needs to load before the redirect to the mobile version occurs.

Separate Mobile Site

It’s a good idea to incorporate elements of responsiveness into your design even when you’re using a separate mobile site because it allows your pages to adapt to small differences in screen sizes.

A common myth about separate mobile URLs is that they cause duplicate content issues since the desktop version and mobile versions feature the same content. Again, not true. If you have the proper bi-directional annotation, you will not be penalized for duplicate content, and all ranking signals will be consolidated between equivalent desktop and mobile URLs.

Pros and cons of a Separate Mobile Site:

Pros Cons
  • Offers differentiation of mobile content (potential to optimize for mobile-specific search intent)
  • Ability to tailor a fully mobile-centric user experience.
  • Higher cost of maintenance.
  • More complicated SEO requirements due to bi-direction annotation. Can be more prone to error.

Dynamic Serving

Dynamic Serving allows you to serve different HTML and CSS, depending on user agent, on a single URL. In that sense it provides the best of both worlds in terms of eliminating potential search engine indexation issues while providing a highly tailored user experience for both desktop and mobile.

The image below shows a typical scenario for separate mobile site.

Dynamic Serving

Google recommends that you provide them with a hint that you’re altering the content based on user agent since it’s not immediately apparent that you’re doing so. That’s accomplished by sending the Vary HTTP header to let them know that Googlebot for smartphones should pay a visit to crawl the mobile-optimized version of the URL.

Pros and cons of Dynamic Serving:

Pros Cons
  • One URL for all devices. No need for complicated annotation.
  • Offers differentiation of mobile content (potential to optimize for mobile-specific search intent)
  • Ability to tailor a fully mobile-centric user experience.
  • Complex technical implementation.
  • Higher cost of maintenance.

Which Method is Right for You?

The best mobile configuration is the one that best fits your situation and provides the best user experience. I’d be leery of a design firm who comes out of the gate recommending an implementation approach without fully understanding your requirements. Don’t get me wrong: responsive design is probably a good choice for most websites, but it’s not the only path to mobile-friendliness.

Whatever your approach, the message is loud and clear: your website needs to be mobile friendly. Given that the mobile-friendly algorithm update is expected to have a significant impact, I predict that 2015 will be a busy year for web design firms.






Author: Jim Robinson

Jim is the Founder & CEO of ClickSeed, and a 16-year veteran in the digital media space. Stay connected with Jim by following any of the social media links below, or get in touch via our contact form any time.

More Posts »


Follow me on FacebookFollow me on Google+Follow me on TwitterFollow me on LinkedInFollow me on RSS

29 Responses to “Mobile SEO: Responsive Design vs. Separate Mobile Site vs. Dynamic Serving”

  1. Hariyaksh Mehta

    Thank you for this article. It really explained me well the difference between dynamic, separate and responsive. However I would like to ask a question at the risk of sounding amateur. What is bi-directional annotation?

    Reply
  2. Jim Robinson

    Thanks! Glad you found it helpful. Bi-directional annotation means that you use something like:

    link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/"

    on your desktop site to point to the mobile version. Then on the mobile version, set the desktop version as the canonical, like this:

    link rel="canonical" href="http://www.example.com/"

    That two-way annotation between desktop and mobile page versions allows search engines to view both as a single entity, and serve the right version in the right environment. Hope this helps!

    Reply
    • Hi Jim,

      Which tags should I use in the following cases:
      Case 1:
      Desktop site: https version
      Mobile site: Dynamic serving, http version

      Case 2:
      Desktop site: http version
      Mobile site: Dynamic serving, http version

    • Jim Robinson

      Hi Aaron. The answer to that depends on which desktop version is the canonical version: http or https? For the sake of example, if we assume http to be the canonical, then the https desktop version and mobile version (in both cases) should have a canonical link back to the http desktop version. Point your link alternate URL at the mobile version. The fact that your mobile page uses dynamic serving shouldn’t matter, but keep in mind that Google will penalize sneaky mobile redirects 😉

  3. Drew Conroy

    Hi Jim:

    Great article and explanation. You could not explain it any better. I am sure it will be very helpful for those who do not understand the differences-

    Drew

    Reply
  4. Jim~

    Awesome article brother. Although this didn’t exactly answer my question, it’s a great piece of work. I’m a Google search nut, so just to give you a head’s up, I typed in “best way to set up google analytics for separate mobile site” and you’re SERP #7 for me in personalized Google results.

    I was really looking for more GA (Google Analytics) centered information, but your blog post was a pleasure to read. I’m going to schedule it up to get reposted through some of my social accounts.

    Have any awesome week and great looking website too. Cheers.

    Zacchaeus

    Reply
    • Jim Robinson

      Thanks for the kind words, Zacchaeus! You have an awesome week too.

  5. Thanks. The responsive method is surly preferred, But I can’t find information how to make site responsive when there is built-in difference in the UI.
    desktop is motivated by keyboard and mouse as for mobile the touch is the tool.
    Is there inner-contradiction to make this two UI acts the same ?
    e.g. ( mouse Hover stuff….)

    Reply
  6. I prefer separate mobile site if there’s no intention of using the website to market the company’s business. Responsive design is mostly preferred by internet marketer’s because Google prefers it over dynamic and mobile website.

    If they all serve the same purpose but requires different skills level and maintenance, I would go for the quickest to build and easiest to maintain.

    Reply
    • Jim Robinson

      Thanks for the comment, John. I don’t think Google prefers responsive design over a separate mobile site. They *recommend* it because, for most people, it’s ultimately going to be easier to maintain and less prone to configuration errors. A separate mobile site or subdomain can perform just as well as a responsive site though, and is a fine way to market a company’s business.

  7. Great article, Jim! Clear piece of writing with valuable info. I am working on making my site responsive/dynamic for the first time and this helps me decide the best way to set up my mobile site. Just thought I would drop you a line to say thank you for putting in the effort! Cheers!
    -Aston

    Reply
  8. Vivek Bajpai

    Hi Jim,

    I was in a complex situation in choosing between a responsive web and separate mobile design, thanks heaps that you made my selection easy. I am now using the separate design using bidirectional annotations. I am running all my business for Google Adsense, thought to be centric but Mobile users were losing up due to heavy load and low speed.

    Just wanted to know, do I need to create every single page with bidirectional annotation? Can I put the same Keywords, Descriptions and Title tags? As I am using the JQuery Mobile based designs, How can I best use of Analytics?

    Thanks again for one shot description.

    Regards,
    Vivek

    Reply
    • Jim Robinson

      If I understand your question, then yes, every page of your site that has a mobile equivalent would need to have bi-directional annotation. I’d use the same description and title tags on desktop and mobile. You’d need to be more specific re: your Analytics question.

  9. Hi Jim,
    Loved the article. I’m just starting to understand all about Mobile Websites. Can you tell me how do I check if a Site is using Responsive Design or is Dynamic Serving? How can a layman understand or determine that a particular site is Responsive or Dynamic Serving?

    Reply
    • Jim Robinson

      Glad you liked it, Liza. In my mind, the fundamental difference between responsive design and dynamic serving is that fully responsive design delivers the same source code and content to all browsers/devices, whereas dynamic serving will vary the output based on device and other factors. Therefore, the differing source code/content output for different devices would be a clear indicator you’re seeing dynamic serving in action. Not sure that’s for the layman though.

  10. Yashwant Naik

    Thank for detailed article.

    I want to know if we have separate website for mobile and desktop than how can I manage the Google analytic?

    Please guide me

    Thank you,

    Yash

    Reply
    • Jim Robinson

      This is a broad topic, but at a high level, you can have them in the same profile, separate profiles, or both. I personally like seeing everything in a single profile and segmenting as desired during my analysis.

  11. Hey Jim, thanks for the great article.

    A few years ago, we implemented a separate m. mobile site and added the correct annotations as stated here https://developers.google.com/webmasters/mobile-sites/mobile-seo/separate-urls?hl=en#annotation-in-detail

    Now, we are launching a responsive redesign. Should we implement a 301 on all m. urls back to the corresponding desktop url?

    Thanks!

    Reply
  12. Hi Jim,

    Great article, while having 2 separate websites would both require updating, what would the implications be for populating content on both sites from a mysql data base? this way with content dynamically populating both versions of the website updating should be fairly straight forward.
    Look forward to your views

    Robert

    Reply
    • Jim Robinson

      Thanks, Robert. I can’t imagine why you wouldn’t serve content to both sites from a single database. It would be a maintenance nightmare to do otherwise. Your mobile and desktop versions are part of the presentation layer, which should be kept separate from the database back-end. You should absolutely use content from the same database for both versions.

  13. Hi Jim,

    Some interesting points, I think I had only ever considered using responsive before.

    I was wondering what your thoughts were on whether search engines favour a particular mobile friendly way on a site or does it not matter? I.e. would a site perform better in search engines if it has the dynamic option more so than if it had the responsive element built in?

    Reply
    • Jim Robinson

      I don’t think it matters. I’ve yet to see evidence of one implementation method having an inherent ranking advantage over another. Properly implemented, I think all three methods can rank competitively.

  14. Hi Jim.

    I have read your article. Thanks a lot for all your information. I am using dynamic content with same url. But one of my friends told me that for SEO will be better to use m.domainname.com. links. Is it right or not ?

    Reply
    • Jim Robinson

      I think that really gets to my overall point of this article: properly implemented, all three methods can be SEO-friendly and rank equally well. Dynamic serving can be tricky to implement and test, but I haven’t seen evidence that an m. site has some advantage over that method from a ranking perspective.

  15. Hello Jim,
    Thanks for the explanation. I have been using responsive designs for my websites for several years but recently decided to try a separate mobile site where I’ll be able to implement AMP easily onward. Your article helped me in deciding between the dynamic serving and a separate website and I feel that the dynamic serving is what I’ll be using.

    Reply

Leave a Reply

  • (will not be published)