1

I have a 20 year old site that I want to upgrade to a responsive layout. Originally it was a desktop-only layout but when a significant portion of my user base went mobile I implemented dynamic serving layouts where I sniff the user agent and serve different HTML based on whether the user agent is for a mobile device or not.

I started to implement the responsive layouts, but I found that about 5% of my user base is on older browsers that don't have all the CSS and JavaScript I would like to use. For example, only 95.42% of users fully support CSS grid layouts: https://caniuse.com/css-grid While I wouldn't want to take the time to develop a site just 5% of my users, I already have a site that works for those users and I don't want to lose that much of my traffic when I move to responsive.

My current plan is to still do server side tests based on the user agent like this pseudo code:

use responsive-layout if (bot) 
use desktop-layout if (msie or firefox < 54 or chrome < 58  or edge < 16)
use mobile-layout if (opera-mini or android-browser or samsung-internet < 5 or safari-mobile < 10.3)
use responsive-layout otherwise

Most of my users and search engine crawlers would get the responsive layout. Only specific non-capable and older browsers would get my existing static layouts.

I ensure that all the different layouts have the same content by using templates. So while the layouts all have different top level HTML structures, they end up including smaller pieces that have the same content.

Desktop

<table><tr><td>
#include(Section1)
</td><td>
#include(Section2)
</td></tr></table>

Mobile

<div>
#include(Section1)
</div>
<div>
#include(Section2)
</div>

Responsive

<div id=grid>
#include(Section1)
#include(Section2)
</div>

I know that Google supports either responsive layouts or dynamic serving layouts but I haven't been able to find any information about a hybrid approach like this. Are there any pitfalls (especially with regards to SEO) of mostly using responsive but falling back to dynamic serving for some browsers?

Improve this question

1 Answer 1

Reset to default
1

The biggest concern I can think of would be the equivalency of content across the different setups. On their mobile-first article, Google says:

Make sure that your mobile site contains the same content as your desktop site.

And:

[update] your mobile site so that its primary content is equivalent to your desktop site.

It seems like that would be applied across different types of mobile sites. So long as the dynamic-serve site and the responsive site return equivalent primary content, there shouldn't be a concern if Google sees the different pages. While equivalency is mainly meant in the sense of Google not missing content you've written, you can also see the abuse side of this too--if the content is considerably different, then it could look like you are trying to sneak in content and act manipulatively.

All that said, I'm not sure Google would even see the dynamic-serve site they crawl in the latest version of Chromium (see SEL) and it seems like your conditions would only show the responsive design within that. Not saying you should take that for granted but that probably minimizes risks here.

Improve this answer
6
  • I have the problem of equivalent content with the existing desktop and mobile layouts. I added some info to my question about how I handle that with a templating system.
    – Stephen Ostermiller ♦
    Commented Aug 25, 2021 at 17:31
  • Thanks for the info about what user agents Googlebot uses for crawling.
    – Stephen Ostermiller ♦
    Commented Aug 25, 2021 at 17:31
  • @StephenOstermiller On the template, wrapping the same content (Section1, Section2, etc.) in different HTML should result in an equivalent experience. In their Quality Rater Guidelines, Google talks about the main content's purpose - so long as the content is still presented on the screen in basically the same order (i.e. Section1 before Section2, etc.), then the pages should serve an equivalent purpose.
    – Matthew Edgar
    Commented Aug 25, 2021 at 18:10
  • That is an interesting point. The order is going to vary quite a bit. The main content should always be front and center, but other sections (like navigation) are going to vary drastically. On desktop the navigation is in the left sidebar (first), on mobile it below the main content (last), and on responsive it is moving to a hamburger menu (hidden until click).
    – Stephen Ostermiller ♦
    Commented Aug 25, 2021 at 18:21
  • 1
    If the main content is always front and center, then that should satisfy Google's "equivalency" standard since that would make it clear that the dynamic-serve or responsive version of the page on mobile or desktop all serve the same purpose. The quality rater guidelines say "Main Content is any part of the page that directly helps the page achieve its purpose." Navigation, ads, sidebars, menus, etc. would all be considered "Supplementary Content", so not part of establishing the page's purpose.
    – Matthew Edgar
    Commented Aug 26, 2021 at 0:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.