Adaptive/responsive technical and SEO considerations

The technical definition for the difference between adaptive and responsive websites is that adaptive websites alter their layout server side and responsive sites alter it client side.

Adaptive and responsive design have emerged from the desire to serve all the content of a single site from a single domain. While m. mobile domains did the job of making content accessible to mobile devices, they did have a number of issues arising from the fact that they were separate domains. Most importantly among these was Google detecting the same content on two separate domains and splitting the page weight.

While both adaptive and responsive design achieve essentially the same result, serving content to different profile devices, the way they function applies practical restrictions and best practice requirements on what can and can’t be done with each. 

Adaptive

Modern browsers reveal a lot about their internal capabilities in the user agent string and other request headers however this is still not enough for a site to determine enough information to adapt its content. For this reason when creating an adaptive mobile site we need to use a device library in order to know the individual device capabilities. 51degrees is the industry standard in this regard. 

It is also worth noting that changing the content of pages based upon the detected user agent was first used as a black hat SEO technique to known as cloaking. The goal was to show Google different pages to the end user. It is for this reason that whenever we do an adaptive site we have to set the “Vary: User-Agent” response header for all content pages. This tells Google what we are doing and since we are being upfront and honest about it we don’t look like we are cloaking.

This also helps proxy servers know that it should be caching a different copy for each user agent string. It is also worth noting that the header value should only be applied to the content pages, you don’t want proxies storing dozens of copies of you css and images. This can cause a significant bandwidth hit, especially when using an origin server style CDN.

Responsive

With this technique, the same html content is returned to all devices, it is css and javascript that changes the layout.

Due to the fact that all clients receive the same content this is the preferred method for creating SEO friendly mobile sites as there is no potentially deceptive content. It is, however, the worse technique from the client’s perspective since on the lowest profile mobile phone you are still downloading all the desktop site content, just hiding what you don’t need.

Within responsive design there is a further subset that we term fluid layout. In these layouts the transitions between the different layouts are managed using javascript animations and generally there are many smaller steps between the different layouts allowing the site to fit almost any device profile.