Channels ▼
RSS

Mobile

Responsive Web Design: A Device-Oriented Salvation


The vast majority of websites are neither optimized for nor adapted to mobile devices. Furthermore, a significant number of developers believe that making a website mobile-friendly is, overall, an easy task that just requires a smarter CSS file on top of the same old pages.

More Insights

White Papers

More >>

Reports

More >>

Webcasts

More >>

The major issue of mobile site development is the selection of use-cases that are most appropriate for the particular business scenario. Before mobile devices became so popular, developers built websites around a single set of use cases. At most, developers had to be concerned about how pages were rendered by different Web browsers. Ensuring that the same content was rendered the same way across all browsers has been a source of significant headaches for developers: The ability to shield developers from the nuances of different browsers was one of the reasons for the rapid adoption of the jQuery library.

Mobile devices add a new dimension to the problem of identifying the right use-cases for a site: A mobile site may need to have its own use cases, which are inherently different from those of the full desktop site. In addition, the range of different devices available out there is large and can be measured in the order of thousands. Building a mobile site can be a walk in the park if you don't care about the requesting devices. However, it can get really problematic if you intend to serve each device some tailor-made content.

Web developers learned a key lesson over the years: Always use feature detection over browser detection. Web pages built around the detected capabilities of the device do not need to be updated when a new device comes out. Conversely, Web pages specifically created for a particular browser (or device) are constantly subject to being extended and/or fixed when new device versions are released.

A relatively new approach to website development, Responsive Web Design (RWD) derives perfectly from the philosophy that detecting device features is smarter than detecting browsers.

Responsive Web Design

RWD is a design philosophy centered on making Web pages highly adaptive and capable of providing a good viewing experience regardless of the device details. The beauty of RWD is that it allows you to write a website once and view it effectively on a wide range of devices including laptops, smartphones, tablets, and more.

Technically speaking, RWD is based on two pillars: CSS media queries and proportional grids. CSS media queries let developers bind style sheets to conditions that the browser dynamically evaluates when some system event takes place. For example, an RWD-enabled site can reshape its content based on the size of the browser window. A CSS media query is an expression assigned to the media attribute of the LINK element:

<link type="text/css" 
      rel="stylesheet" 
      href="site.tablet.css"
      media="only screen and (max-width: 800px)">

The CSS file referenced in the code snippet is applied to a page only when the page is being rendered on a screen smaller than or equal to 800 pixels in width. A page of an RWD site typically counts multiple LINK elements: If no match is found, then no style sheet is applied to the page.

The CSS media query language is based on a pair of Boolean operators (and, not) and a few browser properties:  width, height, aspect-ratio, color, and orientation. The most used of these properties is width, which refers to the width of the browser window. In CSS media queries, the width property can be decorated with a few prefixes: device, min, and max. The device-width property, in particular, refers to the physical width of the device.

Although RWD was not specifically designed for mobile scenarios, its inherent flexibility makes it more than suitable for mobile. From the perspective of an RWD-enabled site, a smartphone is simply a browser with a width of about 400 pixels. The site then detects the feature and adapts automatically.

This is the greatest strength of RWD. Unfortunately, it is important to note that it is also its major weakness.

Server-Side Responsive Sites

A site that can render well on a small screen without knowing it is running on some mobile device is a site that is not optimized for a mobile scenario. RWD and CSS media queries don't make it possible, for example, to switch the stylesheet to differentiate between an iPhone and an Android device. All that RWD can do is what is possible through CSS: hiding blocks or moving them around by leveraging the float CSS attribute.

When CSS is not enough to define the ideal mobile experience, then RWD is no longer an ideal choice. A website that just presents data — for example, a news portal — lends itself well to RWD. A more behavior-oriented site that implements workflows — for example, a booking site — requires ad hoc forms to provide an ideal experience. In this case, RWD alone is not sufficient.

The alternative to RWD is sniffing and analyzing the user agent (UA) string on the Web server. Once the user agent has been mapped to a device profile, the developer has all the information needed to intelligently serve ad hoc markup. Does this mean that pages must be able to distinguish thousands of devices? No, the most common approach these days is to define a few classes of devices for which the site is then optimized. As an example, consider the following classes:  smartphones, tablets, laptops, smart TVs. Then, use some professional tool to do the analysis of the user agent string and return known capabilities of each profiled device. Today, the de facto standard for UA-sniffing libraries is WURF.

A server-side approach to the design of mobile views doesn't mean you have to drop RWD or its growing ecosystem of related libraries such as Foundation and Bootstrap. Responsive Design Server Side (RESS) refers to adding a second dimension to the problem. You map the UA to a class of devices and define a view (and not simply a CSS) for each scenario. Defining a view, and not simply a CSS file as in RWD, gives you the opportunity to use the ideal layout for each case, size images appropriately, and minimize the markup being downloaded. The markup being downloaded, then, is just markup; as such, it can mimic RWD design principles and techniques.

Beyond Mobile

RWD represents a smart way to adapt sites to a variety of screen sizes. You should consider it for use in designing multi-device viewable websites. It's not the only solution, especially in cases where sites must be device specific, but it's an awful lot better than not accommodating mobile and portable devices at all.


Dino Esposito is a frequent contributor to Dr. Dobb's and has written several books on designing and implementing Web applications.


Related Reading






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video