Adaptive layouts

Patrick H. Lauke / standards>next / Manchester / 23 March 2011

MAKING YOUR SITE CROSS-DEVICE FRIENDLY

we need a site that works on iPhone

...works on iPhone...oh, and iPad

“remove iPhone from ass”Peter-Paul Koch, The iPhone obsession

www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html

make your site work on all (most) mobile devices

don't do browser sniffing

http://www.flickr.com/photos/timdorr/2096272747/

CSS 2 Media Types

Media types

all brailleembossed handheldprint projectionscreen speechtty tv

CSS 2.1 Media Types

<link rel="stylesheet" ... media="print" href="...">

@import url("...") print;

@media print { // insert CSS rules here}

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

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

CSS 3 Media Queries

● build and extend CSS 2.1 Media Types● more granular control of capabilities

http://www.w3.org/TR/css3-mediaqueries/

Media featureswidth 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}

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

Multiple media queries@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 }

www.alistapart.com/articles/responsive-web-design

http://mediaqueri.es

http://mediaqueri.es

http://mediaqueri.es

http://mediaqueri.es

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

viewport meta

physical vs virtual pixels

mobile devices lie“to lie is to state something with disregard to the truth with the intention

that people will accept the statement as truth” thanks wikipedia

viewport metasuggests sizing to mobile browser

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

<meta name="viewport" content="width=480, user-scalable=no">

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

Viewport properties

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

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

CSS Device Adaptation@viewport { width: device-width;}

@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}

dev.w3.org/csswg/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

high-dpi devices...is where my brain starts to melt

dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewportdeveloper.android.com/reference/android/webkit/WebView.html

www.opera.com/developerpatrick.lauke@opera.com