Download - Responsive Web Design
![Page 1: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/1.jpg)
responsive
Web designhow to adapt websites to any browser or screen size?
presented by Vu Tran LamSaturday, March 9, 13
![Page 2: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/2.jpg)
2
when...?
Saturday, March 9, 13
![Page 3: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/3.jpg)
computer evaluation...
Saturday, March 9, 13
![Page 4: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/4.jpg)
the beginning of an answer through this man...
Saturday, March 9, 13
![Page 5: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/5.jpg)
...in 1980 Steve Jobs recounted the following story...
a few years before the Macintosh…
Saturday, March 9, 13
![Page 6: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/6.jpg)
released 1984
...and that’s exactly what we’re doing here“Saturday, March 9, 13
![Page 7: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/7.jpg)
the computer was just the beginning...
Saturday, March 9, 13
![Page 8: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/8.jpg)
8
Steve timeline...
Saturday, March 9, 13
![Page 9: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/9.jpg)
Steve timeline...
Saturday, March 9, 13
![Page 10: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/10.jpg)
10
Steve timeline...
Saturday, March 9, 13
![Page 11: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/11.jpg)
Steve timeline...Steve timeline...
Saturday, March 9, 13
![Page 12: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/12.jpg)
to be continue...
Saturday, March 9, 13
![Page 13: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/13.jpg)
2007
the iPhoneoriginal
era begins...the smartphone
Saturday, March 9, 13
![Page 14: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/14.jpg)
brings touch, gestures
iPhone 3Gweb
touch
and the real web...
iPhone
2007 2008
Saturday, March 9, 13
![Page 15: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/15.jpg)
20082007 2009
3GiPhoneiPhone 3GS
native apps and
android apps
the rise of Android...
Saturday, March 9, 13
![Page 16: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/16.jpg)
iPhone
2007
iPhone 4
2010
3GS
whither feature phones,
htcg-five
samsung
and the further rise of Android...
2008
web os
3G
2009
Saturday, March 9, 13
![Page 17: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/17.jpg)
2008 2009
3G
2010
3GS
2011
4
blackberry kindle nook
devices go mainstream
iPhone 5...
with great expectations...
samsungmotorola
htcLG
Saturday, March 9, 13
![Page 18: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/18.jpg)
opportunity
the bleeding edge...
'ish via China+
Saturday, March 9, 13
![Page 19: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/19.jpg)
welcome to the future
Saturday, March 9, 13
![Page 20: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/20.jpg)
http://www.flickr.com/photos/_dchris/4652995362
today’s digital
and connected things
may feel incredibly diverse...
Saturday, March 9, 13
![Page 21: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/21.jpg)
large stationary
Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).
public short use
(sweaty) touch
Saturday, March 9, 13
![Page 22: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/22.jpg)
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
![Page 23: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/23.jpg)
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
![Page 24: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/24.jpg)
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
![Page 25: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/25.jpg)
Shipping spring 2012 in EuropeLG’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
![Page 26: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/26.jpg)
+
+=
+connectivity
software
oldthing(or media,
or tool)
thingsmart
old thing(just a bit smarter)
user interface
Saturday, March 9, 13
![Page 27: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/27.jpg)
what...?
Saturday, March 9, 13
![Page 28: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/28.jpg)
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
![Page 29: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/29.jpg)
responsive websites
respond
to their environment
Saturday, March 9, 13
![Page 30: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/30.jpg)
30
small + medium + large
Saturday, March 9, 13
![Page 31: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/31.jpg)
31
one site for every screen
Saturday, March 9, 13
![Page 32: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/32.jpg)
why...?
Saturday, March 9, 13
![Page 33: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/33.jpg)
the web is less than
9000 days old
http://wwwflickr.com/photos/psd/3149878971
Saturday, March 9, 13
![Page 34: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/34.jpg)
1/3
2012 estimates put the population at about 7 billion inhabitants...
Internet
ofpeople
onplanet
using
Saturday, March 9, 13
![Page 35: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/35.jpg)
1/3 people has a smartphone
of
Saturday, March 9, 13
![Page 36: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/36.jpg)
Source: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/wonderdawg777/662293238
76% use mobile while waitingin queues or for appointments
Saturday, March 9, 13
![Page 37: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/37.jpg)
37
how many... in Q4/2012?
22.9M
47.8M
Saturday, March 9, 13
![Page 38: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/38.jpg)
Saturday, March 9, 13
![Page 39: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/39.jpg)
yesterday
“go to the computer”to use the web/Internet
Saturday, March 9, 13
![Page 40: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/40.jpg)
yesterday
“go to the computer”to use the web/Internet
today
“use mobile” to use the web/Internet
Saturday, March 9, 13
![Page 41: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/41.jpg)
Inte
rnet
Use
rs (M
M) E
stim
ated
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
![Page 42: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/42.jpg)
1984 1990 1994 1998 2004 2007
display size/width
512 x 342
in the beginningwe had computers...
Saturday, March 9, 13
![Page 43: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/43.jpg)
1984 1990 1994 1998 2004 2007
640
800 1024 x 768 512 x 342
1024
512
we came to expectmore and more every year...
display size/width
Saturday, March 9, 13
![Page 44: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/44.jpg)
240
320 x 480
1984 1990 1994 1998 2004 2007
640
800 1024 x 768 512 x 342
1024
512
..one day in 2007less became much more
display size/width
Saturday, March 9, 13
![Page 45: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/45.jpg)
768 x 1024
240
320 x 480
1984 1990 1994 1998 2004 2007
640
800 1024 x 768 512 x 342
1024
512480 x 800
today we seem to have
a lot less more...
display size/width
Saturday, March 9, 13
![Page 46: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/46.jpg)
1990 1994 1998 2004 2007 2011 2015
640800
1280
1024 x 768
240
1440600 x 1024
768 x 1024
with a lot more lesson the horizon...
public displays
1920 x 10801920
1024 320 x 480480 x 800 360 x 640
display size/width
Saturday, March 9, 13
![Page 47: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/47.jpg)
how to adapt websites to these varied screens...?
Saturday, March 9, 13
![Page 48: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/48.jpg)
you could not build all websites
http://www.flickr.com/photos/handwrite/3460075040
UNDESIRABLE
suitable for every devices...
Saturday, March 9, 13
![Page 49: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/49.jpg)
many sites for all devices
Saturday, March 9, 13
![Page 50: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/50.jpg)
many sites for all devices
mobile website
Saturday, March 9, 13
![Page 51: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/51.jpg)
http://www.flickr.com/photos/farleyj/2768941171
responsive web design
Saturday, March 9, 13
![Page 52: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/52.jpg)
50
how...?
Saturday, March 9, 13
![Page 53: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/53.jpg)
http://www.flickr.com/photos/clairity/1449248189
...we still can't seethe forest for the trees...
Saturday, March 9, 13
![Page 54: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/54.jpg)
http://www.flickr.com/photos/dnorman/3590132503
as rubbish with no value...we treat our content
our assets
Saturday, March 9, 13
![Page 55: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/55.jpg)
http://www.flickr.com/photos/pasteberlusconi/5352932503
what would happenif we designed content...
Saturday, March 9, 13
![Page 56: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/56.jpg)
http://www.flickr.com/photos/stephi2006/4428932249
to how we design software...?in a manner similar
Saturday, March 9, 13
![Page 57: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/57.jpg)
CONTENTSTRATEGY
SCREENS
VISUALDESIGN
USER RESEARCH
DEV
TEST
formal web design process
Saturday, March 9, 13
![Page 58: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/58.jpg)
...to adapt to many types of screen
Saturday, March 9, 13
![Page 59: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/59.jpg)
USERRESEARCH
CONTENTSTRATEGY
DESIGNIN TEXT
VISUALSTYLE
CONVERTTO HTML
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
SCREENS
responsive web design process
Saturday, March 9, 13
![Page 60: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/60.jpg)
USERRESEARCH
CONTENTSTRATEGY
DESIGNIN TEXT
VISUALSTYLES
CONVERTTO HTML
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
SCREENS
HTML STYLE GUIDE
RWDPROTOTYPE
responsive web design process
Saturday, March 9, 13
![Page 61: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/61.jpg)
59
ways...?
Saturday, March 9, 13
![Page 62: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/62.jpg)
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
![Page 63: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/63.jpg)
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
![Page 64: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/64.jpg)
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
![Page 65: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/65.jpg)
what they needensuring they get exactly
Saturday, March 9, 13
![Page 66: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/66.jpg)
http://www.flickr.com/photos/fpat/3692425154
how.. mobileaccess web on Internet?
Saturday, March 9, 13
![Page 67: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/67.jpg)
q
http://www.flickr.com/photos/sporst/3999795549
...let's first deal withwhat we mean by 'context'...
mobile
Saturday, March 9, 13
![Page 68: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/68.jpg)
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
![Page 69: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/69.jpg)
stuff you know and stuff youwish 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
![Page 70: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/70.jpg)
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
![Page 71: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/71.jpg)
http://www.flickr.com/photos/wscullin/3770015203
first load...
Saturday, March 9, 13
![Page 72: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/72.jpg)
fontsJavaScriptimagesvideo
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
![Page 73: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/73.jpg)
http://www.flickr.com/photos/wscullin/3770015203
$wurfl->getDevice($id);
PHP, Java, etc.
...or another dB!
Saturday, March 9, 13
![Page 74: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/74.jpg)
width: 320 px... use what you can...
create profile2
{width:{
screen:320 }}
a cookie
http://www.flickr.com/photos/wscullin/3770015203
PHP, Java, etc.
Saturday, March 9, 13
![Page 75: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/75.jpg)
fontsJavaScriptimagesvideo reduce images
http://www.flickr.com/photos/wscullin/3770015203
we could send smaller images...
include only those resourcessuitable for device context...
HTML
Flashstylesheets images
{width:{
screen:320 }}
Saturday, March 9, 13
![Page 76: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/76.jpg)
http://www.flickr.com/photos/wscullin/3770015203
be sure to compress them if you can...
{width:{
screen:320 }}
Saturday, March 9, 13
![Page 77: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/77.jpg)
http://www.flickr.com/photos/wscullin/3770015203
initial response
{width:{
screen:320 }}
Saturday, March 9, 13
![Page 78: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/78.jpg)
detectFeatures();3
JavaScript
http://www.flickr.com/photos/wscullin/3770015203
{width:{
screen:320 }}
Saturday, March 9, 13
![Page 79: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/79.jpg)
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
![Page 80: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/80.jpg)
sync profile5{
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 bothclient & server
http://www.flickr.com/photos/wscullin/3770015203
Saturday, March 9, 13
![Page 81: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/81.jpg)
fontsimagesimages
video
http://www.flickr.com/photos/wscullin/3770015203
https://github.com/bryanrieger/profile
now, send only what's required6
HTML
videoFlash
JavaScriptstylesheetsstylesheets
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
![Page 82: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/82.jpg)
Ogg
dpiisBrowserLamescreen size
HTML5
WebM
colour depth
javascriptstorage
doctypecanvas
json@font-face
H.264
WebGL
input methodsor profile
the device context is defined via
xhr
isTouch
media formats
features & constraints...
http://www.flickr.com/photos/wscullin/3770015203
isTablet
appcache
CSS
custom propertiesbased on your owntacit knowledge...
Saturday, March 9, 13
![Page 83: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/83.jpg)
81
Saturday, March 9, 13
![Page 84: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/84.jpg)
82
Saturday, March 9, 13
![Page 85: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/85.jpg)
83
Saturday, March 9, 13
![Page 86: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/86.jpg)
device profile
Flash embed
http://www.flickr.com/photos/dullhunk/4422952742
JavaScript
to usactually relevant...
but only those that arefeatures & constraints
HTML5
screen size
Saturday, March 9, 13
![Page 87: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/87.jpg)
http://www.flickr.com/photos/aturkus/4040454167
Saturday, March 9, 13
![Page 88: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/88.jpg)
this is rhetorical...
Saturday, March 9, 13
![Page 89: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/89.jpg)
87
Saturday, March 9, 13
![Page 90: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/90.jpg)
88
Saturday, March 9, 13
![Page 91: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/91.jpg)
89
Saturday, March 9, 13
![Page 92: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/92.jpg)
90
Saturday, March 9, 13
![Page 93: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/93.jpg)
91
Saturday, March 9, 13
![Page 94: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/94.jpg)
perhaps a bit ambitious?
...a bit late, no?
every stylesheet is not required
device detect early
typicallydesktop scripts aren't suitable for mobile
@font support varies
3 columns, really?
...what about scripts & stylesheetsthat aren't suitable?
Saturday, March 9, 13
![Page 95: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/95.jpg)
...too many HTTP requests
provide alternates?
unsupportedmedia formats...
...that's a lot of JavaScript!
requests...
...is Flash even supported?
does every device get the sameFlash – if they support Flash?
...ah, that is Flash!
the right version of
Saturday, March 9, 13
![Page 96: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/96.jpg)
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
![Page 97: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/97.jpg)
http://www.flickr.com/photos/digger_twit/1353837770
...a selection of content
filtering + transformation prototypes
Saturday, March 9, 13
![Page 98: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/98.jpg)
96
Saturday, March 9, 13
![Page 99: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/99.jpg)
begin with someexisting HTML content...
Saturday, March 9, 13
![Page 100: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/100.jpg)
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_ver1WURFL ID: nokia_n73_ver1_submozilla50
physical_screen_height: 49columns: 21dual_orientation: falsephysical_screen_width: 37rows: 6max_image_width: 229resolution_height: 320resolution_width: 240max_image_height: 260..
$wurfl->getDevice($id);
http://www.tera-wurfl.com/explore/
this is what we're after!
Saturday, March 9, 13
![Page 101: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/101.jpg)
resolution_width: 240
$html->find('img[src]');
device property
Saturday, March 9, 13
![Page 102: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/102.jpg)
resolution_width: 240
<img />
device property
<img />
<img />
Saturday, March 9, 13
![Page 103: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/103.jpg)
panda.jpg [email protected]
based on...
repeat process for each <img> found in document...
resolution_width: 240 device property
replace each image with a
more suitable alternate...
Saturday, March 9, 13
![Page 104: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/104.jpg)
...how many images are required?
other elements?
..what about slightly
"fuzzier" DOM elements?
...related elements?
[email protected] [email protected]
resolution_width: 240 device property
FAILpanda.jpg
Saturday, March 9, 13
![Page 105: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/105.jpg)
103
Saturday, March 9, 13
![Page 106: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/106.jpg)
...an interesting idea
{{mustache}} inspired...
Saturday, March 9, 13
![Page 107: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/107.jpg)
quickly got out of control...
yet revolting
*HACK*
PHP
{{mustache}} inspired...
slippery slope
toXSLT!
...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
![Page 108: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/108.jpg)
106
Saturday, March 9, 13
![Page 109: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/109.jpg)
...use XSLT – after all it was made to style content!?
WTF?
yup, that's "99Bottles of Beer"in XSLT...?
found massive inspirationfor XSLT here!
FAIL
...we honestly tried,
but we @$*#& XSLT!
Saturday, March 9, 13
![Page 110: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/110.jpg)
108
Saturday, March 9, 13
![Page 111: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/111.jpg)
http://www.flickr.com/photos/vauvau/3466024918
responsive design & one web
really bloody difficult...the mobile web is
Saturday, March 9, 13
![Page 112: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/112.jpg)
http://www.flickr.com/photos/seatbelt67/502255276
hmm...
Saturday, March 9, 13
![Page 113: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/113.jpg)
http://www.flickr.com/photos/colindunn/4479309983
content.app
content asapplications...
Saturday, March 9, 13
![Page 114: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/114.jpg)
Saturday, March 9, 13
![Page 115: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/115.jpg)
http://www.flickr.com/photos/aubergene/970367879
make it usableand meaningful...
Saturday, March 9, 13
![Page 116: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/116.jpg)
http://www.flickr.com/photos/aubergene/970367879
add structure toenable manipulation...
Saturday, March 9, 13
![Page 117: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/117.jpg)
115
Saturday, March 9, 13
![Page 118: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/118.jpg)
Saturday, March 9, 13
![Page 119: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/119.jpg)
Saturday, March 9, 13
![Page 120: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/120.jpg)
Saturday, March 9, 13
![Page 121: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/121.jpg)
119
Saturday, March 9, 13
![Page 122: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/122.jpg)
the CSS strategy
Saturday, March 9, 13
![Page 123: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/123.jpg)
fixed width layouts
Saturday, March 9, 13
![Page 124: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/124.jpg)
fixed width layouts
Saturday, March 9, 13
![Page 125: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/125.jpg)
fixed width layouts
Saturday, March 9, 13
![Page 126: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/126.jpg)
flexible grids layouts
Saturday, March 9, 13
![Page 127: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/127.jpg)
flexible grids layouts
Saturday, March 9, 13
![Page 128: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/128.jpg)
flexible grids layouts
Saturday, March 9, 13
![Page 129: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/129.jpg)
adaptive(multiple fixed width layouts)
or
responsive(multiple fluid grid layouts)
Saturday, March 9, 13
![Page 130: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/130.jpg)
• fixed width for large and medium• fluid width for small
solution
mixed approach
Saturday, March 9, 13
![Page 131: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/131.jpg)
12 column grids layout
Saturday, March 9, 13
![Page 132: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/132.jpg)
Saturday, March 9, 13
![Page 133: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/133.jpg)
Saturday, March 9, 13
![Page 134: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/134.jpg)
Saturday, March 9, 13
![Page 135: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/135.jpg)
Saturday, March 9, 13
![Page 136: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/136.jpg)
target ÷ context = result940
100%
720
76.5957447%
220
23.40425535%
Saturday, March 9, 13
![Page 137: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/137.jpg)
/* 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
![Page 138: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/138.jpg)
design for (the simplest) mobile browser first.
note
mobile first
Saturday, March 9, 13
![Page 139: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/139.jpg)
fully flexible with defaultstyles for navigation,fonts, content andno media query
begin with a lightweight default
B
C
A
Saturday, March 9, 13
![Page 140: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/140.jpg)
embrace the cascade
don’t swap style sheets...let it cascade.
note
Saturday, March 9, 13
![Page 141: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/141.jpg)
demo
Saturday, March 9, 13
![Page 142: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/142.jpg)
each style sheet augments the others
augment once for another device
A BC
xx px to xxx px
breakpoint
A
BC
max xx px wide (or unable to
understand further instructions)
style sheet 1
breakpoint
Saturday, March 9, 13
![Page 143: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/143.jpg)
A BC
xx px to xxx px
B
min xxx px wide
A
BC
max xx px wide (or unable to
understand further instructions)
augmentonceagain forTVs etc.
breakpoint
each style sheet augments the others
breakpoint
style sheet 1
breakpoint
style sheet 2
C
A
Saturday, March 9, 13
![Page 144: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/144.jpg)
using breakpoints
create breakpoints using media queries for various screens
technique
http://www.w3.org/TR/css3-mediaqueries/
Saturday, March 9, 13
![Page 145: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/145.jpg)
a single css file is networkefficient, but includesunnecessary style data thatall devices end up downloading
a common approach
@media {(min-width: 320px)
styles.css
one style sheet with mediaqueries on the inside
@media {(min-width: 480px)
}
@media {(min-width: 640px)
}
@media {(min-width: 768px)
}
Saturday, March 9, 13
![Page 146: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/146.jpg)
MAJORBREAKPOINTSIN DOCUMENTHEAD mobile.css
@media {(min-width: 640px) }
desktop.css basic.css
typically) no media queries
@media {(min-width: 480px)
}
@media {(min-width: 1024px)
}
MINORBREAKPOINTSWITHIN EACHSTYLE SHEET
a more robust optionmultiple style sheets withmedia queries on the inside
Saturday, March 9, 13
![Page 147: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/147.jpg)
@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
![Page 148: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/148.jpg)
(which will affect performance)
don’t multiple style sheets
cause multiple http requests?
Saturday, March 9, 13
![Page 149: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/149.jpg)
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 tabletsmost NetBooksmany DesktopsiPhone (P)
many Android (P)many BlackBerryS60 QWERTYMost S60 (L)
320
major breakpointsmajor layout changes
nothing ishere...butthat’s ok!
(media query in document head)
1024
Saturday, March 9, 13
![Page 150: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/150.jpg)
demo
Saturday, March 9, 13
![Page 151: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/151.jpg)
responsive content
create responsive text, media, data table and navigation
technique
Saturday, March 9, 13
![Page 152: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/152.jpg)
146
responsive imagessuitable for any screen
Saturday, March 9, 13
![Page 153: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/153.jpg)
Saturday, March 9, 13
![Page 154: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/154.jpg)
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
![Page 155: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/155.jpg)
149
Saturday, March 9, 13
![Page 156: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/156.jpg)
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
![Page 157: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/157.jpg)
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
![Page 158: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/158.jpg)
demo
Saturday, March 9, 13
![Page 159: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/159.jpg)
153
data fit into each screenresponsive data table
Saturday, March 9, 13
![Page 160: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/160.jpg)
demo
Saturday, March 9, 13
![Page 161: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/161.jpg)
navigation suitable for each screen
responsive navigation
horizontal menu for desktop screen
drop down list menu for mobile device
Saturday, March 9, 13
![Page 162: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/162.jpg)
demo
Saturday, March 9, 13
![Page 163: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/163.jpg)
where...?Saturday, March 9, 13
![Page 164: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/164.jpg)
158
references
Saturday, March 9, 13
![Page 165: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/165.jpg)
158
references
Ethan MarcotteAuthor of Responsive Web Design
Brains behind the Boston Globe redesignunstoppablerobotninja.com
Tuts+Great web design tutorials and articles
webdesign.tutsplus.com
Saturday, March 9, 13
![Page 166: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/166.jpg)
158
references
TreehouseWeb Design and Development Learning Site
teamtreehouse.com
This Is ResponsivePatterns, resources and news
bradfrost.github.com/this-is-responsive
Ethan MarcotteAuthor of Responsive Web Design
Brains behind the Boston Globe redesignunstoppablerobotninja.com
Tuts+Great web design tutorials and articles
webdesign.tutsplus.com
Saturday, March 9, 13
![Page 167: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/167.jpg)
frameworks
Saturday, March 9, 13
![Page 168: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/168.jpg)
frameworks
Simple, fluid HTML/CSS/JS framework from Twitter
Bootstrap
Flexible 6 and 12-grid framework.Foundation
Saturday, March 9, 13
![Page 169: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/169.jpg)
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
![Page 170: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/170.jpg)
...and plenty more
Saturday, March 9, 13
![Page 171: Responsive Web Design](https://reader038.vdocument.in/reader038/viewer/2022110115/54c7e14e4a7959ba778b45a5/html5/thumbnails/171.jpg)
thank [email protected]
pleasesay
@yiibu
the font usedis
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