Monday, 5 November 12
Hi.I am chris                        mills.         ‣ Open standards advocate and             Education           agitator...
Monday, 5 November 12
useful stuff         ‣ dev.opera.com         ‣ webplatform.org         ‣ slideshare.net/             chrisdavidmills      ...
in this talk...         ‣ MQ: Beyond width and height         ‣ Other “responsive modules”         ‣ Legacy support       ...
Monday, 5 November 12
A quick flashbackMonday, 5 November 12
In the beginning...         ‣ There wasn’t much RWD         ‣ We only really looked at the             Web        on   des...
Ok. We had wapMonday, 5 November 12
Monday, 5 November 12
Monday, 5 November 12
Then the mobile web                   arrivedMonday, 5 November 12
Then the mobile web                   arrivedMonday, 5 November 12
Then the mobile web                   arrivedMonday, 5 November 12
Then the mobile web                   arrivedMonday, 5 November 12
media types             media="screen"             media="print"Monday, 5 November 12
media types             media="handheld"             media="tv"Monday, 5 November 12
small tv rant             “Searching, browsing,             updating and buffering are             not TV-like. In fact an...
small tv rant             “Searching, browsing,             updating and buffering are             not TV-like. In fact an...
Monday, 5 November 12
Back to the modern      worldMonday, 5 November 12
media queries             media="screen and (max-width: 481px)"             @media screen and (max-width: 481px) {        ...
media queriesMonday, 5 November 12
the mobile problemMonday, 5 November 12
viewport             <meta name="viewport"             content="width=device-width">Monday, 5 November 12
other rwd issuesMonday, 5 November 12
other rwd issuesMonday, 5 November 12
Other                        considerations         ‣ Making replaced elements             responsive         ‣ Bandwidth/...
replaced elementsMonday, 5 November 12
replaced elements             #related img {                   display: block;                   margin: 0 auto;          ...
be warned         ‣ Old IE versions don’t             support max-width, so you’ll             have to fallback to width: ...
file size also                          important         ‣ Users on slow connections             won’t       want to   do...
css resources easy                  to deal with         ‣ Use “mobile first”         ‣ Load smaller resources by         ...
Mobile first                           example             header { background: url(small-             image.png); }      ...
html5 video also                          well served                 <source src="crystal320.webm"             type="vide...
But html images are                 not so lucky              <img src="thats-all-folks.png"> ?Monday, 5 November 12
Various solutions         ‣ http://dev.opera.com/             articles/view/responsive-             images-problem/       ...
adaptive-images         ‣ adaptive-images.com         ‣ Add .htaccess and adaptive-             images.php to       your  ...
the picture element             <picture alt="a picture of something">                   <source src="mobile.jpg">        ...
suggested solutions         ‣ Srcset         ‣ New image formats?         ‣ Defined the media tests in             meta   ...
processing power         ‣ You might want to turn off             effects like shadows,             gradients and animatio...
resolutionMonday, 5 November 12
resolutionMonday, 5 November 12
resolutionMonday, 5 November 12
resolution                        64pxMonday, 5 November 12
resolution                        64px                               48pxMonday, 5 November 12
now we have hi                    fidelity devices         ‣ e.g. iPhone 4s is 960 x 640             pixels     at   326pp...
SOLUTIONS             <img src="500px_image.jpg" width="250">Monday, 5 November 12
SOLUTIONS             @media screen and (-o-min-device-pixel-             ratio: 3/2) {                   body { backgroun...
Monday, 5 November 12
soon to be                        replaced by             @media screen and (resolution: 1.5dppx)             {           ...
tell the truth with                  viewport             <meta name="viewport"             content="width=device-width,  ...
All good but...         ‣ Images may now start to look             a          little   small         ‣ You could serve lar...
control mechanisms         ‣ Currently tricky           ‣ Usual wisdom about web sites                 applies — make page...
supporting older               browsersMonday, 5 November 12
old ie versions         ‣ Lack support for media             queries         ‣ Although we don’t get old IE             on...
solutions         ‣ Provide fallbacks such as             simpler         layouts   or pixels             instead         ...
modernizr             <html lang="en-US" class="no-js">             <head>                   <script src="modernizr.js"></...
modernizr             <html class=" js flexbox canvas canvastext             webgl no-touch geolocation postmessage no-   ...
modernizr css         #wrapper:hover, #wrapper:focus {           transform: rotateX(180deg);         }Monday, 5 November 12
modernizr css         .no-csstransforms3d #wrapper #front {           transition: 0.8s all ease-in;         }         .no-...
modernizr JS         function rotateForm() {           if(Modernizr.cssanimations &&              Modernizr.csstransforms3...
@supports         @supports (display:flex) {           section { display: flex }           ...         }Monday, 5 November...
other responsive         css3 modulesMonday, 5 November 12
other responsive         css3 modulesMonday, 5 November 12
worthy of note         ‣ CSS device adaptation         ‣ Flexbox         ‣ Multi-col         ‣ (Regions, Grids, etc.)Monda...
CSS device                          adaptation         ‣ Because viewport is really             more        of   a CSS typ...
CSS device                        adaptation         <meta name="viewport"           content="width=550,           maximum...
Flex box         ‣ A spec for easier UI             layout         ‣ Makes certain layout tasks             much       eas...
Flex box         <section>           <article id="first"></article>           <article id="second"></article>           <a...
Monday, 5 November 12
Flex box         section {           display: flex;           flex-flow: row;         }         section {           displa...
Monday, 5 November 12
Flex box         section {           display: flex;           flex-flow: row;           align-items: center;         }Mond...
Monday, 5 November 12
Flex box         #first, #third {           order: 2;         }         #second {           order: 1;         }Monday, 5 N...
Monday, 5 November 12
Flex box         #first {           flex: 1;         }         #second {           flex: 1;         }         #third {    ...
Monday, 5 November 12
Flex box         #first {           flex: 1;         }         #second {           flex: 1;         }         #third {    ...
Monday, 5 November 12
multi col          ‣ A spec for breaking content              into      multiple   columns.          ‣ Column widths/numbe...
Multi col         article {           column-width: 20em;           column-gap: 2em;         }Monday, 5 November 12
Monday, 5 November 12
other future                   developmentsMonday, 5 November 12
matchmedia         if (window.matchMedia("(min-width:         400px)").matches) {           /* Do stuff for wider screens ...
script MQ         @media screen and (script) {...}         @media screen and not (script) {...}Monday, 5 November 12
hover MQ         The ‘hover’ media feature is         used to query whether the         primary pointing system used      ...
pointer MQ         @media screen and (pointer: coarse) {...}         ‣ none: The input mechanism of           the device d...
luminosity MQ         @media screen and (luminosity: dim) {...}         ‣ dim: The device is being used           in a dim...
other future MQs         @media (paged) and (interactive:0) {           // I am like a printer         }         @media (p...
other future MQs         @media (touch) and (max-width: 480) {           // looks like an smart phone         }         @m...
other future MQs         @media (remote) {           // TV or set-top box?         }         @media (remote) and (hover) {...
other future MQs         @media (network: v-slow) {...}         “It has been proposed. Most         people agree that it w...
“Subtle”     advertisement   Buy my bookMonday, 5 November 12
game over                                1up   0000000Monday, 5 November 12
game over                01.     dev.opera.com                02.     slideshare.net/chrisdavidmills                03.   ...
Upcoming SlideShare
Loading in...5
×

Adapt and respond: keeping responsive into the future

5,136

Published on

Media queries blah blah blah. You've all heard that talk a hundred times, so I won't do that. Instead, I'll go beyond the obvious, looking at what we can do today to adapt our front-ends to different browsing environments, from mobiles and other alternative devices to older browsers we may be called upon to support.

You'll learn advanced media query and viewport tricks, including a look at @viewport, Insights into responsive images: problems, and current solutions, providing usable alternatives to older browsers with Modernizr and YepNope, other CSS3 responsive goodness - multi-col, Flexbox, and more, and finally where RWD is going — matchMedia, CSS4 media queries, etc.

Published in: Technology, Design
2 Comments
8 Likes
Statistics
Notes
  • FYI - this is a cut down version of the talk I delivered at WebVisions and Canvasconf - I removed most of the videos and other fun stuff to keep file size down and therefore make it more usable online. The original was huge!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Chris Mills' presentation at WebVisions Barcelona
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,136
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
42
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Adapt and respond: keeping responsive into the future"

    1. 1. Monday, 5 November 12
    2. 2. Hi.I am chris mills. ‣ Open standards advocate and Education agitator ‣ dev.opera.com editor ‣ W3C fellow, working on webplatform.org ‣ Accessibility whiner ‣ HTML5/CSS3 wrangler ‣ Heavy metal drummer and proud dadMonday, 5 November 12
    3. 3. Monday, 5 November 12
    4. 4. useful stuff ‣ dev.opera.com ‣ webplatform.org ‣ slideshare.net/ chrisdavidmills ‣ cmills@opera.com ‣ @chrisdavidmillsMonday, 5 November 12
    5. 5. in this talk... ‣ MQ: Beyond width and height ‣ Other “responsive modules” ‣ Legacy support ‣ RWD for the futureMonday, 5 November 12
    6. 6. Monday, 5 November 12
    7. 7. A quick flashbackMonday, 5 November 12
    8. 8. In the beginning... ‣ There wasn’t much RWD ‣ We only really looked at the Web on desktops/laptopsMonday, 5 November 12
    9. 9. Ok. We had wapMonday, 5 November 12
    10. 10. Monday, 5 November 12
    11. 11. Monday, 5 November 12
    12. 12. Then the mobile web arrivedMonday, 5 November 12
    13. 13. Then the mobile web arrivedMonday, 5 November 12
    14. 14. Then the mobile web arrivedMonday, 5 November 12
    15. 15. Then the mobile web arrivedMonday, 5 November 12
    16. 16. media types media="screen" media="print"Monday, 5 November 12
    17. 17. media types media="handheld" media="tv"Monday, 5 November 12
    18. 18. small tv rant “Searching, browsing, updating and buffering are not TV-like. In fact an enormous number of people found that the technology they had purchased wasnt what they expected at all, that they were bringing the worst parts of using a computer into the television environment.” -- www.insideci.co.uk/news/rovi-research- reveals-changing-consumer-habits.aspxMonday, 5 November 12
    19. 19. small tv rant “Searching, browsing, updating and buffering are not TV-like. In fact an enormous number of people found that the technology they had purchased wasnt what they expected at all, that they were bringing the worst parts of using a computer into the television environment.” -- www.insideci.co.uk/news/rovi-research- reveals-changing-consumer-habits.aspxMonday, 5 November 12
    20. 20. Monday, 5 November 12
    21. 21. Back to the modern worldMonday, 5 November 12
    22. 22. media queries media="screen and (max-width: 481px)" @media screen and (max-width: 481px) { /* do amazing stuff for narrow screens */ }Monday, 5 November 12
    23. 23. media queriesMonday, 5 November 12
    24. 24. the mobile problemMonday, 5 November 12
    25. 25. viewport <meta name="viewport" content="width=device-width">Monday, 5 November 12
    26. 26. other rwd issuesMonday, 5 November 12
    27. 27. other rwd issuesMonday, 5 November 12
    28. 28. Other considerations ‣ Making replaced elements responsive ‣ Bandwidth/loading of resources ‣ Resolution ‣ Processing power ‣ Control mechanismsMonday, 5 November 12
    29. 29. replaced elementsMonday, 5 November 12
    30. 30. replaced elements #related img { display: block; margin: 0 auto; max-width: 100%; }Monday, 5 November 12
    31. 31. be warned ‣ Old IE versions don’t support max-width, so you’ll have to fallback to width: 100% instead.Monday, 5 November 12
    32. 32. file size also important ‣ Users on slow connections won’t want to download huge media files. ‣ We need to try to serve them smaller files/alternatives. ‣ Assumptions: e.g. narrow equals mobile equals slow connectionMonday, 5 November 12
    33. 33. css resources easy to deal with ‣ Use “mobile first” ‣ Load smaller resources by default, and larger ones inside MQs ‣ And in the future we’ve got things like image-set coming up (possibly...)Monday, 5 November 12
    34. 34. Mobile first example header { background: url(small- image.png); } @media screen and (min-width: 480px) { header { background: url(large- image.png); } }Monday, 5 November 12
    35. 35. html5 video also well served <source src="crystal320.webm" type="video/webm" media="all and (max- width: 480px)"> <source src="crystal720.webm" type="video/webm" media="all and (min- width: 481px)">Monday, 5 November 12
    36. 36. But html images are not so lucky <img src="thats-all-folks.png"> ?Monday, 5 November 12
    37. 37. Various solutions ‣ http://dev.opera.com/ articles/view/responsive- images-problem/ ‣ None work perfectly ‣ Pre-fetch is a bitchMonday, 5 November 12
    38. 38. adaptive-images ‣ adaptive-images.com ‣ Add .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 the PHP file.Monday, 5 November 12
    39. 39. the picture element <picture alt="a picture of something"> <source src="mobile.jpg"> <source src="medium.jpg" media="min width: 600px"> <source src="fullsize.jpg" media="min width: 900px"> <img src="mobile.jpg"> <!-- fallback for non-supporting browsers --> </picture>Monday, 5 November 12
    40. 40. suggested solutions ‣ Srcset ‣ New image formats? ‣ Defined the media tests in meta tags? ‣ New headers and protocols?Monday, 5 November 12
    41. 41. processing power ‣ You might want to turn off effects like shadows, gradients and animations for small screen devices. ‣ CSS effects are arguably less power draining than JS or Flash, but even so. ‣ They can cause the display to look cluttered too.Monday, 5 November 12
    42. 42. resolutionMonday, 5 November 12
    43. 43. resolutionMonday, 5 November 12
    44. 44. resolutionMonday, 5 November 12
    45. 45. resolution 64pxMonday, 5 November 12
    46. 46. resolution 64px 48pxMonday, 5 November 12
    47. 47. now we have hi fidelity devices ‣ e.g. iPhone 4s is 960 x 640 pixels at 326ppi ‣ These devices lie twice ‣ One CSS pixel = multiple device pixels ‣ Images can start to look pixellatedMonday, 5 November 12
    48. 48. SOLUTIONS <img src="500px_image.jpg" width="250">Monday, 5 November 12
    49. 49. SOLUTIONS @media screen and (-o-min-device-pixel- ratio: 3/2) { body { background-size: 250px; } } @media screen and (-webkit-min-device- pixel-ratio: 1.5) { body { background-size: 250px; } }Monday, 5 November 12
    50. 50. Monday, 5 November 12
    51. 51. soon to be replaced by @media screen and (resolution: 1.5dppx) { body { background-size: 250px; } }Monday, 5 November 12
    52. 52. tell the truth with viewport <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">Monday, 5 November 12
    53. 53. All good but... ‣ Images may now start to look a little small ‣ You could serve larger images for devices with higher resolutionsMonday, 5 November 12
    54. 54. control mechanisms ‣ Currently tricky ‣ Usual wisdom about web sites applies — make pages keyboard accessible, etc. ‣ Can’t be detected in CSS(yet) ‣ JavaScript touch detection is an option — Modernizr, jQueryMonday, 5 November 12
    55. 55. supporting older browsersMonday, 5 November 12
    56. 56. old ie versions ‣ Lack support for media queries ‣ Although we don’t get old IE on small screen devices ‣ But mobile first is a problemMonday, 5 November 12
    57. 57. solutions ‣ Provide fallbacks such as simpler layouts or pixels instead of % or rems ‣ Use a media query polyfill such as respond.jsMonday, 5 November 12
    58. 58. modernizr <html lang="en-US" class="no-js"> <head> <script src="modernizr.js"></script> </head>Monday, 5 November 12
    59. 59. modernizr <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no- websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no- cssreflections csstransforms no- csstransforms3d csstransitions fontface generatedcontent video audio ... ">Monday, 5 November 12
    60. 60. modernizr css #wrapper:hover, #wrapper:focus { transform: rotateX(180deg); }Monday, 5 November 12
    61. 61. modernizr css .no-csstransforms3d #wrapper #front { transition: 0.8s all ease-in; } .no-csstransforms3d #wrapper:hover #front, .no-csstransforms3d #wrapper:focus #front { transform: rotate(-30deg) translate(-50%,-100%); }Monday, 5 November 12
    62. 62. modernizr JS function rotateForm() { if(Modernizr.cssanimations && Modernizr.csstransforms3d) { form.setAttribute("class","form- rotate"); form.style.left = "0rem"; } else { back.style.zIndex = "5"; } }Monday, 5 November 12
    63. 63. @supports @supports (display:flex) { section { display: flex } ... }Monday, 5 November 12
    64. 64. other responsive css3 modulesMonday, 5 November 12
    65. 65. other responsive css3 modulesMonday, 5 November 12
    66. 66. worthy of note ‣ CSS device adaptation ‣ Flexbox ‣ Multi-col ‣ (Regions, Grids, etc.)Monday, 5 November 12
    67. 67. CSS device adaptation ‣ Because viewport is really more of a CSS type thing than an HTML type thing ‣ This spec provides a @viewport at-rule to contain viewport equivalents ‣ Currently supported in Opera and IE10, with prefixes ‣ dev.opera.com/articles/view/ an-introduction-to-meta- viewport-and-viewportMonday, 5 November 12
    68. 68. CSS device adaptation <meta name="viewport" content="width=550, maximum-scale=1.0, target-densitydpi=device-dpi"> @viewport { width: 550px; max-zoom: 1; resolution: device; }Monday, 5 November 12
    69. 69. Flex box ‣ A spec for easier UI layout ‣ Makes certain layout tasks much easier ‣ New syntax support currently very limited ‣ Old syntax supported in most modern browsersMonday, 5 November 12
    70. 70. Flex box <section> <article id="first"></article> <article id="second"></article> <article id="third"></article> </section>Monday, 5 November 12
    71. 71. Monday, 5 November 12
    72. 72. Flex box section { display: flex; flex-flow: row; } section { display: flex; flex-flow: column; }Monday, 5 November 12
    73. 73. Monday, 5 November 12
    74. 74. Flex box section { display: flex; flex-flow: row; align-items: center; }Monday, 5 November 12
    75. 75. Monday, 5 November 12
    76. 76. Flex box #first, #third { order: 2; } #second { order: 1; }Monday, 5 November 12
    77. 77. Monday, 5 November 12
    78. 78. Flex box #first { flex: 1; } #second { flex: 1; } #third { flex: 1; }Monday, 5 November 12
    79. 79. Monday, 5 November 12
    80. 80. Flex box #first { flex: 1; } #second { flex: 1; } #third { flex: 2; }Monday, 5 November 12
    81. 81. Monday, 5 November 12
    82. 82. multi col ‣ A spec for breaking content into multiple columns. ‣ Column widths/numbers, column rules, column spacing, column gaps, column breaks. ‣ Supported across all major browsers, mostly.Monday, 5 November 12
    83. 83. Multi col article { column-width: 20em; column-gap: 2em; }Monday, 5 November 12
    84. 84. Monday, 5 November 12
    85. 85. other future developmentsMonday, 5 November 12
    86. 86. matchmedia if (window.matchMedia("(min-width: 400px)").matches) { /* Do stuff for wider screens */ } else { /* Do stuff for narrow screens */ } For IE9 and Opera, polyfill github.com/paulirish/matchMedia.js/Monday, 5 November 12
    87. 87. script MQ @media screen and (script) {...} @media screen and not (script) {...}Monday, 5 November 12
    88. 88. hover MQ The ‘hover’ media feature is used to query whether the primary pointing system used on the output device can hover or not. @media screen and (hover) {...}Monday, 5 November 12
    89. 89. pointer MQ @media screen and (pointer: coarse) {...} ‣ none: The input mechanism of the device does not include a pointing device. ‣ coarse: The input mechanism of the device includes a pointing device of limited accuracy. ‣ fine: The input mechanism of the device includes an accurate pointing device.Monday, 5 November 12
    90. 90. luminosity MQ @media screen and (luminosity: dim) {...} ‣ dim: The device is being used in a dim environment, such as nighttime. ‣ normal: The device is being used in average lighting conditions, which don’t require significant adjustment. ‣ washed: The device is being used in washed out conditions, e.g. in bright sunlight.Monday, 5 November 12
    91. 91. other future MQs @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 }Monday, 5 November 12
    92. 92. other future MQs @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 }Monday, 5 November 12
    93. 93. other future MQs @media (remote) { // TV or set-top box? } @media (remote) and (hover) { // Wii? }Monday, 5 November 12
    94. 94. other future MQs @media (network: v-slow) {...} “It has been proposed. Most people agree that it would be cool, nobody has a clue about how to spec it ... submit proposals to me or to www- style@w3.org. Use [css4- mediaqueries] in the subject line, and read lists.w3.org/ Archives/Public/wwwstyle/ 2012Mar/0691.html first.” -- Florian RivoalMonday, 5 November 12
    95. 95. “Subtle” advertisement Buy my bookMonday, 5 November 12
    96. 96. game over 1up 0000000Monday, 5 November 12
    97. 97. game over 01. dev.opera.com 02. slideshare.net/chrisdavidmills 03. cmills@opera.com 04. @chrisdavidmills 05. Practical CSS3: Develop & Design 06. www.w3.org/Style/CSS/current- work.en.html 07. http://dev.w3.org/csswg/ mediaqueries4/ 08. CDM 09. WOW 1up 0000000Monday, 5 November 12
    1. A particular slide catching your eye?

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

    ×