Responsive Web Design

by guest writer: Matthew Bennett

© 2014 Off Madison Ave. All Rights Reserved.

To some, the idea of flexible design that abandons the constraints of the printed page may sound like a refreshing alternative to the current norm. To some, it may even seem controversial. Either way, it might surprise you that those words were written in April 2000—over fourteen years ago—in the early days of the web. (Well, earlier. The web is, after all, “still at the beginning of its beginning,” according to Kevin Kelly of Wired Magazine). We were still using Netscape Navigator and IE5. There was no Firefox, no Safari, no Chrome—certainly no iPhone or iPad.

With the web’s promise of information ubiquity, we had the carrot we needed to design flexibly as a means to achieve maximum accessibility. Sadly, we needed a stick, which came in the form of mobile devices—tiny screens all over the world that demanded access to the same information as their larger-screened, desktop cousins.

After Allsopp’s Dao, it would be another ten years before we found a practical way to abandon ourfixed-width layouts and design for screens of all sizes. In May 2010, Ethan Marcotte coined the term “responsive web design” in an article of the same name for A List Apart, an online publication for web professionals. He further fleshed out his ideas in his June 2011 book, aptly titled Responsive Web Design.

Responsive Web Design 01

Responsive Web DesignOverview

“ The control which designers know in the print medium, and often desire in the web

medium, is simply a function of the limitation of the printed

page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.”— John Allsopp A Dao of Web Design

Responsive Web Design 02Details

In his book, Ethan provided three basic constraints that are specific enough to be relevant but generalenough to guide the design of any website:

“So what does it take to create a responsive design?

Speaking purely in terms of front-end layout, it takes three core ingredients:

1. A flexible, grid-based layout,2. Flexible images and media, and3. Media queries.”

— Ethan Marcotte Responsive Web Design

Media Queries

Media queries are a feature of CSS, the language used by developers to apply visual design to HTMLmarkup. They allow developers the ability to adjust the design of a web page based on features of themedium in which the page is being rendered.

When you think of “responsive,” you probably envision the layout of a page adjusting as the browser is resized horizontally. And, as you might expect, width is the media feature used most often forresponsive web design.

Another media feature that has been gaining momentum is screen pixel density. This allows the use of standard resolution images as a default fallback, while using high resolution images on devices with high pixel density screens (a feature introduced by Apple’s Retina displays but common to basically all mobile devices since 2012). For example, the iPhone 4 has a pixel density of 326 PPI (pixels per inch). The pixel density of your basic 22˝ 1080p desktop monitor, on the other hand, is only about 100 PPI. Standard resolution images (i.e., images we would typically use for viewing on that desktop monitor) tend to look blurry on high density screens. Media queries allow us to use higher resolution images—but only where appropriate—so our designs look crisp on the latest devices.

Flexible Images and Media

By default, web browsers will render images, videos and other visual media at their native resolution,regardless of the size of the browser window or of other elements on the page. These media elements

Responsive Web Design 03can be rendered either larger or smaller by providing explicit dimensions (again, via CSS). Explicit dimensions can be provided either in fixed, pixel-based values, or, to allow flexibility, in percentage-based values so that they will resize as the page’s structural elements resize.

In the page below, the embedded video is directed to have a width equal to 100% of the width of thepage’s main content area. As the content area resizes based on browser width, the video resizes rightalong with it.

Notice, also, how the page layout adjusts to screen width. Those adjustments are driven by media queries.

Many designers and developers will stop after meeting these first two criteria and call the result“responsive.” But we’re not quite there yet. We still need to address the final and, arguably, mostimportant criteria.

Flexible, Grid-Based Layout

The basic approach to creating a flexible layout is similar to the approach used to create flexible media:use percentage-based values to declare the size of the page’s structural elements.

When media is made flexible, it is allowed to adjust to the constraints of the page’s structural elements. When the layout is made flexible, the page’s structural elements themselves are allowed to adjust to the constraints of the browser window.

This is an incredibly powerful technique because it allows designers and developers to create experiences that fit the screen appropriately, no matter how large or small.

Responsive Web Design 04Before the proliferation of handheld, web-ready devices, it was common to design and develop explicitly for 1024×768 screens. Because, the assumption went, if you were browsing the web, you were doing so on your economically sized monitor at your desktop computer. That made things relatively easy for designers and developers. But the landscape has changed. There is no such thing as a “standard screen size” that we can work against.

Designing with a flexible layout ensures that websites will appear to fit naturally on the screens of the widest range of today’s devices. It also future-proofs a design, to an extent, against inevitable adjustments to the “standard” screen sizes.

Our Perspective

The explosion of devices with screens of all sizes presented a new set of obstacles to designers anddevelopers. The way we had worked for years—based on a fixed, static assumption of screen size—was proven irrelevant.

The good news is that the web, as it always does, evolved. Web standards and browsers (some, moreslowly than others) have evolved to provide us the tools and techniques required to design anddevelop not just for one screen size, or for three screen sizes, but agnostically for any screen size.

Image Credit: Envato

This new, flexible approach to our craft requires more interaction between designers and developers.When we assumed a single, static screen size, it was much easier to pretend that design anddevelopment were distinct, sequential steps of the process. But now, it behooves us to take advantageof the necessary interplay between the design and development disciplines.

Recommendations

As mentioned earlier, many designers and developers will call it a day after meeting the first two criteria—media queries and flexible media. But responsive web design came about to address technological change. And the third criteria—flexible layout—provides a kind of resilience to similar changes in the future. The fact that responsive web design can help us address problems both now and in the future is what makes it so powerful.

There are other techniques for building multi-device sites, most of them involving server-side functionality that sends different markup to different devices. Websites built using these techniques are more difficult to maintain because you end up with what amounts to multiple, varying versions of your website, each of which requiring its own upkeep.

Responsive web design avoids that problem by sending the same HTML and CSS to all devices. Media queries then allow the browser to determine which pieces of CSS to use and which to ignore.

Additionally, responsive web design is Google’s “recommended configuration” for “building smart-phone-optimized websites.” When each “page” is actually composed of multiple physical documents (the “mobile” one, the “desktop” one, etc.), it makes it difficult not only for developers to maintain, but for search engines who have to make sense of all of these sets of seemingly duplicate pages. Responsive web design’s same-assets-for-everyone approach avoids that problem altogether, allowing search engines to index a site much more quickly and predictably.

The proliferation of tablets, phones and devices of all shapes and sizes didn’t ruin our static, rigid way of doing things. It pointed out that such an approach was flawed to begin with. We could fear the ongoing change. On the other hand, responsive web design, with the many benefits it provides (maximum, future-proof device coverage and relative ease of maintenance and search indexability), allows us to embrace this change. It is, therefore, our recommended approach for all websites.

Responsive Web Design

visit:www.offmadisonave.com

contact:info@offmadisonave.com

By:Matthew BennettInteractive Services

05