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

UPDATE – Oct 25,2017: A number of people have asked me if the guidance below is still valid in light of Google’s mobile-first indexing, which will likely roll out gradually sometime in 2018. The answer is: yes. The information below is still valid, and more specifically, it will still be okay to have a separate mobile site. The key is that your separate mobile site needs to have the full content, meta data, structured markup, etc. that your desktop pages have if you want them to maintain the same ranking. Because it’s hard to maintain two separate websites, a fully responsive design will often make the most sense, but it’s still not a hard requirement. It remains to be seen if Google will have a detectable bias toward any of the three options below — responsive, separate mobile site, or dynamic serving — when we actually begin measuring the rankings in a mobile-first index. -JR

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 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, literally the same page is delivered to all devices, whether desktop, mobile, or tablet. 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 might not 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.

[Tweet “Responsive design is a great choice for mobile, but not the only option for mobile-friendly SEO.”]

Pros and cons of Responsive Design:

ProsCons
  • 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.

Update (10/25/2017): While the statement above is still true, it must be emphasized that a separate mobile site should have all the same content as its desktop equivalent if you wish to maintain the same rankings once Google’s mobile-first index rolls out. That includes not only the on-page content, but structured markup and other head tags that could be providing important information to search engines.

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:

ProsCons
  • 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 Google know that Googlebot for smartphones should pay a visit to crawl the mobile-optimized version of the URL.

Pros and cons of Dynamic Serving:

ProsCons
  • 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/dev 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.

Sharing is caring!

Subscribe to get my latest posts in your inbox!

* indicates required

44 thoughts on “Mobile SEO: Responsive Design vs. Separate Mobile Site vs. Dynamic Serving”

  1. 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?

  2. 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!

    • 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

    • 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. 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

  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

  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….)

  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.

    • 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

  8. 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

    • 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?

    • 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. 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

    • 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. 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

    • 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.

  12. 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?

    • 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.

  13. 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 ?

    • 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.

  14. 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.

  15. Hi Jim. If a client has a normal responsive site, (www.website), and they decide to build a mobile version under a separate URL (m.website), does the m.website version require it’s own SEO campaign, or is it set up with internal redirects? Would you have to also rank the m.website version, as well as the normal responsive http://www.website version? Are they completely separate properties? Thanks.

    • The m. version will not require it’s own SEO campaign. Properly implemented bi-directional annotation between the www. and m. versions will ensure that ranking signals are consolidated between the two and they are seen as a single entity. However, keep in mind that Google is shifting to a “mobile first” approach, so you’ll want to ensure that all the content and page-level elements appear on both versions.

  16. Hi,

    I read all the queries above and got lot of interesting thing but my question is that if I’m using dynamic serving, should I use rel=”alternate” on desktop or which type of code I should use for mobile device for better ranking?

    • If you’re using dynamic serving with a single URL for both desktop and mobile, there is no need for the rel=alternate to point to a mobile URL (since there isn’t one). However, Google still recommends you use Vary: User Agent in the header response to let them know you’re dynamically serving different content for the same URL.

  17. Sir, your post has left a feeling within me that it would be a mistake if I do not reply you.

    As a beginner in website designing profession I encountered problems where clients do want some high resolution photo gallery and home page slide show. Feeding it to a desktop on high speed network has no issue but for a hand held device it is a giant pain. After reading this post now I believe that keeping the pages responsive and serving dynamic content (stripping slide show for mobile, displaying lower resolution images etc.) will certainly solve my problem.

    Thank You Sir.

  18. Hello Jim,
    I am glad I found your blog. We will be launching our website soon. but the problem I am facing is first, which are the resolution I should be concentrating commonly on media query. and next is will sub domain fetch us more traffic and hope it will not conflict with desktop version sometimes. and third, as of now we have planned to launch in desktop and tablets. but mobile we are going later after 1st launch. will this be a good approach?
    and what changes should be done when we go with mobile site as sub domain in code. or will it remain same. should database also be maintained separately for mobile resolution.
    Please reply ASAP.

    • Hi Mike. I don’t understand your first question about resolution. Feel free to elaborate. In terms of the sub-domain, I don’t think it will get you more or less traffic. It’s simply a configuration issue. If you’re using a separate sub-domain for mobile, you’ll need the proper bi-directional annotation in place if you want to get the same results as a fully responsive design. The content itself should be coming from the same database. Hope this helps.

  19. Bravo Jim! This is one of the best write-ups on the subject I’ve come across. Your post ended up clearing a lot of my doubts but I think I’m left with one.

    In your post, you mention and I quote:

    “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.”

    I’ve a website where the desktop version runs at subdomain.site.com. Due to certain constraints, I’m unable to choose an mDot or a /m/ mobile site. Can the mobile version run at mobilesubdomain.site.com?

    This is a departure from the standard, I agree, but if it’s only the annotations that matter, this should not be a problem.

    Am I correct in assuming this? Please help clarify.

    Thanks.

    • Thank you for the kind words, Vijay!

      Having an m. sub-domain isn’t required. People use it because lots of other people used it, so it became sort of an unofficial standard. You could technically use a completely separate domain. Certainly you can use something like you mention (eg. mobilesubdomain.site.com).

  20. Hi Jim,

    Thank you for the article. It’s an excellent one! I was wondering, how can companies with a responsive website display a different title tag in the mobile and desktop.

    I am eagerly waiting for your answer.

    Best regards,

    Sara

  21. Hi Sara. In that case you’d be using responsive design with dynamic serving. You’d need to use some method to detect the user agent and, if it’s a mobile device, dynamically set a mobile-specific page title. I’ve seen sites do that in the past when they wanted to be uber-optimized for the mobile user experience. However, with Google’s shift to a mobile-first index, you should keep in mind that your mobile version is the one that will be used for indexing/ranking purposes.

  22. We have a static site that is not mobile friendly. We would ultimately like to move our entire site to a CMS and have it be responsive. Would it be okay to start the CMS version at a mobile sub domain and then once the full site content is moved make that out single responsive site?

  23. Hi Pauline. I think that’s a valid approach under the right circumstances. Without knowing yours, it does seem like a lot of extra effort when you already know you ultimately want to be in a CMS with a responsive design. But if you’re convinced it’s just not feasible in the near term and you have a straightforward way of creating a separate, mobile-friendly version on an m-dot subdomain, it will certainly work. Just make sure you have proper bi-directional annotation, as described above, and make sure the full content and page-level metadata that’s on your desktop site also appears on your mobile site so you’ll be ready for mobile-first indexing. Once your responsive site is ready in the CMS, redirect all your m-dot URLs to your permanent URLs.

Comments are closed.