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.
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.
<table><tr><td> #include(Section1) </td><td> #include(Section2) </td></tr></table>
<div> #include(Section1) </div> <div> #include(Section2) </div>
<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?