RWD Crash Course: Responsive Web Design Basics

RESPONSIVEWEBDESIGN
Matt Smith / @AllThingsSmitty
A DEEP-DIVE CRASH COURSE

http://bit.ly/qo0qVk
“Everyone once in a while a
revolutionary product comes
along that changes everything.”

http://bit.ly/XvuRWT
0
20
40
60
80
100
120
140
2007 2008 2009 2010 2011 2012
Global iPhone sales
(in million units)

0
100
200
300
400
500
2009 2010 2011 2012
Global Android smartphone sales
(in million units)

0
50
100
150
200
250
300
350
400
450
500
2007 2008 2009 2010 2011 2012
Windows
RIM
Symbian
iPhone
Android
Global smartphone sales
(in million units)

http://read.bi/MvOtBk
0.0
10.0
20.0
30.0
40.0
50.0
60.0
April 2009 May 2010 May 2011 April 2012
Percentage of U.S. mobile web use

http://bit.ly/zE1zgp
The penetration of desktop and laptop
ownership in the U.S. is the same today as
it was in 2007.

click for the “full desktop site”

Mobile web use will continue to surge over
the next 5 years at a rate of 66% each year.
http://bit.ly/nqdf

Fluid Layout + CSS3 Media Queries
+ Fluid Images/Media = RWD

Fancy Markup + CSS = Grid System

@grid-types {
.fixed {
width: 960px; /* pixel-based */
}
.fluid {
width: 75%; /* percent-based */
}
.elastic {
width: 60em; /* proportion-based */
}
.hybrid {
height: 1.25em; /* combination */
margin-left: 6.191495%;
}
}

<div class="container">
<div class="grid">
<div class="one-third-column">
.container {
margin: 5em;
padding: 0 1em;
max-width: 85%;
}
.grid { padding: 1em 0 5em; }
.one-third-column { width: 33.333333333%;
}

(target pixel value / context pixel value) *
100 = dimension value in percentage

.one-third-column {
margin: 0 3.317535545023697% 0 0; /*
21px / 633px */
width: 31.1216429699842%; /* 197px /
633px */
}
h1 {
width: calc(1/6 * 100%); /*
16.66666666666667px */
}

media="screen and (max-device-width:
480px)" href="small.css" />

(max-device-width: 480px)
@media only screen and (max-device-width:
480px) {
.column {
float: none;
}
}
breakpoint

@media
only screen
and (min-device-pixel-ratio: 2)
and (min-width: 320px),
only screen
and (min-resolution: 192dpi)
and (min-resolution: 2dppx) {
/* small screens, Retina display */
.column {
float: none;
}
}

@media only screen and (min-width: 320px)
{
/* small screens */
}
@media only screen and (min-width: 700px)
{
/* medium screens */
}
@media only screen and (min-width:
1300px) {
/* large screens */
}

don‟t rely on device dimensions

“It‟s not about what happens at the
breakpoints, it‟s about what happens
between the breakpoints.”
– JEREMY KEITH
http://bit.ly/IyLnvL

img[class*="scale"] {
max-width: 100%;
height: auto;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

disruption will only accelerate

http://bit.ly/YjCtKy
listen to your peers

“People want to do different things on
mobile, so one adaptive experience is a bad
idea.”
http://bit.ly/10KHnOd

“Responsive Web Design produces bad
performance.”
http://bit.ly/Uh5czr

“Responsive sites/apps require more code
and more testing.”

By 2015, there will be one mobile phone for
every person on Earth.
Google Internal Data

More than half your customers won‟t
recommend your business to a friend if you
have a bad mobile site.
http://bit.ly/qCcpl3

http://bit.ly/Yd0Lmj
When someone searches and finds your
mobile site:
• 61% of them will call you
• 59% will visit you
• 70% of mobile users compare prices
• 65% read product reviews
• 50% of mobile searches have lead to
purchases

this is just the tip of the iceberg
http://slidesha.re/14HG8RJ

Responsive Web Design is not mobile design

Responsive Web Design does not have to
take more time, or cost more money

Responsive Web Design is worth it

“Responsive Web Design rocks. It‟s like
Motörhead playing „Ace of Spades‟ at
Stonehenge…on an asteroid.”
– BRUCE LAWSON
Future Insights Live, April 30, 2013

Responsive Web Design
http://alistapart.com/article/responsive-web-design +
http://www.abookapart.com/products/responsive-web-design
Implementing Responsive Web Design
http://www.implementingresponsivedesign.com/
Adaptive Web Design
http://easy-readers.net/books/adaptive-web-design/
A New Responsive Design Process
http://www.netmagazine.com/features/new-responsive-design-process

RWD Crash Course: Responsive Web Design Basics

Recommended

Recommended

More Related Content

Similar to RWD Crash Course: Responsive Web Design Basics

Similar to RWD Crash Course: Responsive Web Design Basics (20)

Recently uploaded

Recently uploaded (20)

RWD Crash Course: Responsive Web Design Basics