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

Zeldman pic by Tony Quartarolo

Mobile Web philosophy

Three methodologies

1. Special mobile site2. Do nothing at all3. Optimise for mobile

1. Special mobile site2. Do nothing at all3. Optimise for mobile

refactored for small screen,

not dumbed down for mobile

offer users choice:desktop or mobile?

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

1. Special mobile site2. Do nothing at all3. Optimise for mobile

not WAP or text anymore...

1. Special mobile site2. Do nothing at all3. Optimise for mobile

CSS 2 Media Types

Media types

all brailleembossed handheldprint projectionscreen speechtty tv

CSS 3 Media Queries“...the new hotness” Jeffrey Zeldman

http://www.zeldman.com/2010/04/08/best-aea-yet/

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/

Media features

width colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio

CSS 3 Media Queries

<link rel="stylesheet" ... media="screen and (max-width:480px)" href="...">

@import url("...") screen and (max-width:480px);

@media screen and (max-width:480px) { // insert CSS rules here}

Multiple expressions – and keyword

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

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 }

Negative expressions – not keyword

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

Exclusive expressions – only keyword

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

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 }

http://mediaqueri.es

http://mediaqueri.es

http://mediaqueri.es

http://mediaqueri.es

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

unsolved mysteries…

mobile devices lie

viewport metasuggests an initial layout viewport

and zoom

physical vs virtual pixels

viewport meta

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=320, initial-scale=2.3,user-scalable=no">

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

<meta name="viewport" content="width=550">

If you're using Media Queries:

<meta name="viewport" content="width=device-width">

If you have an explicit width:

<meta name="viewport" content="width=550">

Viewport properties

width initial-scaleheight minimum-scaleuser-scalable maximum-scale

high-dpi devices lie twice

<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi">

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

Viewport properties

width / min-width / max-width user-zoom

height / min-height / max-height orientation

zoom / min-zoom / max-zoom resolution

<meta name="viewport" content="width=550">

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

<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">

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

/* selective viewport via CSS */

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

<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@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; }}

<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@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; }}

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

The future

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/

lowsrc

<img src=hires.jpg lowsrc=lores.jpg alt="blah">

Both images are download; never in spec

Apple way

<img src=lores.jpg data-src=hires.jpg alt="blah">

Both images are download; requires JS for hires image

adaptive-images.com

Add .htaccess and adaptive-images.php to your document-root folder.

Add one line of JavaScript into the <head> of your site.

Add your CSS Media Query values into $resolutions in the PHP file.

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

.. extrapolate to HTML?

<img src=foo-lowres.png set="foo-lowres.png 1x, foo-highres.png 2x" alt="blah">

"I'll post something to the whatwg thread referencing this proposal."

video and Responsive Web Design

<video><source … media="(min-width:1000px)"><source … media="(max-width:1000px)">

</video>

Adaptive Image Element

<picture><source … media="(min-width:1000px)"><source … media="(max-width:1000px)">

</picture>

www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/

http://www.w3.org/community/respimg/

<picture alt=… ><source … media="(min-width:1000px)"><source … media="(max-width:1000px)">

<img src=… alt=…></picture>

“not a magic bullet...”

Good or evil?

Florian Rivoal

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!)

@media screen and (script) {...}

@media screen and not (script) {…}

http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html

@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}

@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}

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

@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."

“embrace the fluidity,don't fight it”

http://futurefriend.ly

brucel@opera.comopera.com/developer

www.brucelawson.co.uk@brucel