Adapt and respond: keeping responsive into the future

Monday, 5 November 12

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

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

in this talk... ‣ MQ: Beyond width and height ‣ Other “responsive modules” ‣ Legacy support ‣ RWD for the futureMonday, 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 desktops/laptopsMonday, 5 November 12

Ok. We had wapMonday, 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 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

Back to the modern worldMonday, 5 November 12

media queries media="screen and (max-width: 481px)" @media screen and (max-width: 481px) { /* do amazing stuff for narrow screens */ }Monday, 5 November 12

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 considerations ‣ Making replaced elements responsive ‣ Bandwidth/loading of resources ‣ Resolution ‣ Processing power ‣ Control mechanismsMonday, 5 November 12

replaced elementsMonday, 5 November 12

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

be warned ‣ Old IE versions don’t support max-width, so you’ll have to fallback to width: 100% instead.Monday, 5 November 12

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

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

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

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

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/ ‣ None work perfectly ‣ Pre-fetch is a bitchMonday, 5 November 12

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

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

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

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

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 326ppi ‣ These devices lie twice ‣ One CSS pixel = multiple device pixels ‣ Images can start to look pixellatedMonday, 5 November 12

SOLUTIONS <img src="500px_image.jpg" width="250">Monday, 5 November 12

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

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

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

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

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

supporting older browsersMonday, 5 November 12

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

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

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

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

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-csstransforms3d #wrapper:hover #front, .no-csstransforms3d #wrapper:focus #front { transform: rotate(-30deg) translate(-50%,-100%); }Monday, 5 November 12

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

@supports @supports (display:flex) { section { display: flex } ... }Monday, 5 November 12

other responsive css3 modulesMonday, 5 November 12

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

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

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

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

Flex box <section> <article id="first"></article> <article id="second"></article> <article id="third"></article> </section>Monday, 5 November 12

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

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

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

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

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

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

Multi col article { column-width: 20em; column-gap: 2em; }Monday, 5 November 12

other future developmentsMonday, 5 November 12

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

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 on the output device can hover or not. @media screen and (hover) {...}Monday, 5 November 12

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

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

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

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

other future MQs @media (remote) { // TV or set-top box? } @media (remote) and (hover) { // Wii? }Monday, 5 November 12

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

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

http://www.383project.com	457
http://createordie.de	173
http://383project.site	87
http://383project2012.383dev.co.uk	73
http://entwickler.com	57
http://lanyrd.com	39
https://twitter.com	23
http://entwickler.de	16
https://twimg0-a.akamaihd.net	15
http://webmagazin.de	7
https://si0.twimg.com	4
http://us-w1.rockmelt.com	1
http://entwickler-magazin.de	1
http://server-magazin.de	1

Adapt and respond: keeping responsive into the future

by Chris Mills on Jul 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 954

Statistics

Adapt and respond: keeping responsive into the future Presentation Transcript