Responsive Web Design is the least flexible approach in terms of addressing the needs of mobile visitors, including page weight and load speed optimization, and thus many online big-hitters craft mobile-centric experiences using either separate URLs or dynamic serving. In this article we explain the main differences between these two methods. We also describe some simple ways to test mobile setups that anyone can use.
Mobile website structures recommended by Google
It is a common myth that RWD (Responsive Web Design) improves SEO better than any other method for addressing mobile visitors. All of the top 10 Alexa websites use device detection and content adaptation instead of the 'classic RWD.'. In fact Google’s own website is not responsive, meaning that different devices get a different version of Google.
We’ve previously explained some of the highlights of the mobile SEO update that Google rolled out in April 2015. The article listed three recommended mobile website setups, including Responsive Web Design, dynamic serving and separate URLs.
While RWD is getting more buzz these days (even though it’s not easy to get right), we’d like to draw your attention to dynamic serving and separate URLs which are, in many cases, superior in terms of maximizing profits from the rapid growth of mobile traffic.
Separate URLs
Using the separate URLs website structure, devices are detected by investigating the HTTP headers and then redirected either to a desktop or mobile version of the website which are built with different HTML and CSS. In this case, the mobile site utilizes a mobile-specific URL which is typically an m-dot, or dot-mobi, or even a separate folder.
According to a common myth this approach leads to duplicate content that harms SEO and causes user confusion. However this won’t happen if you make sure that all your desktop pages have 1:1 mobile equivalents. To prevent duplication you need to signal the relationship between both versions by including ‘rel=canonical’ links on mobile pages and ‘rel=alternate’ links on desktop pages.
Using a separate URL is sometimes considered the old-fashioned way to go about designing websites but in fact it's the proven method that the web's leading brands use today to maximize mobile-driven revenue. Here are some notable examples including the world’s largest online retailer, Alibaba.com, and the world's largest social media site, Facebook.com.
- m.alibaba.com
- m.facebook.com
- m.toysrus.com
- m.accuweather.com
- m.homedepot.com
Dynamic serving
The dynamic serving method also requires device detection based on HTTP headers so that the server knows what should and what shouldn’t be sent to the requesting device making differentiation of mobile content possible. However, this is all done under one URL.
Using this method you need to make sure that all desktop pages have their mobile equivalents. Also, Google must be notified that different HTML is sent according to user device, and this information is conveyed by including 'Vary HTTP Header.'
Even some digital marketers may be unaware of this technique and mistake dynamic serving for RWD mainly due to the fact that the URL doesn’t change. Here’s an interesting quote from Hootsuite’s blog:
“Last time I checked, there’s only one Google, and if Google penalizes us for duplicated content already, then having two websites—one for mobile and one for desktops—with the same content defeats the purpose of trying to show up on Google’s search engines.”
The author’s advice is highly misleading as it gives a false impression that there’s something wrong with providing mobile-centric user experience that is different from desktop. And that Google would promote RWD sites just because redirection is not involved.
Here are some examples of notable big players that utilize dynamic serving for their mobile website setup. Best example is probably Google itself that uses dynamic serving with device detection extensively even though all devices see the same google.com URL.
- Walmart
- Amazon
- Adidas
- Etsy
RESS provides the best of both worlds
Using separate URLs or dynamic serving, it makes sense to include responsiveness as part of each version of the website. Called Responsive Web Design with Server-Side elements (RESS), the technique allows you to eliminate viewing difficulties due to differences between screen widths. You can learn more on RESS from a DeviceAtlas paper.
For the web, native apps and mobile operator environments.
How to test mobile website setup
User Agent strings help the server to decide what should and what shouldn’t be sent to the requesting device, and therefore to test mobile websites in your desktop browser you need to temporarily change the User Agent.
It can be done in all major browsers including Chrome, IE, Firefox, and Safari. We described some of the methods in this article on DeviceAtlas. The easiest one is probably the feature offered by Chrome called ‘Inspect Element.’
After switching the User Agent and reloading the page you’ll be able to see the mobile-optimized content. If the website’s URL also changes, this means that the Separate URLs are used. Otherwise it is either dynamic serving or RWD.
Checking if the website’s structure is RWD doesn’t require switching the User Agent. All you need to do is to reduce the browser’s width, and see if the content rearranges itself on-the-fly.
We'll be talking more about adaptive web design, device detection, and delivering world-class web performance at NGINX.conf 15 in San Francisco on September 22-24.