Adaptive layouts - standards>next Manchester 23.03.2011

Adaptive layoutsMAKING YOUR SITE CROSS-DEVICE FRIENDLYPatrick H. Lauke / standards>next / Manchester / 23 March 2011

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

dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/

CSS 2 Media Types

Media typesall 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 capabilitieshttp://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

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 propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale

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

Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom

high-dpi devices ...is where my brain starts to meltdev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport developer.android.com/reference/android/webkit/WebView.html

www.opera.com/developer patrick.lauke@opera.com

Adaptive layouts - standards>next Manchester 23.03.2011

by Patrick Lauke

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 5

Statistics

Adaptive layouts - standards>next Manchester 23.03.2011 Presentation Transcript

http://twitter.com	3
https://twitter.com	1
http://paper.li	1