Conversations

Our interaction with the web has fundamentally shifted. Online content is accessible through a ever-expanding and myriad range of devices in a nearly unlimited set of surroundings. The conversation is no longer concerned with desktop or mobile users. Consider: a person might read a news article on their smartphone while at work, with limited connectivity, as a workaround to company security policies. Someone else might view a slideshow of images, listen to audio or watch a video on a notebook or tablet while making the daily commute. It is now an incorrect and potentially disadvantageous mindset that makes assumptions based on device capability or context.

Instead, the conversation has moved from the limitations of device and technology to the adaptability afforded with design that is responsive. Pixel-perfect layout in favor of flexible structure with fluid content and media. Design in search of commonalities, not differences.

Response

A Brief History

One year ago, Ethan Marcotte published an article titled Responsive Web Design (A List Apart, 25 May 2010). It has proven hugely influential and a fundamental starting point for responsive design strategy. His central argument is that while it is often tempting to develop mobile-specific versions of a website for a client with sandboxed and curated domains, the approach can quickly become a tremendous burden. How many devices do you specialize for? Which mobile browser do you target, at what resolution and what screen size? Before long, a developer could be asked to provide completely different experiences for a dozen devices: catered solutions for an iPhone, HTC running Android or Windows 7, a Blackberry. The solution is to adapt to the one thing that is predictable and unchanging: viewing size.

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 Marcotte

Consistency of experience

Experience is key. Users change the way they access content frequently; numerous times daily. We expect the user interface to remain consistent, if not exact as we move from desktop to mobile, video game console to tablet. As a sort of testament to this need, Facebook has recently announced the rollout of one unified interface for all 250 million of its mobile site users.

Fluid Design & Media Queries

How does a website become responsive? HTML and CSS are the building blocks of the web: the structure to hold our rich content and the styling essential to bring it to life. Historically, CSS has supported a method for scoping presentation to devices with media types — a way of adapting stylesheets for screen, print, or handheld devices. These are, however, quite limited and ill-fitting as the definition of what is appropriate for each becomes less obvious.

As Ethan Marcotte explains, the upcoming CSS3 specification includes a very powerful method of querying device characteristics. These expressions, or Media Queries, check for the conditions of specific media features. A media query could, for example, inquire on the current width of a browser, the maximum or minimum screen size of a portable device, aspect-ratio, color, resolution or device orientation. By preparing a stylesheet to adapt to the changing conditions of a visual or tactile device, websites become truly responsive.

Strategy

Small screen strategy

Responsive design is not about “designing for mobile.” But it’s not about “designing for the desktop,” either. Rather, it’s about adopting a more flexible, device-agnostic approach to designing for the web. Fluid grids, flexible images, and media queries are the tools we use to get a bit closer to that somewhat abstract-sounding philosophy. Ethan Marcotte

In defining a mobile offering, it is important to make decisions driven by research, user needs and content strategy. Media queries are not mobile solutions in and of themselves. For many client projects, a catered mobile experience — often deliberately sectioned within a m.website.com or mobile.website.com domain — is entirely appropriate and necessary. Mobile users expect content delivered quickly, with easily accessible links and navigation; without embellishment, in an interface designed for small screens.

Time and budget may not always allow for specialization. For a website that does not sell a product or require much interaction, a partitioned mobile website is more often a hindrance than a benefit. In these cases, designing a website to respond rather than redirect is an attractive and viable option. This approach is more than simply agreeing that some effort is better than none: the alternative is pushing a design envisioned for the ideals of the desktop onto users, forcing them to navigate an entirely unsuitable interface.

Luke Wroblewski, a recognized product designer, has long championed the notion of designing for Mobile First. By starting with an assumption of limited capabilities, restrictions force designers to focus on content and hierarchy. Onto that, layers of rich detail and extended functionality are added as the capabilities of the device improve. It’s a keystone to the philosophy of Progressive Enhancement. Focus on accessibility and usability first, then build on the experience.

Movement

Responsive web design is not synonymous with a mobile offering. It is a design approach for creating fluid, adaptable and self-aware websites unconcerned with device limitations. Responsive design is design for content: a multi-resolution, standards-compliant cradle for the hierarchy of written word and rich media. There are absolutely valid cases where a client’s website would be better served by a device-specific, sand-boxed website designed explicitly for mobile behaviors. Research, user needs, and content strategy inform the decision on which approach is best for your audience.

These are very exciting times for the web. The rise of HTML5, CSS3, Web Typography, and touch interfaces have stripped away former browser limitations. Going forward, our experience with the web can only be hindered by choosing not to embrace emerging technologies.

How can you refine and expand your current offering? How will responsive design affect the way you plan and build a project with changing criteria?

---

This article is the first in a series posted to Studio :: Headshift. It is followed by Design for the changing web: Our response.