Slide 1
Slide 1 text
RWD: The specs behind the sex
DEVICE-FRIENDLY LAYOUTS BEYOND THE DESKTOP
Slide 2
Slide 2 text
Zeldman pic by Tony Quartarolo
Slide 3
Slide 3 text
Mobile Web philosophy
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Three methodologies
Slide 13
Slide 13 text
1. Special mobile site
2. Do nothing at all
3. Optimise for mobile
Slide 14
Slide 14 text
1. Special mobile site
2. Do nothing at all
3. Optimise for mobile
Slide 15
Slide 15 text
photo: http://www.useit.com/jakob/photos/jakob_likes_it-big.jpg
Slide 16
Slide 16 text
Rule of thumbs
Like accessibility, retrofitting for RWD on a non-trivial site
(eg, different templates, data tables etc) is an order of
magnitude more expensive than building it RWD from
scratch.
Slide 17
Slide 17 text
refactored for small screen,
not dumbed down for mobile
Slide 18
Slide 18 text
offer users choice:
desktop or mobile?
Slide 19
Slide 19 text
beware browser sniffing
photo: http://www.flickr.com/photos/timdorr/2096272747/
Slide 20
Slide 20 text
1. Special mobile site
2. Do nothing at all
3. Optimise for mobile
Slide 21
Slide 21 text
not WAP or text anymore...
Slide 22
Slide 22 text
1. Special mobile site
2. Do nothing at all
3. Optimise for mobile
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
CSS 3 Media Queries
Slide 25
Slide 25 text
CSS 3 Media Queries
●
builds on CSS 2.1 Media Types concept
●
more granular control (not just screen, print...)
http://www.w3.org/TR/css3-mediaqueries/
Slide 26
Slide 26 text
Media features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
Slide 27
Slide 27 text
CSS 3 Media Queries
@import url("...") screen and (max-width:480px);
@media screen and (max-width:480px) {
// insert CSS rules here
}
Slide 28
Slide 28 text
Multiple expressions – and keyword
@media screen and (min-width:180px) and (max-
width:480px) {
// screen device and width > 180px
// and width < 480px
}
Slide 29
Slide 29 text
Multiple expressions – comma separated
@media screen and (min-width:800px),
print and (min-width:20em) {
// screen device with width > 800px
// or print device with width > 20em
}
Slide 30
Slide 30 text
Negative expressions – not keyword
@media not screen and (min-width:800px) {
// not applied to screen device
// with width > 800px
}
Slide 31
Slide 31 text
Exclusive expressions – only keyword
@media only screen and (min-width:800px) {
// only applied to screen device
// with width > 800px
}
Slide 32
Slide 32 text
Multiple media queries
/* “The absence of a media query is the first
media query” Bryan Rieger */
@media screen and (max-width:480px) {
// screen device and width < 480px
}
@media screen and (max-width:980px) {
// screen device and width < 980px
}
@media screen and (min-width:980px) {
// screen device and width > 980px
}
Slide 33
Slide 33 text
http://mediaqueri.es
Slide 34
Slide 34 text
http://mediaqueri.es
Slide 35
Slide 35 text
http://mediaqueri.es
Slide 36
Slide 36 text
http://mediaqueri.es
Slide 37
Slide 37 text
www.themaninblue.com/writing/perspective/2004/09/21
Slide 38
Slide 38 text
unsolved mysteries…
Slide 39
Slide 39 text
mobile devices lie
Slide 40
Slide 40 text
physical vs virtual pixels
Slide 41
Slide 41 text
viewport meta
suggests an initial layout viewport
and zoom
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Viewport properties
width initial-scale
height minimum-scale
user-scalable maximum-scale
Slide 44
Slide 44 text
This is the viewport
Slide 45
Slide 45 text
Not just this, but it's almost
always the width you want
to control
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
no viewport
defined in
,
so fallback to
default of 980px,
which is squeezed
inside 320px.
Slide 48
Slide 48 text
Slide 49
Slide 49 text
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Slide 52
Slide 52 text
Slide 53
Slide 53 text
Slide 54
Slide 54 text
viewport meta
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Slide 58
Slide 58 text
If you're using Media Queries:
If you have an explicit width:
Slide 59
Slide 59 text
high-dpi devices lie twice
Slide 60
Slide 60 text
Slide 61
Slide 61 text
Inception-like resources
people.opera.com/patrickl/experiments/viewport-meta-css/
(bit.ly/KldE8Z)
dev.opera.com/articles/view/an-introduction-to-meta-
viewport-and-viewport/
Slide 62
Slide 62 text
CSS Device Adaptation
@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
Opera Mobile, Opera Mini, Internet Explorer 10 with prefixes
www.w3.org/TR/css-device-adapt
dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
Slide 63
Slide 63 text
Viewport properties
width / min-width / max-width user-zoom
height / min-height / max-height orientation
zoom / min-zoom / max-zoom resolution
Slide 64
Slide 64 text
@viewport
{
width: 550px;
}
Slide 65
Slide 65 text
@viewport {
width: 550px;
max-zoom: 1;
resolution: device;
}
Slide 66
Slide 66 text
/* selective viewport via CSS */
@media … {
@-o-viewport {
… /* for propellerheads */
}
}
Slide 67
Slide 67 text
@media screen {
@-o-viewport {
/* undo meta viewport settings */
width: auto; max-zoom: auto;
}
}
@media screen and (max-device-width: 550px) {
@-o-viewport {
/* 550px viewport on small screen devices */
width: 550px;
}
}
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
@media screen {
@-o-viewport {
/* undo meta viewport settings */
width: auto; max-zoom: auto;
}
}
@media screen and (max-device-width: 550px) {
@-o-viewport {
/* 550px viewport on small screen devices */
width: 550px;
}
}
Slide 72
Slide 72 text
@-o-viewport {
/* minimum of 550px viewport width */
width: 550px auto; max-zoom: auto;
}
Slide 73
Slide 73 text
Testing viewport: Opera Mobile Emulator
Slide 74
Slide 74 text
The future
Slide 75
Slide 75 text
matchMedia
if (window.matchMedia("(min-width: 400px)").matches) {
/* the view port is at least 400 pixels wide */
} else {
/* the view port is less than 400 pixels wide */
}
For IE9+ and Opera, polyfill
github.com/paulirish/matchMedia.js/
Slide 76
Slide 76 text
Not in older browsers
Slide 77
Slide 77 text
fixmystreet.com
@media screen and (max-width: 480px) {
body {display: table;
caption-side: bottom;}
Nav { float: none;
display: table-caption;
width:100%; }
}
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
lowsrc
Both images are download; never in spec
Both images are download; never in spec
Slide 80
Slide 80 text
Apple way
Both images are download; requires JS for hires image
Both images are download; requires JS for hires image
Slide 81
Slide 81 text
adaptive-images.com
Add .htaccess and adaptive-images.php to your document-
root folder.
Add one line of JavaScript into the of your site.
Add your CSS Media Query values into $resolutions in the
PHP file.
Slide 82
Slide 82 text
Super WebKit-tastic CSS
selector {background: image-set (url(foo-lowres.png) 1x,
url(foo-highres.png) 2x) center;}
selector {background: image-set
(url(foo-lowres.png) 1x low-bandwidth,
url(foo-highres.png) 2x high-bandwidth);}
http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
Slide 83
Slide 83 text
.. extrapolate to HTML?
A comma-separated list of URLs each with one or more
descriptors giving the maximum viewport dimensions
and pixel density allowed to use the image.
A comma-separated list of URLs each with one or more
descriptors giving the maximum viewport dimensions
and pixel density allowed to use the image.
Slide 84
Slide 84 text
Media Query "hints"
From the available options, the user agent then picks the
most appropriate image.
If the viewport dimensions or pixel density changes, the
user agent can replace the image data with a new image
on the fly.
Slide 85
Slide 85 text
Good or evil?
Slide 86
Slide 86 text
Good or evil?
Florian Rivoal
Slide 87
Slide 87 text
Script media query
@media screen and (script) {...}
@media screen and not (script) {…}
http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html
Slide 88
Slide 88 text
hover media query
The ‘hover’ media feature is used to query whether primary
pointing system used on the output device can hover or not.
Slide 89
Slide 89 text
pointer media query
none
The input mechanism of the device does not include a
pointing device.
coarse
The input mechanism of the device includes a pointing
device of limited accuracy.
fine
The input mechanism of the device includes an accurate
pointing device.
Slide 90
Slide 90 text
@media (paged) and (interactive:0) {
// I am like a printer
}
@media (paged) and (interactive) {
// I'm a projector, or like a Kindle
}
@media (paged) and (interactive) and (touch)
{
// I'm like a touch-screen Kindle
}
Slide 91
Slide 91 text
@media (touch) and (max-width: 480) {
// looks like an smart phone
}
@media (touch) and (keyboard) and
(min-width:600) {
// looks like a touch-screen laptop
}
Slide 92
Slide 92 text
@media (remote) {
// TV or set-top box?
}
@media (remote) and (hover) {
// Wii?
}
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
Tangent about web on TV
"Searching, browsing, updating and buffering are not TV-
like. In fact an enormous number of people found that the
technology they had purchased wasn't what they expected
at all, that they were bringing the worst parts of using a
computer into the television environment."
www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspx
Slide 95
Slide 95 text
OMG watchin TV LOL #justsayin
Most consumers have up to five devices that do social
media better than a TV.
Consumer engagement with social media is inversely
proportional to the size of the screen used for it.
Slide 96
Slide 96 text
No shit, sherlock!
Teenagers were "horrified at the prospect
of displaying their social activities on the
family TV."
Image from www.buzzfeed.com/scott/holy-shit-halloween-costume
Slide 97
Slide 97 text
Slide 98
Slide 98 text
@media (network: v-slow) {..}
Florian: "It has been proposed. Most people agree that it
would be cool, nobody has a clue about how to spec it in a
way that is useful and implementable. If you find people
with a clue, encourage them to submit proposals to me or
to www-style@w3.org. Use [css4-mediaqueries] in the
subject line, and read lists.w3.org/Archives/Public/www-
style/2012Mar/0691.html first."
Slide 99
Slide 99 text
“embrace the fluidity,
don't fight it”
Slide 100
Slide 100 text
brucel@opera.com
opera.com/developer
www.brucelawson.co.uk
@brucel