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.
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.
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.
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.
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?