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.

Responsive web design standards?

7,037 views

Published on

This talk was given at the responsive web design event at Manchester Metropolitan university on December 5th 2012. It looks at responsive design from the standards perspective, starting with history, and how we got to where we are now, and looking at the technologies available for practicing RWD in the modern day and in the near future.

Published in: Technology

Responsive web design standards?

  1. 1. Responsive web standards? Chris Mills Opera Software/W3CFriday, 7 December 12
  2. 2. Who am I? * Works for Opera and W3C * Open standards evangelist * HTML5/CSS3 wrangler * Accessibility whinger * Education agitator * Heavy metal drummerResponsive web standards? Chris MillsFriday, 7 December 12
  3. 3. Useful stuff @chrisdavidmills cmills@opera.com/cmills@w3.org slideshare.net/chrisdavidmills webplatform.org dev.opera.comFriday, 7 December 12
  4. 4. A question Do web standards provide a good set of tools for responsive web design?Responsive web standards? Chris MillsFriday, 7 December 12
  5. 5. The answer We’re getting there ;-)Responsive web standards? Chris MillsFriday, 7 December 12
  6. 6. But the road has been hardFriday, 7 December 12
  7. 7. CSS first existed circa 1996Responsive web standards? Chris MillsFriday, 7 December 12
  8. 8. But ... browser support? <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER SECTION ============== --> <td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> <tr> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="#">Menu link</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td>Responsive web standards? Chris MillsFriday, 7 December 12
  9. 9. CSS 1 and 2 had very few... ...RWD-friendly features Because RWD problems didn’t exist back then!Responsive web standards? Chris MillsFriday, 7 December 12
  10. 10. Layout tools? Then again CSS2 has few layout tools ... Period.Responsive web standards? Chris MillsFriday, 7 December 12
  11. 11. We still abuse floats and padding And positioning is good. But doesn’t solve everything.Responsive web standards? Chris MillsFriday, 7 December 12
  12. 12. CSS2 has media types But they are largely flawed media=”screen”, media=”print” media=”handheld”, media=”tv” media=”wtf?”Responsive web standards? Chris MillsFriday, 7 December 12
  13. 13. Surely they are all really “screen”?Friday, 7 December 12
  14. 14. <img> was never responsive We had no need for responsive images when <img> was createdResponsive web standards? Chris MillsFriday, 7 December 12
  15. 15. And we’ve never had... * “Proper” layout modules * Feature detection * Access to hardware features * whinge whinge whinge... * ...I want it all yesterday... * ...etc.Responsive web standards? Chris MillsFriday, 7 December 12
  16. 16. Whinge overResponsive web standards? Chris MillsFriday, 7 December 12
  17. 17. The W3C process is longResponsive web standards? Chris MillsFriday, 7 December 12
  18. 18. The W3C process is long * A problem first has to present itself * Someone has to propose a solution * Which has to be agreed by committee * After checking for the “P” word * And then implemented by browsers * And then adopted by developersResponsive web standards? Chris MillsFriday, 7 December 12
  19. 19. Media queries succeed... ...where media types failedResponsive web standards? Chris MillsFriday, 7 December 12
  20. 20. Media queries media="screen and (max-width: 481px)" @media screen and (max-width: 481px) { /* do amazing stuff for narrow screens */ }Responsive web standards? Chris MillsFriday, 7 December 12
  21. 21. Media queriesResponsive web standards? Chris MillsFriday, 7 December 12
  22. 22. Viewport is also necessary For making mobile browsers behave!Responsive web standards? Chris MillsFriday, 7 December 12
  23. 23. Viewport is also necessaryResponsive web standards? Chris MillsFriday, 7 December 12
  24. 24. Viewport is also necessary <meta name="viewport" content="width=device-width">Responsive web standards? Chris MillsFriday, 7 December 12
  25. 25. CSS device adaptation spec Does viewport stuff ... in CSSResponsive web standards? Chris MillsFriday, 7 December 12
  26. 26. CSS device adaptation spec <meta name="viewport" content="width=550, maximum-scale=1.0, target-densitydpi=device-dpi"> @viewport { width: 550px; max-zoom: 1; resolution: device; }Responsive web standards? Chris MillsFriday, 7 December 12
  27. 27. CSS4 media queries * script * hover * pointer (none/coarse/fine) * luminosity (dim/normal/washed)Responsive web standards? Chris MillsFriday, 7 December 12
  28. 28. Other media query ideas * paged * interactive * touch * keyboard * remote * network-speedResponsive web standards? Chris MillsFriday, 7 December 12
  29. 29. CSS3 features “proper” layout * Flexbox * Multi-col layout * Grids * Regions * Exclusions and shapes * GCPMResponsive web standards? Chris MillsFriday, 7 December 12
  30. 30. Example: Flexbox * Easier UI layout * Makes layout tasks much easier * Cross browser support getting there * Great for mobile UIsResponsive web standards? Chris MillsFriday, 7 December 12
  31. 31. Example: Flexbox <section> <article id="first"></article> <article id="second"></article> <article id="third"></article> </section>Responsive web standards? Chris MillsFriday, 7 December 12
  32. 32. Responsive web standards? Chris MillsFriday, 7 December 12
  33. 33. Example: Flexbox section { display: flex; flex-flow: row; } section { display: flex; flex-flow: column; }Responsive web standards? Chris MillsFriday, 7 December 12
  34. 34. Responsive web standards? Chris MillsFriday, 7 December 12
  35. 35. Example: Flexbox section { display: flex; flex-flow: row; align-items: center; }Responsive web standards? Chris MillsFriday, 7 December 12
  36. 36. Responsive web standards? Chris MillsFriday, 7 December 12
  37. 37. Example: Flexbox #first, #third { order: 2; } #second { order: 1; }Responsive web standards? Chris MillsFriday, 7 December 12
  38. 38. Responsive web standards? Chris MillsFriday, 7 December 12
  39. 39. Example: Flexbox #first { flex: 1; } #second { flex: 1; } #third { flex: 1; }Responsive web standards? Chris MillsFriday, 7 December 12
  40. 40. Responsive web standards? Chris MillsFriday, 7 December 12
  41. 41. Example: Flexbox #first { flex: 1; } #second { flex: 1; } #third { flex: 2; }Responsive web standards? Chris MillsFriday, 7 December 12
  42. 42. Responsive web standards? Chris MillsFriday, 7 December 12
  43. 43. Responsive replaced elements * max-width: 100% ... * HTML5 <video>: <source> media attributes * <picture>Responsive web standards? Chris MillsFriday, 7 December 12
  44. 44. HTML5 <video> <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)">Responsive web standards? Chris MillsFriday, 7 December 12
  45. 45. 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>Responsive web standards? Chris MillsFriday, 7 December 12
  46. 46. Other useful image features * object-fit / object-position * background-image: image(image.png#xywh=150,250,100,100); * background-image: image("wavy.svg", wavy.png , "wavy.gif");Responsive web standards? Chris MillsFriday, 7 December 12
  47. 47. object-fit/object-position img { width: 300px; height: 300px; ... object-fit: contain; }Responsive web standards? Chris MillsFriday, 7 December 12
  48. 48. Image fragments background-image: image(image.png#xywh=15,30,150,120);Responsive web standards? Chris MillsFriday, 7 December 12
  49. 49. Misc responsive features * matchMedia * Native feature detection with @supports * CSS3 web fonts for icons * unicode-rangeResponsive web standards? Chris MillsFriday, 7 December 12
  50. 50. matchMedia if (window.matchMedia("(min-width: 400px)").matches) { /* Do stuff for wider screens */ } else { /* Do stuff for narrow screens */ }Responsive web standards? Chris MillsFriday, 7 December 12
  51. 51. @supports @supports (display:flex) { section { display: flex } ... }Responsive web standards? Chris MillsFriday, 7 December 12
  52. 52. unicode-range @font-face { font-family: myFont; src: local(myFont), url(/fonts/myFont.otf); unicode-range: U+000-49F, U+2000-27FF; }Responsive web standards? Chris MillsFriday, 7 December 12
  53. 53. Thanks! @chrisdavidmills cmills@opera.com/cmills@w3.org slideshare.net/chrisdavidmills webplatform.org dev.opera.comFriday, 7 December 12

×