Slide 1

Slide 1 text

The specs behind the sex MOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOP

Slide 2

Slide 2 text

Zeldman pic by Tony Quartarolo

Slide 3

Slide 3 text

No content

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

refactored for small screen, not dumbed down for mobile

Slide 17

Slide 17 text

offer users choice: desktop or mobile?

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

not WAP or text anymore...

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

CSS 2 Media Types

Slide 24

Slide 24 text

Media types all braille embossed handheld print projection screen speech tty tv

Slide 25

Slide 25 text

CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/

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

viewport meta suggests an initial layout viewport and zoom

Slide 42

Slide 42 text

physical vs virtual pixels

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

high-dpi devices lie twice

Slide 52

Slide 52 text

Slide 53

Slide 53 text

CSS Device Adaptation @viewport { width: 320px; zoom: 2.3; user-zoom: fixed; } www.w3.org/TR/css-device-adapt only works in Opera Mobile 11+ at the moment, with -o- prefix dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

@-o-viewport { width: 550px; }

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 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 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

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

Slide 63 text

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

Slide 64

Slide 64 text

The future

Slide 65

Slide 65 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 66

Slide 66 text

No content

Slide 67

Slide 67 text

lowsrc blah Both images are download; never in spec

Slide 68

Slide 68 text

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

Slide 69

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

Slide 70 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 71

Slide 71 text

.. extrapolate to HTML? blah "I'll post something to the whatwg thread referencing this proposal."

Slide 72

Slide 72 text

video and Responsive Web Design

Slide 73

Slide 73 text

Adaptive Image Element www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/ http://www.w3.org/community/respimg/

Slide 74

Slide 74 text

…

Slide 75

Slide 75 text

“not a magic bullet...”

Slide 76

Slide 76 text

Good or evil? Florian Rivoal

Slide 77

Slide 77 text

Note to people who weren't at the talk: following slides are strawman ideas for the next iteration of Media Queries (CSS 4) and are almost certainly to be completely different if they ever make it into the specification. (CSS 3 MQs became a "Proposed Recommendation", eg a "Standard" week of 23 April 2012, so very early days!)

Slide 78

Slide 78 text

@media screen and (script) {...} @media screen and not (script) {…} http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html

Slide 79

Slide 79 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 80

Slide 80 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 81

Slide 81 text

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

Slide 82

Slide 82 text

No content

Slide 83

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

Slide 84 text

“embrace the fluidity, don't fight it”

Slide 85

Slide 85 text

http://futurefriend.ly

Slide 86

Slide 86 text

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