The specs behind the sex, mobile-friendly layout beyond the desktop
Upcoming SlideShare
Loading in...5
×
 

The specs behind the sex, mobile-friendly layout beyond the desktop

on

  • 2,257 views

 

Statistics

Views

Total Views
2,257
Views on SlideShare
2,249
Embed Views
8

Actions

Likes
2
Downloads
9
Comments
0

1 Embed 8

http://betabeers.com 8

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

    The specs behind the sex, mobile-friendly layout beyond the desktop The specs behind the sex, mobile-friendly layout beyond the desktop Presentation Transcript

    • The specs behind the sexMOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOP
    • Zeldman pic by Tony Quartarolo
    • Mobile Web philosophy
    • Three methodologies
    • 1. Special mobile site2. Do nothing at all3. Optimise for mobile
    • 1. Special mobile site2. Do nothing at all3. Optimise for mobile
    • refactored for small screen,not dumbed down for mobile
    • offer users choice:desktop or mobile?
    • beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
    • 1. Special mobile site2. Do nothing at all3. Optimise for mobile
    • not WAP or text anymore...
    • 1. Special mobile site2. Do nothing at all3. Optimise for mobile
    • CSS 2 Media Types
    • Media typesall brailleembossed handheldprint projectionscreen speechtty tv
    • 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
    • unsolved mysteries…
    • mobile devices lie
    • viewport metasuggests an initial layout viewport and zoom
    • physical vs virtual pixels
    • viewport meta<meta name="viewport"content="width=device-width"><meta name="viewport"content="width=320, initial-scale=2.3,user-scalable=no">http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
    • <meta name="viewport" content="width=550">
    • If youre using Media Queries: <meta name="viewport"content="width=device-width"> If you have an explicit width: <meta name="viewport" content="width=550">
    • Viewport propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale
    • high-dpi devices lie twice
    • <meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">
    • 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;}
    • The future
    • matchMediaif (window.matchMedia("(min-width: 400px)").matches) { /* the view port is at least 400 pixels wide */} else { /* the view port is less than 400 pixels wide */} For IE9+ and Opera, polyfill github.com/paulirish/matchMedia.js/
    • lowsrc<img src=hires.jpg lowsrc=lores.jpg alt="blah">Both images are download; never in spec
    • Apple way<img src=lores.jpg data-src=hires.jpg alt="blah">Both images are download; requires JS for hires image
    • adaptive-images.comAdd .htaccess and adaptive-images.php to your document-root folder.Add one line of JavaScript into the <head> of your site.Add your CSS Media Query values into $resolutions in thePHP file.
    • Super WebKit-tastic CSSselector {background: image-set (url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center;}selector {background: image-set(url(foo-lowres.png) 1x low-bandwidth, url(foo-highres.png) 2x high-bandwidth);}http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
    • .. extrapolate to HTML?<img src=foo-lowres.png set="foo-lowres.png 1x, foo-highres.png 2x" alt="blah">"Ill post something to the whatwg thread referencing thisproposal."
    • video and Responsive Web Design<video> <source … media="(min-width:1000px)"> <source … media="(max-width:1000px)"></video>
    • Adaptive Image Element<picture> <source … media="(min-width:1000px)"> <source … media="(max-width:1000px)"></picture>www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/http://www.w3.org/community/respimg/
    • <picture alt=… > <source … media="(min-width:1000px)"> <source … media="(max-width:1000px)"> <img src=… alt=…></picture>
    • “not a magic bullet...”
    • Good or evil?Florian Rivoal
    • Note to people who werent at the talk: following slides arestrawman ideas for the next iteration of Media Queries (CSS4) and are almost certainly to be completely different if theyever make it into the specification. (CSS 3 MQs became a"Proposed Recommendation", eg a "Standard" week of 23April 2012, so very early days!)
    • @media screen and (script) {...}@media screen and not (script) {…} http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html
    • @media (paged) and (interactive:0) { // I am like a printer}@media (paged) and (interactive) { // Im a projector, or like a Kindle}@media (paged) and (interactive) and (touch){ // Im like a touch-screen Kindle}
    • @media (touch) and (max-width: 480) { // looks like an smart phone}@media (touch) and (keyboard) and (min-width:600) { // looks like a touch-screen laptop}
    • @media (remote) { // TV or set-top box?}@media (remote) and (hover) { // Wii?}
    • @media (network: v-slow) {..}Florian: "It has been proposed. Most people agree that itwould be cool, nobody has a clue about how to spec it in away that is useful and implementable. If you find peoplewith a clue, encourage them to submit proposals to me orto www-style@w3.org. Use [css4-mediaqueries] in thesubject line, and read lists.w3.org/Archives/Public/www-style/2012Mar/0691.html first."
    • “embrace the fluidity, dont fight it”
    • http://futurefriend.ly
    • brucel@opera.com opera.com/developerwww.brucelawson.co.uk @brucel