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.

Continue reading