Adapt and respond - mobile-friendly layouts beyond the desktop - standards>next / Manchester / 3 March 2012
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,087 views

 

Statistics

Views

Total Views
4,087
Views on SlideShare
4,019
Embed Views
68

Actions

Likes
8
Downloads
106
Comments
0

4 Embeds 68

http://dws-table.bhptemp.intermesh.net 62
http://lanyrd.com 3
http://gladmin.imart.intermesh.net 2
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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
  • http://mediaqueri.es
  • http://mediaqueri.es
  • 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.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
  • <meta name="viewport"content="width=device-width">
  • high-dpi devices lie twice
  • <meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">
  • “interesting” iOS quirk
  • confused?a practical example…
  • <meta name="viewport" content="width=550">
  • <meta name="viewport" content="width=550">
  • <meta name="viewport" content="width=550">
  • <meta name="viewport"content="width=550,maximum-scale=1.0">
  • <meta name="viewport"content="width=550,maximum-scale=1.0, target-densitydpi=device-dpi">
  • 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
  • <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;}
  • more unsolved mysteries
  • Responsive Web Design™fluid grid + fluid images + media queries
  • /* fluid image based on parent container */img { max-width:100%; }
  • Responsive Web Design™fluid grid + fluid images + media queries
  • 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