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

(Artist's Impression)

Slide 4

Slide 4 text

Mobile Web philosophy

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

No content

Slide 13

Slide 13 text

Three methodologies

Slide 14

Slide 14 text

1. Special mobile site 2. Do nothing at all 3. Optimise for mobile

Slide 15

Slide 15 text

1. Special mobile site 2. Do nothing at all 3. Optimise for mobile

Slide 16

Slide 16 text

photo: http://www.useit.com/jakob/photos/jakob_likes_it-big.jpg

Slide 17

Slide 17 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 18

Slide 18 text

refactored for small screen, not dumbed down for mobile

Slide 19

Slide 19 text

offer users choice: desktop or mobile?

Slide 20

Slide 20 text

beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/

Slide 21

Slide 21 text

1. Special mobile site 2. Do nothing at all 3. Optimise for mobile

Slide 22

Slide 22 text

not WAP or text anymore...

Slide 23

Slide 23 text

1. Special mobile site 2. Do nothing at all 3. Optimise for mobile

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

CSS 3 Media Queries

Slide 26

Slide 26 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 27

Slide 27 text

Media features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio

Slide 28

Slide 28 text

CSS 3 Media Queries @import url("...") screen and (max-width:480px); @media screen and (max-width:480px) { // insert CSS rules here }

Slide 29

Slide 29 text

Multiple expressions – and keyword @media screen and (min-width:180px) and (max- width:480px) { // screen device and width > 180px // and width < 480px }

Slide 30

Slide 30 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 31

Slide 31 text

Negative expressions – not keyword @media not screen and (min-width:800px) { // not applied to screen device // with width > 800px }

Slide 32

Slide 32 text

Exclusive expressions – only keyword @media only screen and (min-width:800px) { // only applied to screen device // with width > 800px }

Slide 33

Slide 33 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 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

http://mediaqueri.es

Slide 38

Slide 38 text

www.themaninblue.com/writing/perspective/2004/09/21

Slide 39

Slide 39 text

unsolved mysteries…

Slide 40

Slide 40 text

mobile devices lie

Slide 41

Slide 41 text

physical vs virtual pixels

Slide 42

Slide 42 text

viewport meta suggests an initial layout viewport and zoom

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Viewport properties width initial-scale height minimum-scale user-scalable maximum-scale

Slide 45

Slide 45 text

This is the viewport

Slide 46

Slide 46 text

Not just this, but it's almost always the width you want to control

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

no viewport defined in , so fallback to default of 980px, which is squeezed inside 320px.

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

viewport meta http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Slide 59

Slide 59 text

If you're using Media Queries: If you have an explicit width:

Slide 60

Slide 60 text

high-dpi devices lie twice

Slide 61

Slide 61 text

Slide 62

Slide 62 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 63

Slide 63 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 64

Slide 64 text

Viewport properties width / min-width / max-width user-zoom height / min-height / max-height orientation zoom / min-zoom / max-zoom resolution

Slide 65

Slide 65 text

@viewport { width: 550px; }

Slide 66

Slide 66 text

@viewport { width: 550px; max-zoom: 1; resolution: device; }

Slide 67

Slide 67 text

/* selective viewport via CSS */ @media … { @-o-viewport { … /* for propellerheads */ } }

Slide 68

Slide 68 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 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 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 73

Slide 73 text

@-o-viewport { /* minimum of 550px viewport width */ width: 550px auto; max-zoom: auto; }

Slide 74

Slide 74 text

Testing viewport: Opera Mobile Emulator

Slide 75

Slide 75 text

The future

Slide 76

Slide 76 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 77

Slide 77 text

Not in older browsers

Slide 78

Slide 78 text

fixmystreet.com @media screen and (max-width: 480px) { body {display: table; caption-side: bottom;} Nav { float: none; display: table-caption; width:100%; } }

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

lowsrc blah Both images are download; never in spec

Slide 81

Slide 81 text

Apple way blah Both images are download; requires JS for hires image

Slide 82

Slide 82 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 83

Slide 83 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 84

Slide 84 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.

Slide 85

Slide 85 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 86

Slide 86 text

Good or evil?

Slide 87

Slide 87 text

Good or evil? Florian Rivoal

Slide 88

Slide 88 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 89

Slide 89 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 90

Slide 90 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 91

Slide 91 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 92

Slide 92 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 93

Slide 93 text

@media (remote) { // TV or set-top box? } @media (remote) and (hover) { // Wii? }

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 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 96

Slide 96 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 97

Slide 97 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 98

Slide 98 text

Slide 99

Slide 99 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 [email protected]. Use [css4-mediaqueries] in the subject line, and read lists.w3.org/Archives/Public/www- style/2012Mar/0691.html first."

Slide 100

Slide 100 text

“embrace the fluidity, don't fight it”

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

[email protected] opera.com/developer www.brucelawson.co.uk @brucel