• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Adaptive Layouts - standards>next London 28.05.2011
 

Adaptive Layouts - standards>next London 28.05.2011

on

  • 8,443 views

Random thoughts on making your site cross-device friendly

Random thoughts on making your site cross-device friendly
standards>next / London / 28 May 2011

Statistics

Views

Total Views
8,443
Views on SlideShare
8,431
Embed Views
12

Actions

Likes
24
Downloads
226
Comments
0

9 Embeds 12

http://lanyrd.com 3
http://paper.li 2
http://www.onlydoo.com 1
http://www.novadoba.estranky.cz 1
http://www.mongodb.org 1
http://www.slideshare.net 1
http://m10.indicthreads.com 1
http://gpamplona.blogspot.com 1
https://twitter.com 1
More...

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

    Adaptive Layouts - standards>next London 28.05.2011 Adaptive Layouts - standards>next London 28.05.2011 Presentation Transcript

    • Adaptive layoutsRANDOM THOUGHTS ON MAKING YOUR SITE CROSS-DEVICE FRIENDLYPatrick H. Lauke / standards>next / London / 28 May 2011
    • we need a site that works on mobile
    • 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
    • what exactly is a“mobile device”?
    • dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
    • CSS 2 Media Types
    • Media typesall brailleembossed handheldprint projectionscreen speechtty tv
    • media="handheld"
    • 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
    • http://mediaqueri.es
    • http://mediaqueri.es
    • http://mediaqueri.es
    • www.themaninblue.com/writing/perspective/2004/09/21
    • “not a magic bullet...”
    • viewport meta
    • physical vs virtual pixels
    • mobile devices lie(to better serve the user)
    • viewport metasuggests sizing to mobile browser
    • viewport meta<meta name="viewport" content="width=320">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=480">
    • <meta name="viewport" content="width=550">
    • <meta name="viewport" content="width=550">
    • <meta name="viewport" content="width=550, maximum-scale=1.0">
    • maximum-scale=1.0 breaks zooming!
    • if (navigator.userAgent.match(/iPhone/i) ||navigator.userAgent.match(/iPad/i)) { var viewportmeta =document.querySelector(meta[name="viewport"]); if (viewportmeta) { viewportmeta.content = width=device-width, minimum-scale=1.0, maximum-scale=1.0; document.body.addEventListener(gesturestart,function() { viewportmeta.content = width=device-width, minimum-scale=0.25, maximum-scale=1.6; }, false); }}adactio.com/journal/4470
    • device-width to the rescue?
    • in Mobile Safari only: device-width always same (portrait/landscape) … WTF?
    • high-dpi devices lieabout device-width
    • <meta name="viewport" content="width=device-width">
    • 480px / 160% = 300px
    • <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
    • CSS Device Adaptation@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}dev.w3.org/csswg/css-device-adaptCurrently only in Opera Mobile 11 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
    • @media + @viewport@media screen and (max-device-width: 550px) { @-o-viewport { width: 550px; }}only apply viewport width fixing on small-screen devices
    • @viewport@-o-viewport { width: 550px auto;}minimum and maximum width
    • BUG ALERT: Opera currently not re-running Media Queries on portrait/landscape switch
    • www.opera.com/developer patrick.lauke@opera.com