responsive
Web design
how to adapt websites to any browser or screen size?
presented by Vu Tran Lam
Saturday, March 9, 13
2
when...?
Saturday, March 9, 13
computer evaluation...
Saturday, March 9, 13
the beginning of an	
  answer
through this man...
Saturday, March 9, 13
...in 1980 Steve Jobs recounted
the following story...
a few years before the Macintosh…
Saturday, March 9, 13
released 1984
...and that’s exactly what we’re doing here
“
Saturday, March 9, 13
the computer was just
the beginning...
Saturday, March 9, 13
8
Steve timeline...
Saturday, March 9, 13
Steve timeline...
Saturday, March 9, 13
10
Steve timeline...
Saturday, March 9, 13
Steve timeline...Steve timeline...
Saturday, March 9, 13
to be continue...
Saturday, March 9, 13
2007
the iPhone
original
era begins...
the smartphone
Saturday, March 9, 13
brings touch, gestures
iPhone 3G
web
touch
and the real web...
iPhone
2007 2008
Saturday, March 9, 13
20082007 2009
3GiPhone
iPhone 3GS
native apps and
android
apps
the rise of Android...
Saturday, March 9, 13
iPhone
2007
iPhone 4
2010
3GS
whither feature phones,
htc
g-five
samsung
and the further rise of Android...
2008
web os
3G
...
2008 2009
3G
2010
3GS
2011
4
blackberry
kindle
nook
devices go mainstream
iPhone 5...
with great expectations...
samsung
m...
opportunity
the bleeding edge...
'ish via China+
Saturday, March 9, 13
welcome to the future
Saturday, March 9, 13
http://www.flickr.com/photos/_dchris/4652995362
today’s digital
and connected things
may feel incredibly diverse...
Saturda...
large stationary
Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).
public short us...
stationarysocial
lean-back powerful (enough)remote (voice, gesture, app)
One of many Smart (internet enabled) TVs now ship...
The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser.
small touch, voice
fixed (but not stat...
Quantas A380 first class with 17” flat panel display.
(Tethered tablets will likely appear soon).
manipulation unknown
large...
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, an...
+
+
=
+
connectivity
software
old
thing
(or media,
or tool)
thing
smart
old thing
(just a bit smarter)
user interface
Satu...
what...?
Saturday, March 9, 13
Responsive Web Design (RWD) is an approach to web
design in which a site is created to provide an optimal
viewing experien...
responsive websites
respond
to their environment
Saturday, March 9, 13
30
small + medium + large
Saturday, March 9, 13
31
one site for every screen
Saturday, March 9, 13
why...?
Saturday, March 9, 13
the web is less than
9000 days old
http://wwwflickr.com/photos/psd/3149878971
Saturday, March 9, 13
1/3
2012 estimates put the population at about 7 billion inhabitants...
Internet
of
people
on
planet
using
Saturday, March...
1/3 people has
a smartphone
of
Saturday, March 9, 13
Source: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/wonderdawg777/662293238
76% use mobile w...
37
how many... in Q4/2012?
22.9M
47.8M
Saturday, March 9, 13
Saturday, March 9, 13
yesterday
“go to the computer”
to use the web/Internet
Saturday, March 9, 13
yesterday
“go to the computer”
to use the web/Internet
today
“use mobile”
to use the web/Internet
Saturday, March 9, 13
InternetUsers(MM)Estimated
1000
2007 2008 2009 2010 2011 2012 2013 2014 2015
Desktop users
Source: Morgan Stanley Associat...
1984 1990 1994 1998 2004 2007
display size/width
512 x 342
in the beginning
we had computers...
Saturday, March 9, 13
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 s...
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
d...
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 hav...
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 hori...
how to adapt websites to these
varied screens...?
Saturday, March 9, 13
you could not build all websites
http://www.flickr.com/photos/handwrite/3460075040
UNDESIRABLE
suitable for every devices.....
many sites for all devices
Saturday, March 9, 13
many sites for all devices
mobile website
Saturday, March 9, 13
http://www.flickr.com/photos/farleyj/2768941171
responsive web design
Saturday, March 9, 13
50
how...?
Saturday, March 9, 13
http://www.flickr.com/photos/clairity/1449248189
...we still can't see
the forest for the trees...
Saturday, March 9, 13
http://www.flickr.com/photos/dnorman/3590132503
as rubbish with no value...
we treat our content
our assets
Saturday, March...
http://www.flickr.com/photos/pasteberlusconi/5352932503
what would happen
if we designed content...
Saturday, March 9, 13
http://www.flickr.com/photos/stephi2006/4428932249
to how we design software...?
in a manner similar
Saturday, March 9, 13
CONTENT
STRATEGY
SCREENS
VISUAL
DESIGN
USER
RESEARCH
DEV
TEST
formal web design process
Saturday, March 9, 13
...to adapt to many types of screen
Saturday, March 9, 13
USER
RESEARCH
CONTENT
STRATEGY
DESIGN
IN TEXT
VISUAL
STYLE
CONVERT
TO HTML
VISUAL
DESIGN
PROTOTYPE
TEST
SKETCH
SCREENS
res...
USER
RESEARCH
CONTENT
STRATEGY
DESIGN
IN TEXT
VISUAL
STYLES
CONVERT
TO HTML
VISUAL
DESIGN
PROTOTYPE
TEST
SKETCH
SCREENS
HT...
59
ways...?
Saturday, March 9, 13
bún đậu mắm tôm
http://www.flickr.com/photos/_ppo/2393063853
a client makes a request
to a server...
Saturday, March 9, 13
bún bò
phở
trà đá
cà phê
cơm
many clients could make
belong to the context
nước cam
http://www.flickr.com/photos/_ppo/
2393...
45K, nước cam...
5K, trà đá...
the server tailors each request
to each client...
30K, bún...
50K, cơm...
http://www.flickr....
what they need
ensuring they get exactly
Saturday, March 9, 13
http://www.flickr.com/photos/fpat/3692425154
how.. mobile
access web on Internet?
Saturday, March 9, 13
q
http://www.flickr.com/photos/sporst/3999795549
...let's first deal with
what we mean by 'context'...
mobile
Saturday, Marc...
http://www.flickr.com/photos/izzyplante/4009893952
in all of these varied devices?
how do we make content meaningful
the he...
stuff you know
and stuff you
wish you didn't...
features constraints+
• screen size
• local storage
• touch
• canvas
• SVG
•...
http://www.flickr.com/photos/donkeyhotey/5527263186
the client
and the server
working together...
with both client & server...
http://www.flickr.com/photos/wscullin/3770015203
first load...
Saturday, March 9, 13
fontsJavaScript
images
video
initial request
1
Hmm, Huston - we have a problem...
HTML
stylesheets
Flash
no idea what we c...
http://www.flickr.com/photos/wscullin/3770015203
$wurfl->getDevice($id);
PHP, Java, etc.
...or another dB!
Saturday, March 9...
width: 320 px... use what you can...
create profile
2
{
width:{
screen:320
	
  	
  }
}
a cookie
http://www.flickr.com/photos...
fontsJavaScript
images
video reduce images
http://www.flickr.com/photos/wscullin/3770015203
we could send smaller images......
http://www.flickr.com/photos/wscullin/3770015203
be sure to compress them if
you can...
{
width:{
screen:320
	
  	
  }
}
Sa...
http://www.flickr.com/photos/wscullin/3770015203
initial response
{
width:{
screen:320
	
  	
  }
}
Saturday, March 9, 13
detectFeatures();
3
JavaScript
http://www.flickr.com/photos/wscullin/3770015203
{
width:{
screen:320
	
  	
  }
}
Saturday, ...
update profile
subsequent
request
4
...now with more chips!
http://www.flickr.com/photos/wscullin/3770015203
{
width:{
scree...
sync profile
5
{
width:{
screen:320,
	
  	
  	
  	
  	
  document:320
},
xhr:true,
canvas:true,
flash:false,
video:true,
fo...
fonts
imagesimages
video
http://www.flickr.com/photos/wscullin/3770015203
https://github.com/bryanrieger/profile
now, send o...
Ogg
dpi
isBrowserLamescreen size
HTML5
WebM
colour depth
javascript
storage
doctype
canvas
json
@font-face
H.264
WebGL
inp...
81
Saturday, March 9, 13
82
Saturday, March 9, 13
83
Saturday, March 9, 13
device profile
Flash embed
http://www.flickr.com/photos/dullhunk/4422952742
JavaScript
to us
actually relevant...
but only t...
http://www.flickr.com/photos/aturkus/4040454167
Saturday, March 9, 13
this is rhetorical...
Saturday, March 9, 13
87
Saturday, March 9, 13
88
Saturday, March 9, 13
89
Saturday, March 9, 13
90
Saturday, March 9, 13
91
Saturday, March 9, 13
perhaps a bit ambitious?
...a bit late, no?
every stylesheet is not required
device detect early
typically
desktop scripts...
...too many HTTP requests
provide alternates?
unsupported
media formats...
...that's a lot of
JavaScript!
requests...
...i...
http://www.w3.org/TR/html5/video.html
this only deals with codecs -
not context*...
...screen size?
...available bandwidth...
http://www.flickr.com/photos/digger_twit/1353837770
...a selection of content
filtering + transformation prototypes
Saturday...
96
Saturday, March 9, 13
begin with some
existing HTML content...
Saturday, March 9, 13
Raw user agent: Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 ...
Device identified as: Nokia N73
Actual Root Devic...
resolution_width: 240
$html->find('img[src]');
device property
Saturday, March 9, 13
resolution_width: 240
<img />
device property
<img />
<img />
Saturday, March 9, 13
panda.jpg panda@320.jpg
based on...
repeat process for each
<img> found in document...
panda@240.jpg
resolution_width: 240...
...how many images are required?
other elements?
..what about slightly
"fuzzier" DOM elements?
...related elements?
panda@...
103
Saturday, March 9, 13
...an interesting idea
{{mustache}} inspired...
Saturday, March 9, 13
quickly got out of control...
yet revolting
*HACK*
PHP
{{mustache}} inspired...
slippery slope
to
XSLT!
...apologies to @s...
106
Saturday, March 9, 13
...use XSLT – after
all it was made to
style content!?
WTF?
yup, that's "99
Bottles of Beer"
in XSLT...?
found massive ins...
108
Saturday, March 9, 13
http://www.flickr.com/photos/vauvau/3466024918
responsive design & one web
really bloody difficult...
the mobile web is
Satur...
http://www.flickr.com/photos/seatbelt67/502255276
hmm...
Saturday, March 9, 13
http://www.flickr.com/photos/colindunn/4479309983
content.app
content as
applications...
Saturday, March 9, 13
Saturday, March 9, 13
http://www.flickr.com/photos/aubergene/970367879
make it usable
and meaningful...
Saturday, March 9, 13
http://www.flickr.com/photos/aubergene/970367879
add structure to
enable manipulation...
Saturday, March 9, 13
115
Saturday, March 9, 13
Saturday, March 9, 13
Saturday, March 9, 13
Saturday, March 9, 13
119
Saturday, March 9, 13
the CSS strategy
Saturday, March 9, 13
fixed width layouts
Saturday, March 9, 13
fixed width layouts
Saturday, March 9, 13
fixed width layouts
Saturday, March 9, 13
flexible grids layouts
Saturday, March 9, 13
flexible grids layouts
Saturday, March 9, 13
flexible grids layouts
Saturday, March 9, 13
adaptive
(multiple fixed width layouts)
or
responsive
(multiple fluid grid layouts)
Saturday, March 9, 13
• fixed width for large and medium
• fluid width for small
solution
mixed approach
Saturday, March 9, 13
12 column grids layout
Saturday, March 9, 13
Saturday, March 9, 13
Saturday, March 9, 13
Saturday, March 9, 13
Saturday, March 9, 13
target ÷ context = result
940
100%
720
76.5957447%
220
23.40425535%
Saturday, March 9, 13
/*	
  
	
  	
  	
  	
  layout:	
  two	
  columns
	
  	
  	
  	
  description:	
  responsive
	
  	
  	
  	
  940	
  =	
  72...
design for (the simplest) mobile browser first.
note
mobile first
Saturday, March 9, 13
fully flexible 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
Saturday, March 9, 13
demo
Saturday, March 9, 13
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...
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
a...
using breakpoints
create breakpoints using media queries for various screens
technique
http://www.w3.org/TR/css3-mediaquer...
a single css file is network
efficient, but includes
unnecessary style data that
all devices end up downloading
a common appr...
MAJOR
BREAKPOINTS
IN DOCUMENT
HEAD mobile.css
@media {
(min-width: 640px)
}
desktop.cssbasic.css
typically)
no media
queri...
@media	
  screen	
  and	
  (min-­‐width:1024px)	
  {
	
   section	
  ul	
  li	
  {
	
   	
   width:20%;
	
   }
}
<link	
  ...
(which will affect performance)
don’t multiple style sheets
cause multiple http requests?
Saturday, March 9, 13
min 320 px wide
and/or unable to
understand
further
instructions
Major Breakpoint 1
(media query in document head) Major B...
demo
Saturday, March 9, 13
responsive content
create responsive text, media, data table and navigation
technique
Saturday, March 9, 13
146
responsive images
suitable for any screen
Saturday, March 9, 13
Saturday, March 9, 13
HTML
CSS
<div	
  class="figure">
<p>
<img	
  src="robot.jpg"	
  alt=""	
  />	
  
<b	
  class="figcaption">Lo,	
  the	
  ro...
149
Saturday, March 9, 13
HTML
JAVASCRIPT
<picture	
  width="500"	
  height="500">
	
  	
  	
  <source	
  media="(min-­‐width:	
  45em)"	
  srcset="...
151
62.5% rule
• modern browsers have a 16px font default size
• body {font-size: 62.5%;} --> 16 x 62.5 = 10px
• p {font-s...
demo
Saturday, March 9, 13
153
data fit into each screen
responsive data table
Saturday, March 9, 13
demo
Saturday, March 9, 13
navigation suitable for each screen
responsive navigation
horizontal menu for
desktop screen
drop down list menu for
mobil...
demo
Saturday, March 9, 13
where...?
Saturday, March 9, 13
158
references
Saturday, March 9, 13
158
references
Ethan Marcotte
Author of Responsive Web Design
Brains behind the Boston Globe redesign
unstoppablerobotninj...
158
references
Treehouse
Web Design and Development Learning Site
teamtreehouse.com
This Is Responsive
Patterns, resources...
frameworks
Saturday, March 9, 13
frameworks
Simple, fluid HTML/CSS/JS framework
from Twitter
Bootstrap
Flexible 6 and 12-grid framework.
Foundation
Saturday...
frameworks
Simple, fluid HTML/CSS/JS framework
from Twitter
Bootstrap
Flexible 6 and 12-grid framework.
Foundation
Fixed wi...
...and plenty more
Saturday, March 9, 13
thank youlamvt@fpt.com.vn
please
say
@yiibu
the font used
is
many thanks
to
http://www.flickr.com/photos/tinou/453593446
ht...
Upcoming SlideShare
Loading in...5
×

Responsive Web Design

1,199

Published on

Responsive Web Design

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,199
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
101
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. responsive Web design how to adapt websites to any browser or screen size? presented by Vu Tran Lam Saturday, March 9, 13
  2. 2. 2 when...? Saturday, March 9, 13
  3. 3. computer evaluation... Saturday, March 9, 13
  4. 4. the beginning of an  answer through this man... Saturday, March 9, 13
  5. 5. ...in 1980 Steve Jobs recounted the following story... a few years before the Macintosh… Saturday, March 9, 13
  6. 6. released 1984 ...and that’s exactly what we’re doing here “ Saturday, March 9, 13
  7. 7. the computer was just the beginning... Saturday, March 9, 13
  8. 8. 8 Steve timeline... Saturday, March 9, 13
  9. 9. Steve timeline... Saturday, March 9, 13
  10. 10. 10 Steve timeline... Saturday, March 9, 13
  11. 11. Steve timeline...Steve timeline... Saturday, March 9, 13
  12. 12. to be continue... Saturday, March 9, 13
  13. 13. 2007 the iPhone original era begins... the smartphone Saturday, March 9, 13
  14. 14. brings touch, gestures iPhone 3G web touch and the real web... iPhone 2007 2008 Saturday, March 9, 13
  15. 15. 20082007 2009 3GiPhone iPhone 3GS native apps and android apps the rise of Android... Saturday, March 9, 13
  16. 16. iPhone 2007 iPhone 4 2010 3GS whither feature phones, htc g-five samsung and the further rise of Android... 2008 web os 3G 2009 Saturday, March 9, 13
  17. 17. 2008 2009 3G 2010 3GS 2011 4 blackberry kindle nook devices go mainstream iPhone 5... with great expectations... samsung motorola htc LG Saturday, March 9, 13
  18. 18. opportunity the bleeding edge... 'ish via China+ Saturday, March 9, 13
  19. 19. welcome to the future Saturday, March 9, 13
  20. 20. http://www.flickr.com/photos/_dchris/4652995362 today’s digital and connected things may feel incredibly diverse... Saturday, March 9, 13
  21. 21. large stationary Internet enabled treadmill. Currently considered a luxury product (...give it 18 months). public short use (sweaty) touch Saturday, March 9, 13
  22. 22. 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 Saturday, March 9, 13
  23. 23. The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser. small touch, voice fixed (but not stationary) bandwidth constrained Saturday, March 9, 13
  24. 24. 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 Saturday, March 9, 13
  25. 25. 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 flexible small(-ish) many unknown unknowns Saturday, March 9, 13
  26. 26. + + = + connectivity software old thing (or media, or tool) thing smart old thing (just a bit smarter) user interface Saturday, March 9, 13
  27. 27. what...? Saturday, March 9, 13
  28. 28. 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) Saturday, March 9, 13
  29. 29. responsive websites respond to their environment Saturday, March 9, 13
  30. 30. 30 small + medium + large Saturday, March 9, 13
  31. 31. 31 one site for every screen Saturday, March 9, 13
  32. 32. why...? Saturday, March 9, 13
  33. 33. the web is less than 9000 days old http://wwwflickr.com/photos/psd/3149878971 Saturday, March 9, 13
  34. 34. 1/3 2012 estimates put the population at about 7 billion inhabitants... Internet of people on planet using Saturday, March 9, 13
  35. 35. 1/3 people has a smartphone of Saturday, March 9, 13
  36. 36. Source: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/wonderdawg777/662293238 76% use mobile while waiting in queues or for appointments Saturday, March 9, 13
  37. 37. 37 how many... in Q4/2012? 22.9M 47.8M Saturday, March 9, 13
  38. 38. Saturday, March 9, 13
  39. 39. yesterday “go to the computer” to use the web/Internet Saturday, March 9, 13
  40. 40. yesterday “go to the computer” to use the web/Internet today “use mobile” to use the web/Internet Saturday, March 9, 13
  41. 41. 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 Saturday, March 9, 13
  42. 42. 1984 1990 1994 1998 2004 2007 display size/width 512 x 342 in the beginning we had computers... Saturday, March 9, 13
  43. 43. 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 Saturday, March 9, 13
  44. 44. 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 Saturday, March 9, 13
  45. 45. 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 Saturday, March 9, 13
  46. 46. 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 Saturday, March 9, 13
  47. 47. how to adapt websites to these varied screens...? Saturday, March 9, 13
  48. 48. you could not build all websites http://www.flickr.com/photos/handwrite/3460075040 UNDESIRABLE suitable for every devices... Saturday, March 9, 13
  49. 49. many sites for all devices Saturday, March 9, 13
  50. 50. many sites for all devices mobile website Saturday, March 9, 13
  51. 51. http://www.flickr.com/photos/farleyj/2768941171 responsive web design Saturday, March 9, 13
  52. 52. 50 how...? Saturday, March 9, 13
  53. 53. http://www.flickr.com/photos/clairity/1449248189 ...we still can't see the forest for the trees... Saturday, March 9, 13
  54. 54. http://www.flickr.com/photos/dnorman/3590132503 as rubbish with no value... we treat our content our assets Saturday, March 9, 13
  55. 55. http://www.flickr.com/photos/pasteberlusconi/5352932503 what would happen if we designed content... Saturday, March 9, 13
  56. 56. http://www.flickr.com/photos/stephi2006/4428932249 to how we design software...? in a manner similar Saturday, March 9, 13
  57. 57. CONTENT STRATEGY SCREENS VISUAL DESIGN USER RESEARCH DEV TEST formal web design process Saturday, March 9, 13
  58. 58. ...to adapt to many types of screen Saturday, March 9, 13
  59. 59. USER RESEARCH CONTENT STRATEGY DESIGN IN TEXT VISUAL STYLE CONVERT TO HTML VISUAL DESIGN PROTOTYPE TEST SKETCH SCREENS responsive web design process Saturday, March 9, 13
  60. 60. 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 Saturday, March 9, 13
  61. 61. 59 ways...? Saturday, March 9, 13
  62. 62. bún đậu mắm tôm http://www.flickr.com/photos/_ppo/2393063853 a client makes a request to a server... Saturday, March 9, 13
  63. 63. bún bò phở trà đá cà phê cơm many clients could make belong to the context nước cam http://www.flickr.com/photos/_ppo/ 2393063853 varied requests... Saturday, March 9, 13
  64. 64. 45K, nước cam... 5K, trà đá... the server tailors each request to each client... 30K, bún... 50K, cơm... http://www.flickr.com/photos/_ppo/ 2393063853Saturday, March 9, 13
  65. 65. what they need ensuring they get exactly Saturday, March 9, 13
  66. 66. http://www.flickr.com/photos/fpat/3692425154 how.. mobile access web on Internet? Saturday, March 9, 13
  67. 67. q http://www.flickr.com/photos/sporst/3999795549 ...let's first deal with what we mean by 'context'... mobile Saturday, March 9, 13
  68. 68. http://www.flickr.com/photos/izzyplante/4009893952 in all of these varied devices? how do we make content meaningful the hell Saturday, March 9, 13
  69. 69. 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 Saturday, March 9, 13
  70. 70. http://www.flickr.com/photos/donkeyhotey/5527263186 the client and the server working together... with both client & server feature detection device database "first-run" Saturday, March 9, 13
  71. 71. http://www.flickr.com/photos/wscullin/3770015203 first load... Saturday, March 9, 13
  72. 72. fontsJavaScript images video initial request 1 Hmm, Huston - we have a problem... HTML stylesheets Flash no idea what we can deliver to this client... http://www.flickr.com/photos/wscullin/3770015203 Saturday, March 9, 13
  73. 73. http://www.flickr.com/photos/wscullin/3770015203 $wurfl->getDevice($id); PHP, Java, etc. ...or another dB! Saturday, March 9, 13
  74. 74. width: 320 px... use what you can... create profile 2 { width:{ screen:320    } } a cookie http://www.flickr.com/photos/wscullin/3770015203 PHP, Java, etc. Saturday, March 9, 13
  75. 75. fontsJavaScript images video reduce images http://www.flickr.com/photos/wscullin/3770015203 we could send smaller images... include only those resources suitable for device context... HTML Flash stylesheets images { width:{ screen:320    } } Saturday, March 9, 13
  76. 76. http://www.flickr.com/photos/wscullin/3770015203 be sure to compress them if you can... { width:{ screen:320    } } Saturday, March 9, 13
  77. 77. http://www.flickr.com/photos/wscullin/3770015203 initial response { width:{ screen:320    } } Saturday, March 9, 13
  78. 78. detectFeatures(); 3 JavaScript http://www.flickr.com/photos/wscullin/3770015203 { width:{ screen:320    } } Saturday, March 9, 13
  79. 79. update profile subsequent request 4 ...now with more chips! http://www.flickr.com/photos/wscullin/3770015203 { width:{ screen:320,          document:320 }, xhr:true, canvas:true, flash:false, video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true } Saturday, March 9, 13
  80. 80. sync profile 5 { width:{ screen:320,          document:320 }, xhr:true, canvas:true, flash:false, video:true, formats:{ h264:probably, ogg:false, webm:false }, offline:true } same profile on both client & server http://www.flickr.com/photos/wscullin/3770015203 Saturday, March 9, 13
  81. 81. fonts imagesimages video http://www.flickr.com/photos/wscullin/3770015203 https://github.com/bryanrieger/profile now, send only what's required 6 HTML video Flash JavaScript stylesheetsstylesheets HTML Javascript sample code* available *fyi the code currently uses a simple profile 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 } Saturday, March 9, 13
  82. 82. Ogg dpi isBrowserLamescreen size HTML5 WebM colour depth javascript storage doctype canvas json @font-face H.264 WebGL input methods or profile the device context is defined via xhr isTouch media formats features & constraints... http://www.flickr.com/photos/wscullin/3770015203 isTablet appcache CSS custom properties based on your own tacit knowledge... Saturday, March 9, 13
  83. 83. 81 Saturday, March 9, 13
  84. 84. 82 Saturday, March 9, 13
  85. 85. 83 Saturday, March 9, 13
  86. 86. device profile Flash embed http://www.flickr.com/photos/dullhunk/4422952742 JavaScript to us actually relevant... but only those that are features & constraints HTML5 screen size Saturday, March 9, 13
  87. 87. http://www.flickr.com/photos/aturkus/4040454167 Saturday, March 9, 13
  88. 88. this is rhetorical... Saturday, March 9, 13
  89. 89. 87 Saturday, March 9, 13
  90. 90. 88 Saturday, March 9, 13
  91. 91. 89 Saturday, March 9, 13
  92. 92. 90 Saturday, March 9, 13
  93. 93. 91 Saturday, March 9, 13
  94. 94. 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? Saturday, March 9, 13
  95. 95. ...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 Saturday, March 9, 13
  96. 96. 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 fsdfffSaturday, March 9, 13
  97. 97. http://www.flickr.com/photos/digger_twit/1353837770 ...a selection of content filtering + transformation prototypes Saturday, March 9, 13
  98. 98. 96 Saturday, March 9, 13
  99. 99. begin with some existing HTML content... Saturday, March 9, 13
  100. 100. 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! Saturday, March 9, 13
  101. 101. resolution_width: 240 $html->find('img[src]'); device property Saturday, March 9, 13
  102. 102. resolution_width: 240 <img /> device property <img /> <img /> Saturday, March 9, 13
  103. 103. 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... Saturday, March 9, 13
  104. 104. ...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 Saturday, March 9, 13
  105. 105. 103 Saturday, March 9, 13
  106. 106. ...an interesting idea {{mustache}} inspired... Saturday, March 9, 13
  107. 107. 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 Saturday, March 9, 13
  108. 108. 106 Saturday, March 9, 13
  109. 109. ...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! Saturday, March 9, 13
  110. 110. 108 Saturday, March 9, 13
  111. 111. http://www.flickr.com/photos/vauvau/3466024918 responsive design & one web really bloody difficult... the mobile web is Saturday, March 9, 13
  112. 112. http://www.flickr.com/photos/seatbelt67/502255276 hmm... Saturday, March 9, 13
  113. 113. http://www.flickr.com/photos/colindunn/4479309983 content.app content as applications... Saturday, March 9, 13
  114. 114. Saturday, March 9, 13
  115. 115. http://www.flickr.com/photos/aubergene/970367879 make it usable and meaningful... Saturday, March 9, 13
  116. 116. http://www.flickr.com/photos/aubergene/970367879 add structure to enable manipulation... Saturday, March 9, 13
  117. 117. 115 Saturday, March 9, 13
  118. 118. Saturday, March 9, 13
  119. 119. Saturday, March 9, 13
  120. 120. Saturday, March 9, 13
  121. 121. 119 Saturday, March 9, 13
  122. 122. the CSS strategy Saturday, March 9, 13
  123. 123. fixed width layouts Saturday, March 9, 13
  124. 124. fixed width layouts Saturday, March 9, 13
  125. 125. fixed width layouts Saturday, March 9, 13
  126. 126. flexible grids layouts Saturday, March 9, 13
  127. 127. flexible grids layouts Saturday, March 9, 13
  128. 128. flexible grids layouts Saturday, March 9, 13
  129. 129. adaptive (multiple fixed width layouts) or responsive (multiple fluid grid layouts) Saturday, March 9, 13
  130. 130. • fixed width for large and medium • fluid width for small solution mixed approach Saturday, March 9, 13
  131. 131. 12 column grids layout Saturday, March 9, 13
  132. 132. Saturday, March 9, 13
  133. 133. Saturday, March 9, 13
  134. 134. Saturday, March 9, 13
  135. 135. Saturday, March 9, 13
  136. 136. target ÷ context = result 940 100% 720 76.5957447% 220 23.40425535% Saturday, March 9, 13
  137. 137. /*          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  */ } Saturday, March 9, 13
  138. 138. design for (the simplest) mobile browser first. note mobile first Saturday, March 9, 13
  139. 139. fully flexible with default styles for navigation, fonts, content and no media query begin with a lightweight default B C A Saturday, March 9, 13
  140. 140. embrace the cascade don’t swap style sheets...let it cascade. note Saturday, March 9, 13
  141. 141. demo Saturday, March 9, 13
  142. 142. 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 Saturday, March 9, 13
  143. 143. 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 Saturday, March 9, 13
  144. 144. using breakpoints create breakpoints using media queries for various screens technique http://www.w3.org/TR/css3-mediaqueries/ Saturday, March 9, 13
  145. 145. a single css file is network efficient, 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) } Saturday, March 9, 13
  146. 146. 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 Saturday, March 9, 13
  147. 147. @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 Saturday, March 9, 13
  148. 148. (which will affect performance) don’t multiple style sheets cause multiple http requests? Saturday, March 9, 13
  149. 149. 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 Saturday, March 9, 13
  150. 150. demo Saturday, March 9, 13
  151. 151. responsive content create responsive text, media, data table and navigation technique Saturday, March 9, 13
  152. 152. 146 responsive images suitable for any screen Saturday, March 9, 13
  153. 153. Saturday, March 9, 13
  154. 154. 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; } Saturday, March 9, 13
  155. 155. 149 Saturday, March 9, 13
  156. 156. 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> Saturday, March 9, 13
  157. 157. 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 definitions em2px Saturday, March 9, 13
  158. 158. demo Saturday, March 9, 13
  159. 159. 153 data fit into each screen responsive data table Saturday, March 9, 13
  160. 160. demo Saturday, March 9, 13
  161. 161. navigation suitable for each screen responsive navigation horizontal menu for desktop screen drop down list menu for mobile device Saturday, March 9, 13
  162. 162. demo Saturday, March 9, 13
  163. 163. where...? Saturday, March 9, 13
  164. 164. 158 references Saturday, March 9, 13
  165. 165. 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 Saturday, March 9, 13
  166. 166. 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 Saturday, March 9, 13
  167. 167. frameworks Saturday, March 9, 13
  168. 168. frameworks Simple, fluid HTML/CSS/JS framework from Twitter Bootstrap Flexible 6 and 12-grid framework. Foundation Saturday, March 9, 13
  169. 169. frameworks Simple, fluid HTML/CSS/JS framework from Twitter Bootstrap Flexible 6 and 12-grid framework. Foundation Fixed width for medium & large screens, fluid single column for small goldilocksapproach.com Minimal responsive framework. Includes Wordpress theme. Skeleton Saturday, March 9, 13
  170. 170. ...and plenty more Saturday, March 9, 13
  171. 171. thank youlamvt@fpt.com.vn please say @yiibu the font used is many thanks to http://www.flickr.com/photos/tinou/453593446 http://www.exljbris.com/museo.html http://www.flickr.com/creativecommons/by-2.0 Museo flickr http://.yiibu.com xin chào Saturday, March 9, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×