Google Hypocritical and Self Serving in Recommending Responsive Design

Websites implemented using a responsive design methodology seem to be all the rage these days, partly because this is a technique promoted by Google. The main objective to implementing a responsive design is to develop your website so that it looks nice and is easy to use regardless of whether it is being viewed on a wide desktop monitor or a tiny phone screen. In this article we take a look at the alternatives to responsive design and explain why this is often not the best option.

There are basically three different ways that websites can cater to small devices:

1. Establish a separate mobile website (and domain)

In this implementation a different URL is used for mobile pages. Often this is done using a subdomain of the main site, for example m.mydomain.com. These special domains are only intended to run on mobile devices and, as such, can be completely tailored for small screens, limited or expensive bandwidth, etc.

2. Use the same domain as the desktop website

This option can be realized using one of two implementation strategies:

2.a) Responsive Design

With responsive design, the same content is sent to the browser for every device. For example, a browser running on an iPhone would receive the same "stuff" that a desktop browser such as Internet Explorer would receive. Under this architecture, client technologies such as CSS, Javascript and other browser-based features are used to adapt the page so that it fits within the available real estate. Mostly the screen width is the constraining factor since we don’t want visitors to have to scroll left and right to see the contents of the page.

2.b) Dynamic Serving

This approach is also known as “Adaptive Design” and it is sometimes referred to as RESS - Responsive Web Design with Server Side Components. This differs from Responsive Design by virtue of the fact that the Server is cognizant of the browser/device upon which the user is viewing the web page. So rather than sending the "same stuff" it sends content that is most appropriate for the target browser.

Which Method is “Best”?

Although there are certain advantages to option 1 (separate mobile URLs) the main disadvantage is that users need to deal with separate URLs (web addresses) depending on which device they are using. This also introduces SEO challenges such as having duplicate content and it results in the dilution of inbound links which become spread over two separate sites. 

Google has gone on record stating that it supports all three techniques but it recommends “Responsive Design” as the “best” strategy for implementing sites.  It seems Google is saying “Do as I say, not as I do” since Google’s own websites generally utilize an Dynamic Serving methodology. This is clearly the case for Google Search since Google has publicly stated that they now favor mobile friendly sites in the SERPs served to mobile devices. Obviously, the only way to do this is by utilizing a Dynamic Serving approach (where the server decides what SERPs to show based on the user’s device).

Similarly, if you look at other Google-owned websites like Google+, and Gmail, the pages rendered on Mobile devices look and behave substantially different than their desktop equivalents. Once again, they have adopted an Dynamic Serving approach for these sites.

For some products, like Google Analytics, Google has not even attempted to create a mobile friendly version of their website and instead has opted to create a downloadable smartphone app to replace their website.

Yet another contradiction in Google's recommendations surrounds their push for Accelerated Mobile Pages, also known as AMP. AMP is a Google led initiative that facilitates extremely fast mobile page load speeds by limiting the capabilities of the mobile site. By definition, AMP sites need to be implemented using an adaptive design approach rather than using standard responsive design techniques.

So why is Google saying one thing but doing another?

Well, it turns out that Responsive Design is not all it’s cracked up to be.  The Elephant in the Room is that most websites that implement responsive design perform very poorly on all devices and are especially slow on mobile devices.

Smartphones run on slower networks and have slower processors. The main issue is with images.  With responsively designed sites, the large "hero images" that are shown on the desktop site are also sent to the mobile device. Often these images are 4 - 8 times larger than the mobile device can show so after having consumed huge amounts of bandwidth to send the image to the browser the phone must then consume precious CPU cycles to shrink the image into something that will fit on the screen.  Often the resulting images lose their quality during this process as well.

Images are not the only problem; the CSS elements required to make a website completely adaptive to any size of screen require a lot of processing power.

The fact is that it often does not make sense to show the same content on a narrow screen that you would show when there is plenty of real estate available.  It’s like deciding to move a huge sprawling ranch house onto a postage stamp lot just by chopping up the rooms and stacking them on top of each other.  You would never design a house this way knowing that you only have a small property.

At We Think Solutions, all of our websites are implemented using a Dynamic Serving methodology. The general concept is that graphics designers and UI experts decide what information is not essential  to the user experience for mobile users and, based on this, create a slightly “stripped down” version of the web pages out of respect for the mobile user’s time and bandwidth.  At the same time, we can take advantage of features that are not generally available on desktop devices such as clickable phone numbers.

As part of our methodology our graphics team "pre-shrinks" the required images using Photoshop and other tools to ensure the images are sized appropriately for mobile devices. The server sends these smaller images to the mobile devices thereby reducing the bandwidth needed to get the image to the browser and eliminating the need for the browser to expend cycles shrinking the images.

Similar benefits can be gained by sending "pre-adapted" narrower pages to the browser to reduce the amount of work that the browser needs to do to render the page to be viewer friendly.

It is important to note that Google generally ranks faster sites higher than slower sites so not only is this approach better in terms of the user experience it is also better for SEO.

What do we lose by not having a responsive design?

The main benefit of a truly responsive design is that the browser can adapt the content as the user re-sizes the window. Since this is not something people do very often this small benefit is not worth the price you pay in performance.  Generally, websites designed for a typical desktop screen render just fine on tablets and other devices that are not as small as a cellphone so, in reality, Dynamic Serving only needs to cater to two formats.

So, given the fact that sites designed using a Responsive Design approach tend to be slow on mobile devices, why is Google recommending such an approach?

Well, it comes down to the fact that this is the easiest way for Google to index your pages.  That’s right, Google wants you to optimize your site for its Googlebot, not for your users!  By encouraging you to send the same "stuff" to mobile and desktop devices, Google does not have to keep track of two sets of content for each of your pages.  Now, of course, Google does not come out and say this directly but if we analyze Google's reasons given for making this recommendation that is really the only reason that holds water.  The official reasons are mentioned here:

"Makes it easier for users to share and link to your content with a single URL."

While this is true, it applies equally to Responsive Design and Dynamic Serving since, in each case, the same URL is used for both the desktop and mobile devices.

"Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages."

In other words, it makes it easier for Google to crawl your site. Yes this is true.

"Requires less engineering time to maintain multiple pages for the same content."

Do you think Google really cares how easy or difficult it is for you to create content? In our case, we utilize a custom framework that was designed to make it easy to implement mobile versions of pages so there is not much additional overhead or engineering time required to develop mobile versions of pages.

"Reduces the possibility of the common mistakes that affect mobile sites."

I would say the opposite is true. This approach makes it incredibly easy to send a huge 200K image to a phone and ask it to shrink it down to fit on the screen. Responsive design promotes this egregious practice.

"Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience (see “Pitfalls when detecting user agents” section for details)."

Again, this is true of both Responsive Design and Dynamic Serving.

"Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site’s content and keep it appropriately fresh."

Yep, it does make it easier for Googlebot, but this should not be your main goal. Your focus should be on making your site load quickly and making it easy to use by “real” users, not just robots.

It should be noted that, although Google is rumoured to be working on the capability of maintaining two separate indexes, this is not implemented at the moment. The implication of this is that if you are using a Dynamic Serving methodology, only your desktop content will be indexed. We have confirmed this by searching for content that only exists on one of our mobile sites. Google does not have this content in its indexes (regardless of whether you are searching from a desktop or a mobile device).  The corollary is also true.  For example, if you use your smart phone to search Google for a string that only exists on a desktop page, Google will provide this page as part of the mobile SERP even though when you visit the page you won't actually find the string you just searched for (because it is not on the mobile version of the page due to Dynamic Serving).

In closing, we believe that Dynamic Serving is generally a better methodology than Responsive Design for serving mobile pages. This results in faster mobile sites that can take advantage of features on the mobile device. In other words, an enhanced user experience. If you go by Google's actions, rather than their words, they also tend to favour this approach.