Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012

Adapt and respondMOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOPPatrick H. Lauke / standards.next / 3 March 2012

mobile webis increasingly important

we need a site that works on iPhone

oh, and on the iPad

“remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html

sites that work on (almost) all mobile devices

3 approaches

1. do nothing

moved beyond WAP or text

modern mobile browserscan handle the “real web”

“but the mobile context...”

“Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create twoseparate designs — typically with fewer features for mobile.” www.useit.com/alertbox/mobile-redesign.html

twitter.com/#!/stephenhay/status/23350345962889216

2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)

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

let the user decide: diet or full fat?

“refactored” for small displays, not dumbed down for mobile

3. single adaptive site

nothing new

The Sage “... accepts the ebb and flow of things, Nurtures them, but does not own them,” Tao Te Ching; 2 Abstraction www.alistapart.com/articles/dao

how to take “desktop” layout to “mobile”?

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● builds on CSS 2.1 Media Types concept● more granular control (not just screen, print...)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}

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 firstmedia 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

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

design approaches using media queries

easy-readers.net/books/adaptive-web-design

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

grid-based layouts

www.subtraction.com/2007/03/19/oh-yeeaahh

www.alistapart.com/articles/fluidgrids

Responsive Web Design™fluid grid + fluid images + media queries

bostonglobe.com

adaptive vs responsive?

“not a magic bullet...”

unsolved mysteries…

www.opera.com/developer/tools/mobile

mobile devices lie

physical vs virtual pixels

viewport metasuggests an initial layout viewport and zoom

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

high-dpi devices lie twice

“interesting” iOS quirk

confused?a practical example…

maximum-scale=1.0breaks zooming!

JavaScript approaches to selectively apply viewport meta...argh!

CSS Device Adaptation@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}www.w3.org/TR/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 resolution

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

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

more unsolved mysteries

/* fluid image based on parent container */img { max-width:100%; }

stephanierieger.com/the-trouble-with-android

www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints

“embrace the fluidity, dont fight it”

http://futurefriend.ly

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

Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012

by Patrick Lauke

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 53

Statistics

Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012 Presentation Transcript