Adapt and respond: keeping responsive into the future

1. Monday, 5 November 12

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

4. useful stuff ‣ dev.opera.com ‣ webplatform.org ‣ slideshare.net/ chrisdavidmills ‣ cmills@opera.com ‣ @chrisdavidmillsMonday, 5 November 12

5. in this talk... ‣ MQ: Beyond width and height ‣ Other “responsive modules” ‣ Legacy support ‣ RWD for the futureMonday, 5 November 12

7. A quick flashbackMonday, 5 November 12

8. In the beginning... ‣ There wasn’t much RWD ‣ We only really looked at the Web on desktops/laptopsMonday, 5 November 12

9. Ok. We had wapMonday, 5 November 12

12. Then the mobile web arrivedMonday, 5 November 12

16. media types media="screen" media="print"Monday, 5 November 12

17. media types media="handheld" media="tv"Monday, 5 November 12

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. 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

21. Back to the modern worldMonday, 5 November 12

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. media queriesMonday, 5 November 12

24. the mobile problemMonday, 5 November 12

25. viewport <meta name="viewport" content="width=device-width">Monday, 5 November 12

26. other rwd issuesMonday, 5 November 12

27. other rwd issuesMonday, 5 November 12

28. Other considerations ‣ Making replaced elements responsive ‣ Bandwidth/loading of resources ‣ Resolution ‣ Processing power ‣ Control mechanismsMonday, 5 November 12

29. replaced elementsMonday, 5 November 12

30. replaced elements #related img { display: block; margin: 0 auto; max-width: 100%; }Monday, 5 November 12

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. 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. 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. 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. 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. But html images are not so lucky <img src="thats-all-folks.png"> ?Monday, 5 November 12

37. Various solutions ‣ http://dev.opera.com/ articles/view/responsive- images-problem/ ‣ None work perfectly ‣ Pre-fetch is a bitchMonday, 5 November 12

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. 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">  </picture>Monday, 5 November 12

40. suggested solutions ‣ Srcset ‣ New image formats? ‣ Defined the media tests in meta tags? ‣ New headers and protocols?Monday, 5 November 12

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. resolutionMonday, 5 November 12

45. resolution 64pxMonday, 5 November 12

46. resolution 64px 48pxMonday, 5 November 12

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. SOLUTIONS <img src="500px_image.jpg" width="250">Monday, 5 November 12

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

51. soon to be replaced by @media screen and (resolution: 1.5dppx) { body { background-size: 250px; } }Monday, 5 November 12

52. tell the truth with viewport <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">Monday, 5 November 12

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. 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. supporting older browsersMonday, 5 November 12

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. 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. modernizr <html lang="en-US" class="no-js"> <head> <script src="modernizr.js"></script> </head>Monday, 5 November 12

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. modernizr css #wrapper:hover, #wrapper:focus { transform: rotateX(180deg); }Monday, 5 November 12

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. 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. @supports @supports (display:flex) { section { display: flex } ... }Monday, 5 November 12

64. other responsive css3 modulesMonday, 5 November 12

65. other responsive css3 modulesMonday, 5 November 12

66. worthy of note ‣ CSS device adaptation ‣ Flexbox ‣ Multi-col ‣ (Regions, Grids, etc.)Monday, 5 November 12

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. 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. 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. Flex box <section> <article id="first"></article> <article id="second"></article> <article id="third"></article> </section>Monday, 5 November 12

72. Flex box section { display: flex; flex-flow: row; } section { display: flex; flex-flow: column; }Monday, 5 November 12

74. Flex box section { display: flex; flex-flow: row; align-items: center; }Monday, 5 November 12

76. Flex box #first, #third { order: 2; } #second { order: 1; }Monday, 5 November 12

78. Flex box #first { flex: 1; } #second { flex: 1; } #third { flex: 1; }Monday, 5 November 12

80. Flex box #first { flex: 1; } #second { flex: 1; } #third { flex: 2; }Monday, 5 November 12

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. Multi col article { column-width: 20em; column-gap: 2em; }Monday, 5 November 12

85. other future developmentsMonday, 5 November 12

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. script MQ @media screen and (script) {...} @media screen and not (script) {...}Monday, 5 November 12

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. 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. 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. 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. 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. other future MQs @media (remote) { // TV or set-top box? } @media (remote) and (hover) { // Wii? }Monday, 5 November 12

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 wwwstyle@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. “Subtle” advertisement Buy my bookMonday, 5 November 12

96. game over 1up 0000000Monday, 5 November 12

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

Adapt and respond: keeping responsive into the future

Chris Mills

Adapt and respond: keeping responsive into the future