Responsive web design is a flexible approach that allows web content to adapt to different screen sizes and devices. It involves using a flexible grid layout, flexible images and media, and media queries. With a flexible grid based on percentages instead of pixels, fluid images and media that resize to fit different screens, and CSS media queries that apply different styling based on screen width, a responsive design can adapt to various browsers and devices from mobile phones to desktop computers.

1. Will Jayroe and Chris Lauer | November 14, 2013
Zen and the Art of Web Design
RESPONSIVEWEBDESIGN

2. A Dao of Web Design
ACCEPTTHEEBBANDFLOW
“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. But first, we must 'accept the ebb and flow
of things.”
John Allsopp, 2000
http://alistapart.com/article/dao/

3. Architecture
ACCEPTTHEEBBANDFLOW
In architecture, creative decisions
literally shape a physical space
and change is defined in decades
or even centuries.

4. The Web
ACCEPTTHEEBBANDFLOW
The web, by contrast, is
ephemeral and liquid. Devices
of every shape and size
present an ever changing
array of display widths,
resolutions, user preferences
and web browsers.

5. The Screens of Things to Come
ACCEPTTHEEBBANDFLOW
Mobile browsing is on-track
to eclipse desktop in 2014.
http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6

6. We Walk From Here
ACCEPTTHEEBBANDFLOW
Historically, we have built
separate mobile and desktop
sites. With the introduction
of each new device, this
strategy quickly becomes
impractical. How can we and
our designs adapt to what
feels like a zero sum game?

7. A New Way
BECOMETHEFLOW
Responsive Web Design represents a flexible approach that can adapt to the
constraints of the browser window or device that renders it, creating a design that
responds to the user’s needs. There are three main ingredients to RWD:
1. A flexible, grid-based layout,
2. Flexible images and media, and
3. Media queries, a module from the CSS3 specification.

8. Use a Fluid, Grid-based Layout
BEFLEXIBLE
Build a flexible foundation instead of a fixed foundation. Fluid grid-based layout uses
percentages instead of pixels.
Pixels from design comps can be converted into percentages with a simple formula:
target ÷ context = result
Let’s see how this works…

9. Use Flexible Images and Media
BEFLUID
A simple line of CSS will allow images and other media to flex-to-fit their containers:
img, embed, object, video {
max-width: 100%;
}
Let’s take a look…

10. CSSMEDIAQUERIES
What is a media query?
The Media Query is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution. It
screen resolution. It became a W3C recommended standard in June 2012. and is a cornerstone technology of
cornerstone technology of Responsive Web Design.

11. CSSMEDIATYPES
Print media
<link rel="stylesheet" type="text/css"
href="print.css" media="print" />
print.css
body{
font-color:#000;
font-size:18px;
}
.advertisement{
display:none;
}

12. CSSMEDIAQUERIES
The engine behind responsive design
@media screen and (max-width: 320px) {
body{font-size:12px;}
}
@media screen and (max-width: 480px) {
body{font-size:14px;}
}
@media screen and (max-width: 768px) {
body{font-size:18px;}
}
@media screen and (max-width: 980px) {
body{font-size:22px;}
}

13. RESPONSIVEWEBDESIGN
All Together Now…
When you combine a fluid grid-based layout, flexible images and media, and media queries you get RESPONSIVE
you get RESPONSIVE WEB DESIGN.

14. EXAMPLESFROMTHEWEB
Boston Globe
http://www.bostonglobe.com
Indochino
http://www.indochino.com

15. EXAMPLESFROMTRAVELPORT
ViewTrip POCTravelport Marketplace (Beta)

16. QUESTIONS?