Adapt and respond: keeping responsive into the future
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Adapt and respond: keeping responsive into the future

on

  • 5,520 views

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

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.

Statistics

Views

Total Views
5,520
Views on SlideShare
4,489
Embed Views
1,031

Actions

Likes
8
Downloads
40
Comments
2

14 Embeds 1,031

http://www.383project.com 518
http://createordie.de 173
http://383project.site 89
http://383project2012.383dev.co.uk 73
http://entwickler.com 57
http://lanyrd.com 40
https://twitter.com 31
http://entwickler.de 16
https://twimg0-a.akamaihd.net 15
http://webmagazin.de 12
https://si0.twimg.com 4
http://us-w1.rockmelt.com 1
http://entwickler-magazin.de 1
http://server-magazin.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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!
    Are you sure you want to
    Your message goes here
    Processing…
  • Chris Mills' presentation at WebVisions Barcelona
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Adapt and respond: keeping responsive into the future Presentation Transcript

  • 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
  • 3. Monday, 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
  • 6. Monday, 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
  • 10. Monday, 5 November 12
  • 11. Monday, 5 November 12
  • 12. Then the mobile web arrivedMonday, 5 November 12
  • 13. Then the mobile web arrivedMonday, 5 November 12
  • 14. Then the mobile web arrivedMonday, 5 November 12
  • 15. 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
  • 20. Monday, 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"> <!-- fallback for non-supporting browsers --> </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
  • 43. resolutionMonday, 5 November 12
  • 44. 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
  • 50. 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
  • 71. Monday, 5 November 12
  • 72. Flex box section { display: flex; flex-flow: row; } section { display: flex; flex-flow: column; }Monday, 5 November 12
  • 73. Monday, 5 November 12
  • 74. Flex box section { display: flex; flex-flow: row; align-items: center; }Monday, 5 November 12
  • 75. Monday, 5 November 12
  • 76. Flex box #first, #third { order: 2; } #second { order: 1; }Monday, 5 November 12
  • 77. Monday, 5 November 12
  • 78. Flex box #first { flex: 1; } #second { flex: 1; } #third { flex: 1; }Monday, 5 November 12
  • 79. Monday, 5 November 12
  • 80. Flex box #first { flex: 1; } #second { flex: 1; } #third { flex: 2; }Monday, 5 November 12
  • 81. 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
  • 84. 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 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. “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