By October 5, 2012 4 Comments

SEO Approach to Mobile: Conventional vs. Responsive Design

The internet is no longer confined to the desktop or laptop web browser. The massively growing population of smart phone and tablet users has broadened the field of user engagement, mandating that websites be flexible in how they render and respond to a multitude of devices.

The conventional approach caters to mobile devices directly by “asking” the device what it is before displaying a view tailored to it. Assuming it is possible that new devices (with different display dimensions) are introduced in the future, the list of these devices will tend to fluctuate.

The responsive approach differs from the conventional in that it is a single design that scales and flexes based on the dimension of whatever device is viewing it. This is beneficial from an optimization perspective, in that the site becomes mobile ready without a change in URL or content.

What is Responsive Design?

Responsive design is first and foremost a methodology, not a technology. That said it relies on browser technology in order to allow a web page to adapt (stretch and flex) to fit multiple display sizes. Before we begin, let’s wrap our heads around some key terminology.

User-Agent:

The user-agent is any software on any device which requests a resource (web page) from a server (website). An example of a user-agent is a web browser (Google Chrome, Mozilla Firefox, Microsoft Internet Explorer, etc.). The website server can detect (or sniff) the type of user-agent accessing its content. Mobile phones and tablets each use unique versions of web browsers that indicate what device they’re running on.

Viewport:

The viewport is the portion of the browser window that actually contains and renders the HTML content requested from a web server. This is not the user-agent, but rather the window within the user-agent that displays the content of the page. The viewport dimension varies drastically depending on the device displaying the content as well as (on standard computer screens) the size of the browser window itself (screen resolution, maximized window etc.).

Media Queries with CSS

Media queries are a new feature of CSS 3. Media queries allow a front-end developer to vary styles and dimensions for content based on the dimension of the viewport. They achieve this by “querying” the browser for the viewport’s current dimension. This means that styled elements can “respond” to various viewport scales.

The following is an example of a media query for the Apple iPhone 4:

Server Side User-Agent Detection

Server side user-agent detection takes place when the web server, having received the user-agent type with a request, either renders mobile ready content or redirects the user-agent (browser) to a different site or page (typically sub-domain) based on the kind of device browsing. For example, navigating to www.facebook.com on a mobile phone will redirect the user to m.facebook.com, the mobile variation.

Logic can also be put into place to render a given web page differently depending on the user-agent detected by the server. Some web masters are concerned that this might be interpreted by search engines as a form of “cloaking.” This is not the case, however, and is debunked by Matt Cutts with Google’s web spam team.

When should I choose Media Queries over Server Side for detection?

This answer depends heavily on whether or not you are planning a new site, or modifying an existing.

Media Queries

Making use of adaptive media queries requires that the site design be factored to maintain a cohesive user experience. This approach can be difficult with existing sites as they may not have been built with the expectation of shifting/contorting block elements. New site development, or complete site reconstruction projects will benefit greatly from factoring their designs to make use of media queries.

When feasible, responsive design by way of Media Queries is the preferred method of handling multiple user-agents and device constraints. Content is fundamentally centralized and no redirects or URL rewrites/changes are necessary.

Server Side

In the case of an existing site, re-factoring the front-end design to make use of CSS 3 media queries may seem like a serious hurdle. While it is the preferred approach, server side rendering/redirection may be useful as an initial step towards enhancing the user experience on mobile devices.

Another scenario where deploying server side rendering/redirection might be beneficial is when the website wishes to provide a completely unique experience for mobile and tablet users.

What are your thoughts and or experiences with Responsive Design?

Posted in: SEO, Tablet and Mobile

About the Author:

Alan Garcia is a technical SEO and social engineer with a strong background in web development and operations management. Alan loves Mozart, Kung Fu and his trusty French Press.

4 Comments on "SEO Approach to Mobile: Conventional vs. Responsive Design"

Trackback | Comments RSS Feed

  1. Thanks for the great breakdown on the two approaches mobile optimized experiences.

    I can imagine circumstances where Server Side user-agent detection is the preferred long-term approach to mobile optimization.

    A brick and mortar retailer with an e-commerce site might want to use server side user agent detection to notice that that a user is on a smartphone, and IP Geo-location to notice that they are inside of one of their stores, and then tailor the on-site search results to that stores local inventory. Those sorts of experiences are probably best left to the server vs. trying to manage on the client device.

    Server side detection can also be useful, if the usage context is very different for each device. I.E. If I know that the bulk of my smartphone users are hitting my site from outside of their home vs. tablet usage which tends to be at home in front of the TV, then I might want a very different navigation taxonomy for those two sets of user agents, and that might be better handled on the server side.

    Perhaps the most important reason to consider using server side detection as a long term solution is for performance. At the moment, most client side Media Query approaches require you to send the entire payload for all devices to every browser, and that can result in a lot of extra bandwidth and slower front-end performance. Especially since it’s still early days in terms of responsive image standards.

    By server side, I’m talking about dynamically serving different HTML on the same URL (and using a HTTP Vary Header). As you point out, Google doesn’t consider that cloaking and now have even made it very clear that it’s a acceptable solution: https://developers.google.com/webmasters/smartphone-sites/details

    As you can see, Google agrees with your article that Client Side Media Queries are the best approach in general. They do also allow for Server Side dynamic content. And separate URL’s for different devices is the least preferred approach.

    Sadly, the overwhelming majority of all mobile optimized sites on the web today are separate URL’s (m.YourSite.Com), as that is the easiest approach to outsource to a third party.

    Thanks for the great blog, I look forward to following your stuff. Cheers,

    Jason “Retailgeek” Goldberg

Post a Comment