Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
×
Upcoming SlideShare
Accessibility doesn't exist
Next
Download to read offline and view in fullscreen.

10

Share

Download to read offline

Adapt and respond: keeping responsive into the future

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • williammdavis

    Dec. 7, 2016
  • bigbigyuan

    Jun. 16, 2016
  • albertspijkers

    Nov. 9, 2013
  • Parying

    Sep. 24, 2012
  • AndyDavies

    Sep. 13, 2012
  • ginader

    Jul. 27, 2012
  • AndrewBellamy

    Jul. 10, 2012
  • TakeshiWatanabe2

    Jul. 8, 2012
  • ArantxaHernandez

    Jul. 6, 2012
  • webvisions

    Jul. 6, 2012

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.

Views

Total views

5,975

On Slideshare

0

From embeds

0

Number of embeds

1,032

Actions

Downloads

42

Shares

0

Comments

0

Likes

10

×