The New Front End Design Stack - The Role of Responsive Web Design

Ethan Marcotte established the idea of responsive web design in his 2010 A List Apart article of the same title.  Succinctly, responsive web design is device-agnostic content presentation. A responsive design looks great on a desktop monitor, a tiny phone screen or a large format display.  This brief paper first details where responsive web design fits in the front end design stack. Then it will describe how a responsive web design is constructed.

Why Responsive Web Design is Important

Even in 2011, we access content through a fragmented collection of devices: desktop browsers, classic phones, smart phones, TV, game platforms, feed readers, applications. We can only expect that the collection of devices we know today will continue to fragment into myriad variations of shapes and resolutions.  Humans aren’t the only things accessing information. Crawlers consume web-accessible pages in order to index them and data services consume content for any number of recombinatory purposes.

In this ever-increasing field of devices, the cost to maintain exacting control over the presentation of content quickly puts a strain on any budget of time or resources.  Responsive web design is an approach that addresses the increasing scale in the number of devices. It favors an implementation that adapts to the size of a device without knowledge of the type of device over the optimized, device-targeted experience of say, a native application.  Responsive web design makes content accessible across more devices than any one organization could develop explicitly against. It also anticipates access on devices that have yet to be introduced to the market.

Responsive web design is a strategic goal of Drupal 8, the next major release. Acquia has made responsive-design a priority for its themes in Drupal Gardens. Personally, I am championing responsive design as the essential starting point for every web project. This is not simply a technique to target mobile platforms. It is a paradigm shift in web design and development to the same degree that cascading stylesheets redefined web development a decade ago.

The Strata of the Front End Stack

Let’s look at what responsive web design looks like in the wild. The Sasquatch Festival web site provides an example of a site designed to look good on a device of narrow width as well as wide width (and a few points in between).

  

The Sasquatch Festival site layout reflows with a simple resizing of the browser window on a desktop. Notice how the site’s title image reduces in size; how the layout reduces from multi-column to one column. The navigation reduces from eight items to four items.

One need not view the page through a small screen device to see the small screen layout. Take a moment to go to the page and have some fun resizing your browser window.  Note how the layout changes step-wise through a few variations.

Because this site knows nothing about the agent that will handle its presentation, it makes no special concessions in terms of the size and type of data it returns on a page request.  Every agent that requests this page is given the same basic page - the presentation is more or less a bit of artistic flourish tailored to the size of the screen. The only exceptions are background images referenced in the CSS and targeted to screen size ranges. So a phone will more or less need to consume the same page that a desktop browser will receive.

Responsive web design is a basic level of data presentation. Arranging it on a scale of how device-targeted it is, responsive design is ideally the level just beyond a raw document.  

The raw document is content in its purest form. When well constructed, it is a URL, a title, a document outline, primary content, links and some small bit of related content. It is the stuff the Internet is made of.  The stuff that search engines covet. The stuff that non-visual agents zip through with ease.

Responsive web design is simply the branded and styled form of this basic document.  A well-constructed raw document is the foundation of any adaptive design.

Above responsive web design in the front end stack, we begin to take notice of agents. Optimizing content for smaller devices quickens page download speeds for a more pleasing end-user experience. In order to optimize content, the server must know that (a) the requesting agent is a small-screen device and (b) the business logic layer that renders the page must have some means of optimizing the content.  Services such as mobify.me are targeted at this layer in the stack.

For various reasons, a design may need to be optimized for a specific device or set of devices. One way to approach device-specific design is to leverage features that browser vendors build into their products. I’m referring mostly to Apple’s Safari and the various -webkit CSS properties it defines. Another approach wrapping the HTML, CSS and JavaScript that defines the responsive design of the site in a device-native wrapper with a service like PhoneGap. A third approach is to target devices by their capabilities using, for example, the dense pixel ratio of the iPhone Retina Display phone to vary the display of content just for it (using the -webkit-min-device-pixel-ratio: 2 media query).  Although this third approach is really just a responsive technique that happens to only apply to one device at this time.

The opposite extreme of the raw document is the native application. Gaining notoriety as the Apps of various app stores, the native app is wholly unrelated to a web page. Apps provide fast data access through limited interaction and focused tasking.

Responsive web design should be the starting point for general data access on the web.  As time and resources permit, optimizations and native applications can be layered onto this basic level of access.

The Technical Elements of a Responsive Web Design

Responsive web design introduces styling only as the agent is capable of interpreting it.  We do not style for desktop and then remove styling for less capable devices. For example, one would not float sidebars in all cases and then set them to float none for small screens.  Some have labeled this approach mobile first.  I will simply suggest that you always add and never substract styling.

The following elements define the fundamental responsive web design:

  1. A viewport meta tag that unzooms pages in mobile browsers.
  2. Typography comprised of font sizing and vertical rhythm tailored to various device sizes.
  3. A grid system for layout in wider devices. For smaller devices, the layout defaults to one column.
  4. Concessions for browsers (like Internet Explorer 8 and older) that do not recognize advanced media query conditions.

Fully appropriated, the head element of a page will look like this:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
 <meta charset="UTF-8" />
 <title></title>
 <meta name="viewport" content="width=device-width" />
 <link rel="stylesheet" type="text/css" media="screen" href="core.css" />
 <link rel="stylesheet" type="text/css" media="screen and (min-width:640px)" href="grid.css" />
 <!--[if lte IE 8]>
  <link rel="stylesheet" type="text/css" media="screen" href="ie/core.css" />
  <link rel="stylesheet" type="text/css" media=”screen” href="grid.css" />
 <![endif]-->
 <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>

Let’s break this down into its parts that relate to response web design (bolded in the code above).  First, the basic html doctype. Some will call this HTML5, but in reality it’s the most basic doctype declaration around.

<!DOCTYPE html>

Next is a meta tag that unzooms the page. It has the name viewport and the value width=device-width. Safari on the iPhone, for example, defaults the width of the page to 980px, which results in a zoomed-out page even when the content is just auto width text. This metatag unzooms the page and gives it that nice text-from-edge-to-edge look.

<meta name="viewport" content="width=device-width" />

The core.css stylesheet is the primary source of typography, positioning and reusable component styling.  Core.css should not contain styling for colors, border, backgrounds, background images and the like.  The following is an example outline for this document, presented in pseudo code.

- Basic typography, but ideally no styling at all. Instead rely on the user-agent.

@media screen, projection {
- Minimal resets if any
- Basic typography such as font family. Provide a stack back to serif and sans-serif.
- Reusable component styles e.g. boxes, comments, meta information on an article, etc
}

@media screen and (max-width:480px) {
- Typography for phone screens e.g. font-size, font-size-adjust, line-height
}

@media screen and (min-width:480px) {
- Typography for tablet and desktop screens e.g. font-size, font-size-adjust, line-height
}

@media screen and (min-width:960px) {
- Constrain the content width to 960px or some similar width
- Center the page in the screen
}

@media screen and (min-width:1600px) {
- Large screen design. Highly dependent on use case.
}

Once the device width exceeds 640px, we introduce a stylesheet that contains the grid layout declarations. This could be 960.gs, blueprint grid, YUI grids, OOCSS grids, or a homespun grid.  It must be noted that the HTML document is already marked up with the classes that correspond to the gridding system you choose.  Until the device width exceeds 640px, the gridding classes in the document will remain inert because the grid.css stylesheet will not be applied. This is the magic that turns our single-column layout for devices under 640px in width into a gridded layout for wider devices.

<link rel="stylesheet" type="text/css" media="screen and (min-width:640px)" href="grid.css" />

Internet Explorer 8 and previous versions present a challenge to the responsive web design approach. They are in some sense full-fledged desktop browsers. They also command a large enough market share to warrant special attention. Internet Explorer 8 and previous versions do not recognize advanced media query conditions such as the (min-width: 640px) used above to load the grid.css stylesheet.  So we load this stylesheet and an IE override sheet in a conditional comment.

<!--[if lte IE 8]>
 <link rel="stylesheet" type="text/css" media="screen" href="ie/core.css" />
 <link rel="stylesheet" type="text/css" media=”screen” href="grid.css" />
<![endif]-->

Older versions of modern browsers (Firefox, Safari and Opera) may have limited support for advanced media query conditions as well. People who use these browsers tend to keep them updated, but if a gridded layout is required for some version of a browser that doesn’t support media query conditions, various polyfill scripts exist, such as jQuery Media Helpers.  Without the grid stylesheet, a page will default to a one column layout; although not ideal, the content will still be accessible - perhaps moreso than some never-tested, half applicable gridded page layout.

Finally, the responsive web design should separate structure (core.css) from purely presentational styling (style.css) such as colors, borders, background images, gradients, transitions, and text transformations.

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

The code presented above is part of an ongoing experiment is responsive web design. Over time, this emerging practice will evolve as the devices evolve. Consider this code a solid starting point for your own work.  

Considerations for a Responsive Web Design Approach

  1. Web pages with heavy markup structures and media-laden pages will download very slowly onto small devices. Sites the deliver mostly text content in a light structure will be best suited for this approach.
  2. Designers and site owners must acknowledge that the layout of their pages will vary from device to device. The possibility exists that older devices will present nothing more than a page of basic, bland text and links.

Resources

  1. Response web design examples: http://mediaqueri.es/
  2. Ethan Marcotte’s original article: http://www.alistapart.com/articles/responsive-web-design/
  3. Hard Boiled Web Design by Andy Clark: http://hardboiledwebdesign.com/
  4. Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
acquia
drupal planet
acquia drupal planet
In this eBook, we show you how to optimize performance of your Drupal site without any knowledge of coding, server configuration, or the command line.

Comments

Posted on by Dudley (not verified).

Navigation plays very important role in responsive web designing. It is laid out in different locations depending on the width of the browser. Responsive design should not scale the navigation to enormous proportions on a large screen device.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.