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

  • 3,985 views

 

Statistics

Views

Total Views
3,985
Views on SlideShare
3,917
Embed Views
68

Actions

Likes
8
Downloads
104
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