Your SlideShare is downloading. ×
0
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://ww...
Media featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
CSS 3 Media Queries<link rel="stylesheet" ...media="screen and (max-width:480px)" href="...">@import url("...") screen and...
Multiple expressions – and keyword@media screen and (min-width:180px) and (max-width:480px) {    // screen device and widt...
Multiple expressions – comma separated@media screen and (min-width:800px),         print and (min-width:20em) {    // scre...
Negative expressions – not keyword@media not screen and (min-width:800px) {    // not applied to screen device    // with ...
Exclusive expressions – only keyword@media only screen and (min-width:800px) {    // only applied to screen device    // w...
Multiple media queries/* “The absence of a media query is the firstmedia query” Bryan Rieger */@media screen and (max-widt...
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,...
<meta name="viewport" content="width=550">
If youre using Media Queries:    <meta name="viewport"content="width=device-width">     If you have an explicit width:    ...
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 wo...
Viewport propertieswidth / min-width / max-width      user-zoomheight / min-height / max-height   orientationzoom / min-zo...
<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;   ...
/* 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 {...
<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@media screen {    @-o-viewport {...
@-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 ...
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 ...
Super WebKit-tastic CSSselector {background: image-set (url(foo-lowres.png) 1x,               url(foo-highres.png) 2x) cen...
.. extrapolate to HTML?<img src=foo-lowres.png     set="foo-lowres.png 1x,          foo-highres.png 2x" alt="blah">"Ill po...
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...
<picture alt=… >  <source … media="(min-width:1000px)">  <source … media="(max-width:1000px)">    <img src=… alt=…></pictu...
“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) a...
@media screen and (script) {...}@media screen and not (script) {…}      http://lists.w3.org/Archives/Public/www-style/2012...
@media (paged) and (interactive:0) {    // I am like a printer}@media (paged) and (interactive) {    // Im a projector, or...
@media (touch) and (max-width: 480) {     // looks like an smart phone}@media (touch) and (keyboard) and    (min-width:600...
@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 abo...
“embrace the fluidity,   dont fight it”
http://futurefriend.ly
brucel@opera.com opera.com/developerwww.brucelawson.co.uk       @brucel
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
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

2,069

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,069
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. The specs behind the sexMOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOP
  2. 2. Zeldman pic by Tony Quartarolo
  3. 3. Mobile Web philosophy
  4. 4. Three methodologies
  5. 5. 1. Special mobile site2. Do nothing at all3. Optimise for mobile
  6. 6. 1. Special mobile site2. Do nothing at all3. Optimise for mobile
  7. 7. refactored for small screen,not dumbed down for mobile
  8. 8. offer users choice:desktop or mobile?
  9. 9. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  10. 10. 1. Special mobile site2. Do nothing at all3. Optimise for mobile
  11. 11. not WAP or text anymore...
  12. 12. 1. Special mobile site2. Do nothing at all3. Optimise for mobile
  13. 13. CSS 2 Media Types
  14. 14. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  15. 15. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  16. 16. 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/
  17. 17. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  18. 18. 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}
  19. 19. Multiple expressions – and keyword@media screen and (min-width:180px) and (max-width:480px) { // screen device and width > 180px // and width < 480px}
  20. 20. 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}
  21. 21. Negative expressions – not keyword@media not screen and (min-width:800px) { // not applied to screen device // with width > 800px}
  22. 22. Exclusive expressions – only keyword@media only screen and (min-width:800px) { // only applied to screen device // with width > 800px}
  23. 23. 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}
  24. 24. http://mediaqueri.es
  25. 25. http://mediaqueri.es
  26. 26. http://mediaqueri.es
  27. 27. http://mediaqueri.es
  28. 28. www.themaninblue.com/writing/perspective/2004/09/21
  29. 29. unsolved mysteries…
  30. 30. mobile devices lie
  31. 31. viewport metasuggests an initial layout viewport and zoom
  32. 32. physical vs virtual pixels
  33. 33. 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
  34. 34. <meta name="viewport" content="width=550">
  35. 35. If youre using Media Queries: <meta name="viewport"content="width=device-width"> If you have an explicit width: <meta name="viewport" content="width=550">
  36. 36. Viewport propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale
  37. 37. high-dpi devices lie twice
  38. 38. <meta name="viewport"content="width=device-width,target-densitydpi=device-dpi">
  39. 39. 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
  40. 40. Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom resolution
  41. 41. <meta name="viewport" content="width=550">@-o-viewport { width: 550px;}
  42. 42. <meta name="viewport"content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@-o-viewport { width: 550px; max-zoom: 1; resolution: device;}
  43. 43. /* selective viewport via CSS */@media … { @-o-viewport { … /* for propellerheads */ }}
  44. 44. <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; }}
  45. 45. <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; }}
  46. 46. @-o-viewport { /* minimum of 550px viewport width */ width: 550px auto; max-zoom: auto;}
  47. 47. The future
  48. 48. 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/
  49. 49. lowsrc<img src=hires.jpg lowsrc=lores.jpg alt="blah">Both images are download; never in spec
  50. 50. Apple way<img src=lores.jpg data-src=hires.jpg alt="blah">Both images are download; requires JS for hires image
  51. 51. 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.
  52. 52. 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
  53. 53. .. 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."
  54. 54. video and Responsive Web Design<video> <source … media="(min-width:1000px)"> <source … media="(max-width:1000px)"></video>
  55. 55. 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/
  56. 56. <picture alt=… > <source … media="(min-width:1000px)"> <source … media="(max-width:1000px)"> <img src=… alt=…></picture>
  57. 57. “not a magic bullet...”
  58. 58. Good or evil?Florian Rivoal
  59. 59. 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!)
  60. 60. @media screen and (script) {...}@media screen and not (script) {…} http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html
  61. 61. @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}
  62. 62. @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}
  63. 63. @media (remote) { // TV or set-top box?}@media (remote) and (hover) { // Wii?}
  64. 64. @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."
  65. 65. “embrace the fluidity, dont fight it”
  66. 66. http://futurefriend.ly
  67. 67. brucel@opera.com opera.com/developerwww.brucelawson.co.uk @brucel
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×