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,342 views

 

Statistics

Views

Total Views
2,342
Views on SlideShare
2,334
Embed Views
8

Actions

Likes
2
Downloads
10
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