A viewpoint on the flexibility and required components of responsive web design, and its resilience to technological change, ease of maintenance and search index-ability. Off Madison Ave.

1. Responsive Web Design
by guest writer:
Matthew Bennett
© 2014 Off Madison Ave. All Rights Reserved.

2. Responsive
To some, the idea of flexible design that abandons
Responsive Web Design 01 the constraints of the printed page may sound like
Web Design
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
Overview
2000—over fourteen years ago—in the early days of
the web. (Well, earlier. The web is, after all, “still at the
“ The control which designers
beginning of its beginning,” according to Kevin Kelly
know in the print medium,
of Wired Magazine). We were still using Netscape
Navigator and IE5. There was no Firefox, no Safari,
and often desire in the web
no Chrome—certainly no iPhone or iPad.
medium, is simply a function
of the limitation of the printed
With the web’s promise of information ubiquity, we
had the carrot we needed to design flexibly as a
page. We should embrace the
means to achieve maximum accessibility. Sadly,
fact that the web doesn’t have
we needed a stick, which came in the form of
the same constraints, and
mobile devices—tiny screens all over the world that
design for this flexibility.”
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 our
fixed-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.
— John Allsopp
A Dao of Web Design

3. Responsive Web Design 02 Details
In his book, Ethan provided three basic constraints
that are specific enough to be relevant but general
enough 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, and
3. 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 HTML
markup. They allow developers the ability to adjust
the design of a web page based on features of the
medium 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 for
responsive 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

4. Responsive Web Design 03 can 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 the
page’s main content area. As the content area resizes
based on browser width, the video resizes right
along 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, most
important criteria.

5. 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 04 Before 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 and
developers. 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, more
slowly than others) have evolved to provide us the
tools and techniques required to design and
develop not just for one screen size, or for three
screen sizes, but agnostically for any screen size.
Image Credit: Envato

6. 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 and
development were distinct, sequential steps of the
process. But now, it behooves us to take advantage
of 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 Bennett
Interactive Services
05