Responsive Web Design

responsive
Web design
how to adapt websites to any browser or screen size?
presented by Vu Tran Lam
Saturday, March 9, 13

2
when...?

computer evaluation...

the beginning of an
answer
through this man...

...in 1980 Steve Jobs recounted
the following story...
a few years before the Macintosh…

released 1984
...and that’s exactly what we’re doing here
“

the computer was just
the beginning...

8
Steve timeline...

Steve timeline...

10
Steve timeline...

Steve timeline...Steve timeline...

to be continue...

2007
the iPhone
original
era begins...
the smartphone

brings touch, gestures
iPhone 3G
web
touch
and the real web...
iPhone
2007 2008

20082007 2009
3GiPhone
iPhone 3GS
native apps and
android
apps
the rise of Android...

iPhone
2007
iPhone 4
2010
3GS
whither feature phones,
htc
g-ﬁve
samsung
and the further rise of Android...
2008
web os
3G
2009

2008 2009
3G
2010
3GS
2011
4
blackberry
kindle
nook
devices go mainstream
iPhone 5...
with great expectations...
samsung
motorola
htc
LG

opportunity
the bleeding edge...
'ish via China+

welcome to the future

http://www.ﬂickr.com/photos/_dchris/4652995362
today’s digital
and connected things
may feel incredibly diverse...

large stationary
Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).
public short use
(sweaty) touch

stationarysocial
lean-back powerful (enough)remote (voice, gesture, app)
One of many Smart (internet enabled) TVs now shipping. Includes apps and a browser.

Some can be paired with a smartphone or tablet.
low-ish ppi
large

The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser.
small touch, voice
ﬁxed (but not stationary)
bandwidth constrained

Quantas A380 first class with 17” flat panel display.
(Tethered tablets will likely appear soon).
manipulation unknown
large(r)
fixed (but not stationary)
bandwidth constrained
public
Source: PC Mag

Shipping spring 2012 in Europe
LG’s EPD is a 6-inch, 1024×768 e-ink plastic screen. It’s
0.7mm thick, it weighs 14g, and LG
claims it’s resistantto scratches and drops from a 1.5 meter height.
constrained
ﬂexible
small(-ish)
many unknown unknowns

+
+
=
+
connectivity
software
old
thing
(or media,
or tool)
thing
smart
old thing
(just a bit smarter)
user interface

what...?

Responsive Web Design (RWD) is an approach to web
design in which a site is created to provide an optimal
viewing experience - easy reading and navigation -
adapt to a wide range of devices
(from desktop computer monitors to mobile phones)

responsive websites
respond
to their environment

30
small + medium + large

31
one site for every screen

the web is less than
9000 days old
http://wwwﬂickr.com/photos/psd/3149878971

1/3
2012 estimates put the population at about 7 billion inhabitants...
Internet
of
people
on
planet
using

1/3 people has
a smartphone
of

Source: Compete quarterly smartphone report, Jan 2010 http://www.ﬂickr.com/photos/wonderdawg777/662293238
76% use mobile while waiting
in queues or for appointments

37
how many... in Q4/2012?
22.9M
47.8M

yesterday
“go to the computer”
to use the web/Internet

yesterday
“go to the computer”
today
“use mobile”

InternetUsers(MM)Estimated
1000
2007 2008 2009 2010 2011 2012 2013 2014 2015
Desktop users
Source: Morgan Stanley Associates Internet Trends 2010 (PDF)
mobile users =
desktop users
2000
1500
500
Mobile users
the mobility era
0
2013 is the year of responsive web design

1984 1990 1994 1998 2004 2007
display size/width
512 x 342
in the beginning
we had computers...

1984 1990 1994 1998 2004 2007
640
800 1024 x 768512 x 342
1024
512
we came to expect
more and more every year...
display size/width

240
320 x 480
1984 1990 1994 1998 2004 2007
640
800 1024 x 768512 x 342
1024
512
..one day in 2007
less became much more
display size/width

768 x 1024
240
320 x 480
1984 1990 1994 1998 2004 2007
640
800 1024 x 768512 x 342
1024
512
480 x 800
today we seem to have
a lot less more...
display size/width

1990 1994 1998 2004 2007 2011 2015
640
800
1280
1024 x 768
240
1440
600 x 1024
768 x 1024
with a lot more less
on the horizon...
public displays
1920 x 1080
1920
1024 320 x 480
480 x 800 360 x 640
display size/width

how to adapt websites to these
varied screens...?

you could not build all websites
http://www.ﬂickr.com/photos/handwrite/3460075040
UNDESIRABLE
suitable for every devices...

many sites for all devices

many sites for all devices
mobile website

http://www.ﬂickr.com/photos/farleyj/2768941171
responsive web design

50
how...?

http://www.ﬂickr.com/photos/clairity/1449248189
...we still can't see
the forest for the trees...

http://www.ﬂickr.com/photos/dnorman/3590132503
as rubbish with no value...
we treat our content
our assets

http://www.ﬂickr.com/photos/pasteberlusconi/5352932503
what would happen
if we designed content...

http://www.ﬂickr.com/photos/stephi2006/4428932249
to how we design software...?
in a manner similar

CONTENT
STRATEGY
SCREENS
VISUAL
DESIGN
USER
RESEARCH
DEV
TEST
formal web design process

...to adapt to many types of screen

USER
RESEARCH
CONTENT
STRATEGY
DESIGN
IN TEXT
VISUAL
STYLE
CONVERT
TO HTML
VISUAL
DESIGN
PROTOTYPE
TEST
SKETCH
SCREENS
responsive web design process

USER
RESEARCH
CONTENT
STRATEGY
DESIGN
IN TEXT
VISUAL
STYLES
CONVERT
TO HTML
VISUAL
DESIGN
PROTOTYPE
TEST
SKETCH
SCREENS
HTML STYLE
GUIDE
RWD
PROTOTYPE
responsive web design process

59
ways...?

bún đậu mắm tôm
http://www.ﬂickr.com/photos/_ppo/2393063853
a client makes a request
to a server...

bún bò
phở
trà đá
cà phê
cơm
many clients could make
belong to the context
nước cam
http://www.ﬂickr.com/photos/_ppo/
2393063853
varied requests...

45K, nước cam...
5K, trà đá...
the server tailors each request
to each client...
30K, bún...
50K, cơm...
http://www.ﬂickr.com/photos/_ppo/
2393063853Saturday, March 9, 13

what they need
ensuring they get exactly

http://www.ﬂickr.com/photos/fpat/3692425154
how.. mobile
access web on Internet?

q
http://www.ﬂickr.com/photos/sporst/3999795549
...let's ﬁrst deal with
what we mean by 'context'...
mobile

http://www.ﬂickr.com/photos/izzyplante/4009893952
in all of these varied devices?
how do we make content meaningful
the hell

stuff you know
and stuff you
wish you didn't...
features constraints+
• screen size
• local storage
• touch
• canvas
• SVG
• etc
• screen size
• no touch
• poor JavaScript
• no canvas
• isMSIE
• etc
http://www.flickr.com/photos/katerha/4330199412

http://www.ﬂickr.com/photos/donkeyhotey/5527263186
the client
and the server
working together...
with both client & server
feature
detection
device
database
"ﬁrst-run"

http://www.ﬂickr.com/photos/wscullin/3770015203
ﬁrst load...

fontsJavaScript
images
video
initial request
1
Hmm, Huston - we have a problem...
HTML
stylesheets
Flash
no idea what we can
deliver to this client...

$wurﬂ->getDevice($id);
PHP, Java, etc.
...or another dB!

width: 320 px... use what you can...
create proﬁle
2
{
width:{
screen:320

}
}
a cookie
PHP, Java, etc.

fontsJavaScript
images
video reduce images
we could send smaller images...
include only those resources
suitable for device context...
HTML
Flash
stylesheets images
{
width:{
screen:320

}
}

be sure to compress them if
you can...
{
width:{
screen:320

}
}

initial response
{
width:{
screen:320

}
}

detectFeatures();
3
JavaScript
{
width:{
screen:320

}
}

update proﬁle
subsequent
request
4
...now with more chips!
{
width:{
screen:320,

document:320
},
xhr:true,
canvas:true,
flash:false,
video:true,
formats:{
h264:probably,
ogg:false,
webm:false
},
offline:true
}

sync proﬁle
5
{
width:{
screen:320,

document:320
},
xhr:true,
canvas:true,
flash:false,
video:true,
formats:{
h264:probably,
ogg:false,
webm:false
},
offline:true
} same proﬁle on both
client & server

fonts
imagesimages
video
https://github.com/bryanrieger/proﬁle
now, send only what's required
6
HTML
video
Flash
JavaScript
stylesheetsstylesheets
HTML Javascript
sample code* available
*fyi the code currently uses a
simple proﬁle db idea we're playing
with instead of WURFL...
{
width:{
screen:320,

document:320
},
xhr:true,
canvas:true,
flash:false,
video:true,
formats:{
h264:probably,
ogg:false,
webm:false
},
offline:true
}

Ogg
dpi
isBrowserLamescreen size
HTML5
WebM
colour depth
javascript
storage
doctype
canvas
json
@font-face
H.264
WebGL
input methods
or proﬁle
the device context is deﬁned via
xhr
isTouch
media formats
features & constraints...
isTablet
appcache
CSS
custom properties
based on your own
tacit knowledge...

device proﬁle
Flash embed
http://www.ﬂickr.com/photos/dullhunk/4422952742
JavaScript
to us
actually relevant...
but only those that are
features & constraints
HTML5
screen size

http://www.ﬂickr.com/photos/aturkus/4040454167

this is rhetorical...

perhaps a bit ambitious?
...a bit late, no?
every stylesheet is not required
device detect early
typically
desktop scripts aren't suitable for mobile
@font support varies
3 columns, really?
...what about scripts & stylesheets
that aren't suitable?

...too many HTTP requests
provide alternates?
unsupported
media formats...
...that's a lot of
JavaScript!
requests...
...is Flash even supported?
does every device get the same
Flash – if they support Flash?
...ah, that is Flash!
the right version of

http://www.w3.org/TR/html5/video.html
this only deals with codecs -
not context*...
...screen size?
...available bandwidth?
you just can't detect
...or factors that
...is orthogonal to...
c.2000...
Text
fsdﬀfSaturday, March 9, 13

http://www.ﬂickr.com/photos/digger_twit/1353837770
...a selection of content
ﬁltering + transformation prototypes

begin with some
existing HTML content...

Raw user agent: Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 ...
Device identified as: Nokia N73
Actual Root Device ID: nokia_n73_ver1
WURFL ID: nokia_n73_ver1_submozilla50
physical_screen_height: 49
columns: 21
dual_orientation: false
physical_screen_width: 37
rows: 6
max_image_width: 229
resolution_height: 320
resolution_width: 240
max_image_height: 260
..
$wurfl->getDevice($id);
http://www.tera-wurfl.com/explore/
this is what we're after!

$html->ﬁnd('img[src]');
device property

<img />
device property
<img />
<img />

panda.jpg panda@320.jpg
based on...
repeat process for each
<img> found in document...
panda@240.jpg
resolution_width: 240 device property
replace each image with a
more suitable alternate...

...how many images are required?
other elements?
..what about slightly
"fuzzier" DOM elements?
...related elements?
panda@320.jpg panda@240.jpg
resolution_width: 240 device property
FAIL
panda.jpg

...an interesting idea
{{mustache}} inspired...

quickly got out of control...
yet revolting
*HACK*
PHP
{{mustache}} inspired...
slippery slope
to
XSLT!
...apologies to @stephenhay
FAIL
...an interesting idea that
hacked together in PHP
(should have been C for speed)...
almost
reinvented...
written in

...use XSLT – after
all it was made to
style content!?
WTF?
yup, that's "99
Bottles of Beer"
in XSLT...?
found massive inspiration
for XSLT here!
FAIL
...we honestly tried,
but we @$*#& XSLT!

http://www.ﬂickr.com/photos/vauvau/3466024918
responsive design & one web
really bloody diﬃcult...
the mobile web is

http://www.ﬂickr.com/photos/seatbelt67/502255276
hmm...

http://www.ﬂickr.com/photos/colindunn/4479309983
content.app
content as
applications...

http://www.ﬂickr.com/photos/aubergene/970367879
make it usable
and meaningful...

http://www.ﬂickr.com/photos/aubergene/970367879
add structure to
enable manipulation...

the CSS strategy

ﬁxed width layouts

ﬂexible grids layouts

adaptive
(multiple ﬁxed width layouts)
or
responsive
(multiple ﬂuid grid layouts)

• ﬁxed width for large and medium
• ﬂuid width for small
solution
mixed approach

12 column grids layout

target ÷ context = result
940
100%
720
76.5957447%
220
23.40425535%

/*

layout:
two
columns

description:
responsive

940
=
720
+
220

100%
=
76.5957447%
+
23.40425535%
*/
#container{
float:left;
margin:0
-‐25.5319149%
0
0;
width:99%;
}
#content{
width:685957447%;
margin:0
29.787234%
0
20px;
}
#primary,
#secondary{
overflow:hidden;
width:23.40425535%;
/*
200px
/
940px
*/
}
#site-‐tite,
#site-‐into{

width:74.4680851%;
/*
700px
/
940px
*/
}
#footer-‐widget-‐area
.widget-‐area,
#site-‐generator,
#site-‐description{
width:23.40425535%;
/*
200px
/
940px
*/
}

design for (the simplest) mobile browser ﬁrst.
note
mobile ﬁrst

fully ﬂexible with default
styles for navigation,
fonts, content and
no media query
begin with a lightweight default
B
C
A

embrace the cascade
don’t swap style sheets...let it cascade.
note

each style sheet augments the others
augment once
for another
device
A
B
C
xx px to xxx px
breakpoint
A
B
C
max xx px wide
(or unable to
understand further
instructions)
style sheet 1
breakpoint

A
B
C
xx px to xxx px
B
min xxx px wide
A
B
C
max xx px wide
(or unable to
understand further
instructions)
augment
once
again for
TVs etc.
breakpoint
each style sheet augments the others
breakpoint
style sheet 1
breakpoint
style sheet 2
C
A

using breakpoints
create breakpoints using media queries for various screens
technique
http://www.w3.org/TR/css3-mediaqueries/

a single css ﬁle is network
eﬃcient, but includes
unnecessary style data that
all devices end up downloading
a common approach
@media {
(min-width: 320px)
styles.css
one style sheet with media
queries on the inside
@media {
(min-width: 480px)
}
@media {
(min-width: 640px)
}
@media {
(min-width: 768px)
}

MAJOR
BREAKPOINTS
IN DOCUMENT
HEAD mobile.css
@media {
(min-width: 640px)
}
desktop.cssbasic.css
typically)
no media
queries
@media {
(min-width: 480px)
}
@media {
(min-width: 1024px)
}
MINOR
BREAKPOINTS
WITHIN EACH
STYLE SHEET
a more robust option
multiple style sheets with
media queries on the inside

@media
screen
and
(min-‐width:1024px)
{

section
ul
li
{

width:20%;

}
}
<link
rel="stylesheet"
type="text/css"
href="stylesheets/base.css"
media="screen,handheld"
/>
<link
rel="stylesheet"
type="text/css"
href="stylesheets/desktop.css"
media="only
screen
and
(min-‐width:720px)"
/>
<link
rel="stylesheet"
type="text/css"
href="stylesheets/mobile.css"
media="only
screen
and
(min-‐width:320px)"
/>
MAJOR BREAKPOINTS IN DOCUMENT HEAD
MINOR BREAKPOINTSWITHIN EACH STYLE SHEET

(which will aﬀect performance)
don’t multiple style sheets
cause multiple http requests?

min 320 px wide
and/or unable to
understand
further
instructions
Major Breakpoint 1
(media query in document head) Major Breakpoint 3
320 px to 720 px wide 720 px to 1024 px
Example
Major Breakpoint 2
(media query in document head)
720
(P) = Portrait
(L) = Landscape
(L*) = Landscape w/ native viewport adaptation
some tablets
most NetBooks
many DesktopsiPhone (P)
many Android (P)
many BlackBerry
S60 QWERTY
Most S60 (L)
320
major breakpoints
major layout changes
nothing is
here...but
that’s ok!
(media query in document head)
1024

responsive content
create responsive text, media, data table and navigation
technique

146
responsive images
suitable for any screen

HTML
CSS
<div
class="figure">
<p>
<img
src="robot.jpg"
alt=""
/>

<b
class="figcaption">Lo,
the
robot
walks</b>
</p>
</div>
.figure{
float:
right;
margin-‐bottom:
0.5em;
margin-‐left:
2.53164557%;

/*
12px
/
474px
*/
width:
48.7341772%;

/*
231px
/
474px
*/
}
img{
max-‐width:
100%;
}
img,
embed,
object,
video{
width:
100%;
height:
auto;
}

HTML
JAVASCRIPT
<picture
width="500"
height="500">

<source
media="(min-‐width:
45em)"
srcset="l1.jpg
1x,
l2.jpg
2x">

<source
media="(min-‐width:
18em)"
srcset="m1.jpg
1x,
m2.jpg
2x">

<source
srcset="s1.jpg
1x,
s2.jpg
2x">

<img
src="s1.jpg"
alt="">

<p>Accessible
Text</p>
</picture>
<script
src=="picturefill.js"></script>

151
62.5% rule
• modern browsers have a 16px font default size
• body {font-size: 62.5%;} --> 16 x 62.5 = 10px
• p {font-size: 1.3em;}
• top and line-height should be em’s
• avoid nested em deﬁnitions
em2px

153
data ﬁt into each screen
responsive data table

navigation suitable for each screen
responsive navigation
horizontal menu for
desktop screen
drop down list menu for
mobile device

where...?

158
references

158
references
Ethan Marcotte
Author of Responsive Web Design
Brains behind the Boston Globe redesign
unstoppablerobotninja.com
Tuts+
Great web design tutorials and articles
webdesign.tutsplus.com

158
references
Treehouse
Web Design and Development Learning Site
teamtreehouse.com
This Is Responsive
Patterns, resources and news
bradfrost.github.com/this-is-responsive
Ethan Marcotte
Author of Responsive Web Design
Brains behind the Boston Globe redesign
unstoppablerobotninja.com
Tuts+
Great web design tutorials and articles
webdesign.tutsplus.com

frameworks

frameworks
Simple, ﬂuid HTML/CSS/JS framework
from Twitter
Bootstrap
Flexible 6 and 12-grid framework.
Foundation

frameworks
Simple, ﬂuid HTML/CSS/JS framework
from Twitter
Bootstrap
Flexible 6 and 12-grid framework.
Foundation
Fixed width for medium & large screens,
ﬂuid single column for small
goldilocksapproach.com
Minimal responsive framework.
Includes Wordpress theme.
Skeleton

...and plenty more

thank youlamvt@fpt.com.vn
please
say
@yiibu
the font used
is
many thanks
to
http://www.ﬂickr.com/photos/tinou/453593446
http://www.exljbris.com/museo.html
http://www.ﬂickr.com/creativecommons/by-2.0
Museo
flickr
http://.yiibu.com
xin
chào

Responsive Web Design

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

Similar to Responsive Web Design

Similar to Responsive Web Design (20)

Recently uploaded

Recently uploaded (20)

Responsive Web Design