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