This is the second part in the ongoing series about responsive mobile design. The main goal of this series is to answer three underlying questions: what are we designing, why are we designing it in a certain way and how are we implementing the target design. The basic principles of responsive mobile design were highlighted in the first part – the same content, with the same logical and visual hierarchy, but the representation of the content adapts to the current context. Today, I’m going to show a few examples of responsive web design, and how we can adapt the basic principles of responsive web design and extend them to the world of responsive native mobile applications.

In his seminal article published in May 2010 Ethan Marcotte coined the term “responsive web design“, paving a way for a unified approach to designing web sites that adapt to the current media context:

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

Ethan’s research into crafting browsing experiences that scale from large desktop environments down to tablets, netbooks and small mobile phones has culminated in the“Responsive web design” book published in June 2011. The original article and the book have prompted forward-thinking web designers to reevaluate their work flows.

Web designers no longer live in a world where there are two distinctly separate ways of accessing web sites, large desktop setups and small, oftentimes feature-limited, mobile phones. The explosion of different form factors, screen sizes, resolutions and ways to interact with the device itself has created an almost continuous spectrum of browsing experience, and you can no longer think in terms of desktop-optimized and mobile-optimized versions of your site. You can no longer generate and maintain separate HTML files for different “versions” of your site, simply because you can no longer take the spectrum of devices used to access your content and split it into precisely defined and well delineated buckets.

Instead, responsive web design talks about different representations of the same content. The basic logical hierarchy of the content, and the content itself is defined in a single HTML file. The overall visual language and styling are defined in a single CSS file. In addition, the same CSS file contains multiple sections, each defining the layout and flow of the content itself. Let’s see a few examples.

This screenshots show two representations of the design blog by Happy Cog. A few years ago, you would use the terms “desktop version” and “mobile version” to describe the two representations, and most probably the second version would have, indeed, been a separate HTML definition that would need constant maintenance – or custom content management system – to stay in sync with the “main” version of the site. In the world of responsive web design, it’s the same HTML file with well defined hierarchy of content, and a single CSS file (with a nice ASCII art) that optimizes the presentation of the content to the current context.

Tracing the logical hierarchy of the content, you will see the simple navigation menu in the header, the leading section with main logo, tagline and search box, a large preview of the latest blog entry (with image, first paragraph and author blurb), smaller previews of the next three entries, blurbs about additional media materials, contact information and copyright footer. The logical importance and connections between the different sections are reflected in the way these sections are ordered in the grid, and in relative sizes of grid cells themselves.

There’s a strong visual language that reinforces the logical hierarchy and supports a unified flow of information. A simple duotone color palette of purple and orange, consistent and clean typography, subtle drop shadows framing the main content, colorized images associated with each entry blurb – all of these together create a unique visual branding for this site. Also note the transition between light-on-dark and dark-on-light styling for different sections, and a gradual darkening of background in the footer sections – until it gets to the copyright footer that “closes the loop” started by the similarly styled, if only slightly lighter, header.

There is no mobile version of this site. Instead, if you open this page on a device with smaller form factor, you will see a slightly different representation of the same content, a representation that maintains the same logical and visual hierarchy of the content:

A more restricted context means that some of the content will need to be either reflown or hidden altogether. In addition, some of the content will need to be rearranged to optimize for a different interaction model that is exposed by smaller devices. Take a look at the right side of the navigation header. The words “happy cog” are gone to remove extra clutter and noise. Instead of having two separate click targets, one taking you to the main site, and another opening a slider menu, you only have the cog that opens the slider menu. The search button transitions to using an icon instead of text. The main blog entry loses the big thumbnail, and the author thumbnail. The author blurb moves above the first paragraph, as reflowing text around such a box is going to result in bad typography under small widths. The arrangement of blurbs for next three entries become vertical, with comfortable touch areas. The side-by-side layout in the second footer transitions to vertical stacking – to keep the three-column arrangement of office overview.

There’s an interesting thing to note – the blurbs about additional media content in the first footer are gone. This information is still accessible from the main navigation menu, and removing the blurbs keeps the overall scrolling experience on a smaller form factor more pleasant.

This is another example of responsive web design, this time from Meagan Fisher. Three-column representation of the content takes advantage of large form factors, keeping most of the content above the fold. A single-column representation reflows the content blocks, making a number of interesting decisions along the way.

Three blurbs from the left column are gone – presumingly as they are not important enough to further increase the overall height of the content. The five-element navigation menu keeps its horizontal layout, but every navigation item loses subtitle. I personally am not the biggest fan of this representation, as it results in very poor usability on touch-based devices, where you need to be extra careful where you click to navigate to the specific subsection of the site. The main content stays the same – large thumbnails, first paragraph and additional links – but it transitions to be vertically stacked. This is a tradeoff between keeping the large thumbnails and increasing the overall height of the scrollable content. Finally, the single-column arrangement of links in the right column (which balances nicely with tall content to its left) transitions to three-column arrangement on a smaller form factor. This is my favorite part here – keeping the overall height from growing even further, taking advantage of short link texts and increasing the scannability of the section content on smaller form factors (where displaying the links in a single column would have required scrolling up and down to locate the specific link).

Simon Collison’s site takes responsive web design and strips it down to the bare minimum. The transition from four-column to single-column representation is a high-precision, high-fidelity preservation of the layout and styling of content within each section and each cell – including textures, typography, colors, alignment, margins and gaps.

This is one of my favorite examples of responsive web design – from Stephen Caver (which, perhaps not incidentally, works at Happy Cog). The header is a rather spacious navigation menu, with extra lines given to describe each navigation link. The beautiful textured black tagline typography is supported by the second version of the same navigation menu, this time using a similarly textured black block. The somewhat disjointed arrangement of additional content in the bottom half of the page has a nice weight distribution that balances out the heavy black shapes above it.

The representation of the same content on a smaller form factor is absolutely perfect. The navigation menu items are stacked vertically below the main icon, using much larger font size and providing nicely delineated and comfortable touch targets. The overall typography look of the tagline is preserved, along with the texture, even at a smaller scale. The rest of the content is arranged in a simple and very effective fashion, flowing all the way down to the spacious footer and omitting the sparse – and not very useful – factoids found in the bottom-left part of the full-size representation.

My favorite part about this transition is how well it maintains the visual flow, language and styling. In addition to scaling down and preserving the typography of the tagline, it also mirrors the sky-neutral-land background styling of the content, and even while the header and footer sections are much taller than what you usually see on scaled down versions of other sites, and the navigation menu is a spacious vertical list of links – the overall height of the content is identical between these two representations.

This is just a small glimpse into the myriad of UX and UI design decisions that must be done in the field of responsive web design. Addressing this complexity requires a larger upfront investment during the design stages, and, at times, an increased initial development cost. However, it is absolutely worth it in the long run, as your final product, no matter if it’s a web site or a native mobile application, can scale and adapt to a much wider variety of contexts, with much less future investment on your side.

Stay tuned for the next entry where i’m going to talk about the implementation aspects of responsive mobile and web design, and what is available to Android developers that want to take advantage of these principles.