Mobile - Responsive - Adaptive (the Terms, the User, the SEO)
|I have found out that a lot of people have a somehow cloudy idea about what adaptive, responsive and mobile site/design is. First of all, for me, these terms have to do with more things than a website and not just with design. Even desktop applications may fall in these distinctions since different screen resolutions or platforms may be used. Complicated ERP or CRM systems are developed as a web – browser solutions or as solutions available to many different devices.|
I have found out that a lot of people have a somehow cloudy idea about what adaptive, responsive and mobile site/design is. First of all, for me, these terms have to do with more things than a website and not just with design. Even desktop applications may fall in these distinctions since different screen resolutions or platforms may be used. Complicated ERP or CRM systems are developed as a web – browser solutions or as solutions available to many different devices.
Below, I will present differences and similarities, advantages and disadvantages in relation to user experience, technical development, SEO and more.
If you don't care about the details and references just stay to the summary paragraph that follows where I mention the basic points.
Mobile: A mobile site/design/development (I will use “site” from now on to refer to all these objects) is essentially a copy of your website, where the server does the work to deliver an optimized page that is smaller and easier to navigate. Usually it will be in a sub-domain like m.yourdomain.com.
It offers the best user experience on a mobile environment and it might be the easiest way to build something for mobile users fast (no site redesign, just add a new front end while cutting off parts of the desktop application content and functionality).
This solution can provide a unique experience for mobile users and can be a good choice when it might be too expensive to redesign.
On the other hand, you will have to maintain 2 sites with different content -most of the times-, different functionality and different user interface and to keep both up to date at technical and content level. Also, it might cause some SEO issues since mobile links will not be counted as links to your primary site and same content may appear in various URLs. It may add effort to website management because you have to maintain two separate content depositories. It requires higher maintenance and expense because of the re-working needed in order to stay current with next-generation phones and mobile browsers.
Responsive: Serves all devices on the same set of URLs, and each URL serves the same content. It uses client side code (media queries) to detect devices, flexible images and fluid grids.
Responsive sites are easy to maintain but not easy to implement, especially, when you want to turn a non-responsive site to responsive.
Pages are slower to load since all the work is performed at client side.
But this is Google’s favourite implementation regarding SEO (although many people claimed that they can’t notice any difference compared to the other methods).
In responsive design, the device does the work and automatically adjusts according to a screen size of a device (large or small) and orientation (landscape or portrait). It switches between these options on-the-fly making responsive a very flexible solution to current and future needs.
The technology is more forward-thinking because once added to site it will work on future devices without having to be programmed further. It offers better return on your investment and a better option for search while the user gets something of a mobile experience.
Adaptive: Sites that dynamically serve all devices on the same set of URLs, but each URL serves different front end (i.e. HTML and CSS) depending on whether the user agent is a desktop or a mobile device.
Adaptive sites are faster to load on mobile devices compared to responsive and use different templates.
SEO issues can be easily resolved and, also, they need less to maintain but good development knowledge to be build.
Responsive or Adaptive (term selection): When it comes to web development I have come to the outcome that we should not use the “adaptive” or “responsive” term alone. It seems more appropriate saying that we build “an Adaptive application using responsive methods”. Responsive is a technique we can use, alone or with other things to offer a site that adapts to different screens and/or devices.
Adaptive for me is the opportunity to use a term that will combine client and server side development (right mix) in order to deliver the best user experience with a balanced development and maintenance effort while it will remain SEO friendly (may need to use the Vary HTTP header and rel that helps Google to identify your mobile content).
According to Gustafson Aaron, (Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement, Easy Readers, LLC; 1st edition, 2011) “Adaptive websites are designed to respond and adapt to different screen sizes using responsive techniques”.
2. The Terms
While “mobile” seems to be clear what it is (a site dedicated to mobile users/devices fully separated from the main/desktop application), the terms responsive and adaptive create some confusion.
For most of things “adaptive” and “responsive” are synonyms (even Google search threats the terms as synonyms), but this is not the case when it comes to web development.
The term Responsive web design was used by Ethan Marcotte in a May 2010 article. He described the theory and practice of responsive web design in his brief 2011 book titled “Responsive Web Design”.
Responsive sites are those that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML.
3. The Development
Mobile: A new site that is built using mobile development techniques, tools and frameworks. Usually we see here much of jquery mobile, cordova and special code to benefit from device hardware specifications. E.g. access camera or GPS, hide scan functionality if no camera is available and so on.
A new template that will serve the mobile site is needed. Mobile users that will arrive to the main web site will be redirected to the mobile one (usually to m.yoursite.com).
Responsive: Uses client side code (media queries) to detect devices. Uses flexible images and fluid grids. All assets are downloaded. A single template with longer page loading times. On pre-existing site, redesign has to be performed.
Adaptive: Uses server side code to detect devices. Serves separate html to present information based on screen size. Only mobile optimized assets are downloaded and use distinct templates. Page loads faster. On pre-existing site, redesign and backend development has to be performed.
Grids, Responsive vs Adaptive: I choose this as the best short description of the terms, by Rakhitha Nimesh: “In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices”
4. The User
When it comes to user experienced I am not convinced what the best solution is. As in most cases, balance is the key unless there are specific constraints or requirements to drive you in a mobile site or a responsive site.
Some would say that the mobile site will offer advanced mobile filters for content, functionality and dedicated mobile templates/design, faster loading and easier finger navigation.
But if someone visits your desktop site has to see a similar mobile site. The main things should be in the same parts of screen. Also, sometimes, users browse from a mobile device trying to locate information that they have seen on the desktop site and vice versa. We have to be sure that they will find the information.
Finally, even the loading time may have some drawbacks because of the screen/device/agent detection and redirection.
Responsive on the other hand loads all the desktop site content and assigns to the client to show what the user should see. Big loading time and not much of mobile oriented functionality.
I should vote for Adaptive design with most of things based on responsive principles. A a site should be somehow Adaptive with responsive elements. E.g. Use some server side code not to send HiRes images, and to offer some extra functionalities for mobile users in contact page for example, while keeping all the texts in fluid designs and flexible images, with minimum backend development.
5. The SEO
Google supports mobile, responsive and adaptive while it doesn't use this naming for the methods.
Mobile: According to Google these are “Sites that have separate mobile and desktop URLs.” Google seems not to like this method very much.
Responsive: Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's recommended configuration.
Adaptive: Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
While in webmaster support pages Google says that they like the responsive design most, Google’s analytics and customer experience guru Avinash Kaushik recently said, “Non-mobile friendly websites suck. Desktop sites with responsive design for mobile devices just suck less” and added “Not everyone at Google hates m dot sites. Officially, they support them as they support responsive Web design and dynamic serving” (adaptive approach). “What they hate is any site that doesn’t satisfy the user, including some responsive sites”.
Here are the SEO/user benefits of the methods according to Google:
“Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single URL for the content helps Google's algorithms assign the indexing properties for the content.”
So this favours Responsive and Adaptive design vs Mobile
“No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your site's user experience (Pitfalls when detecting user agents).”
This favours the Responsive design more and less the Adaptive one and, again, not at all the Mobile site
“For responsive web design pages, any Googlebot user agents need to crawl your pages once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the site's contents and keep it appropriately fresh.”
This favours the Responsive design more and less the Adaptive one and, again, not at all the Mobile site
Development practices for SEO
Threat dynamic serving properly (adaptive design). Dynamic serving is a setup where the server responds with different HTML (and CSS) on the same URL depending on the user agent requesting the page. As it is not immediately apparent in this setup that the site alters the HTML for mobile user agents (the mobile content is "hidden"), Google recommends that the server send a hint to request that Googlebot-Mobile should crawl the page, too, and thus discover the mobile content. This hint is implemented using the Vary HTTP header.
The Vary HTTP header
According to Google the Vary HTTP header has two important and useful implications:
-It signals caching servers used in ISPs and elsewhere that they should consider the user agent when deciding whether to serve the page from cache or not. Without the Vary HTTP header, a cache may mistakenly serve mobile users the cache of the desktop HTML page or vice versa.
-It helps Googlebot discover your mobile-optimized content faster, as a valid Vary HTTP header is one of the signals we may use to crawl URLs that serve mobile-optimized content.
The Vary HTTP header is part of the server's response to a request, like this:
GET /page-1 HTTP/1.1
(...rest of HTTP request headers...)
HTTP/1.1 200 OK
(... rest of HTTP response headers...)
To help Google algorithms understand this configuration on your site, Google recommends using the following annotations:
-On the desktop page, add a special link rel="alternate" tag pointing to the corresponding mobile URL. This helps Googlebot discover the location of your site's mobile pages.
-On the mobile page, add a link rel="canonical" tag pointing to the corresponding desktop URL.
Google supports two methods to have this annotation: in the HTML of the pages themselves and in Sitemaps. For example, suppose that the desktop URL is http://example.com/page-1 and the corresponding mobile URL is http://m.example.com/page-1 . The annotations in this example would be as follows:
Annotation in the HTML
On the desktop page, add:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >
And, on the mobile page, the required annotation should be:
<link rel="canonical" href="http://www.example.com/page-1" >
This rel="canonical" tag on the mobile URL pointing to the desktop page is required.
Annotation in Sitemaps
Google supports including the rel="alternate" annotation for the desktop pages in Sitemaps like this:
<?xml version="1.0" encoding="UTF-8"?>
media="only screen and (max-width: 640px)"
The required rel="canonical" tag on the mobile URL should still be added to the mobile page's HTML.
The Vary header is essential if also your site automatically redirects mobile visitors coming to the desktop site to the mobile site, or vice versa (mobile site).
6. Final thoughts and comments
In responsive web design we do not lock/hide the content, instead we are inventing a way to present it better to more people (the devices and screens are the means while the people are what should interest us).
In Adaptive design we give more functionality and better mobile experience
Responsive design is a subset of a larger concept and that seems to be the Adaptive approach. When talking about responsive we refer to the layout only (Ethan Marcotte, fluid grids, flexible images & media queries) while Adaptive design on the other hand includes much more than just fluid layout. In practice, it means the same thing as progressive enhancement, which, in short, means that we aim to deliver the best possible experience to the widest possible audience. Also, “Adaptive design” shouldn’t be mixed with “Adaptive layout” which is a completely different thing. Adaptive layout means a layout done by combining multiple fixed widths.
Responsive is taking over the web but many people neither consider the audience nor do it right. All too often it’s just the solution for site owners who are more concerned with efficiency than user experience. That doesn’t make it a bad solution, per se, but it’s often not the best one for the user or the business. What we need is the right mix of techniques to offer something that adapts to different user profiles.
Jamshaid (Jam) Hashmi : Responsive Web Design (RWD) vs Adaptive Web Design (AWD)
Bryson Meunier: Adaptive Web Design Or RESS Better Than Responsive Design For SEO?
Ryan Boudreaux: What is the difference between responsive vs. adaptive web design?
Wikipedia: Adaptive Design
Wikipedia: Responsive design
Developers Google.com: Building Smartphone-Optimized Websites
Ethan Marcotte: Responsive web design
Aaron Gustafson: Adaptive Web Design
David Little: Understanding the fluid grid
Rakhitha Nimesh: How Fluid Grids Work in Responsive Web Design
smartz.com: A Mobile Site vs. Responsive Design
Mike D'Agruma: Responsive Web Design vs. Mobile Site
Cheri Percy: Navigating your site through mobile vs responsive, the latest DistilledLive video