Adapt and respond: keeping responsive into the future
-
Upload
chris-mills -
Category
Technology
-
view
107 -
download
3
description
Transcript of 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, workingon webplatform.org
‣Accessibility whiner‣HTML5/CSS3 wrangler‣Heavy metal drummerand proud dad
Monday, 5 November 12
Monday, 5 November 12
useful stuff
‣dev.opera.com‣webplatform.org‣slideshare.net/chrisdavidmills
‣[email protected]‣@chrisdavidmills
Monday, 5 November 12
in this talk... ‣MQ: Beyond width and height‣Other “responsive modules”‣Legacy support‣RWD for the future
Monday, 5 November 12
Monday, 5 November 12
A quick flashback
Monday, 5 November 12
In the beginning...
‣There wasn’t much RWD‣We only really looked at the Web on desktops/laptops
Monday, 5 November 12
Ok. We had wap
Monday, 5 November 12
Monday, 5 November 12
Monday, 5 November 12
Then the mobile web arrived
Monday, 5 November 12
Then the mobile web arrived
Monday, 5 November 12
Then the mobile web arrived
Monday, 5 November 12
Then the mobile web arrived
Monday, 5 November 12
media typesmedia="screen"
media="print"
Monday, 5 November 12
media typesmedia="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 wasn't 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.aspx
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 wasn't 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.aspx
Monday, 5 November 12
Monday, 5 November 12
Back to the modern world
Monday, 5 November 12
media="screen and (max-width: 481px)"
@media screen and (max-width: 481px) { /* do amazing stuff for narrow screens */}
media queries
Monday, 5 November 12
media queries
Monday, 5 November 12
the mobile problem
Monday, 5 November 12
<meta name="viewport" content="width=device-width">
viewport
Monday, 5 November 12
other rwd issues
Monday, 5 November 12
other rwd issues
Monday, 5 November 12
Other considerations
‣Making replaced elements responsive
‣Bandwidth/loading of resources
‣Resolution‣Processing power‣Control mechanisms
Monday, 5 November 12
replaced elements
Monday, 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 connection
Monday, 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 bitch
Monday, 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"> <!-- fallback for non-supporting browsers -->
</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
resolution
Monday, 5 November 12
resolution
Monday, 5 November 12
resolution
Monday, 5 November 12
resolution
64px
Monday, 5 November 12
resolution
64px
48px
Monday, 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 pixellated
Monday, 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
Monday, 5 November 12
soon to bereplaced 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 resolutions
Monday, 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, jQuery
Monday, 5 November 12
supporting older browsers
Monday, 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 problem
Monday, 5 November 12
solutions
‣Provide fallbacks such as simpler layouts or pixels instead of % or rems
‣Use a media query polyfill such as respond.js
Monday, 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 modules
Monday, 5 November 12
other responsive css3 modules
Monday, 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-viewport
Monday, 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 UIlayout
‣Makes certain layout tasks much easier
‣New syntax supportcurrently very limited
‣Old syntax supportedin most modernbrowsers
Monday, 5 November 12
Flex box
<section> <article id="first"></article> <article id="second"></article> <article id="third"></article></section>
Monday, 5 November 12
Monday, 5 November 12
Flex box
section { display: flex; flex-flow: row;}
section { display: flex; flex-flow: column;}
Monday, 5 November 12
Monday, 5 November 12
Flex box
section { display: flex; flex-flow: row; align-items: center;}
Monday, 5 November 12
Monday, 5 November 12
Flex box
#first, #third { order: 2;}
#second { order: 1;}
Monday, 5 November 12
Monday, 5 November 12
Flex box
#first { flex: 1;}
#second { flex: 1;}
#third { flex: 1;}
Monday, 5 November 12
Monday, 5 November 12
Flex box
#first { flex: 1;}
#second { flex: 1;}
#third { flex: 2;}
Monday, 5 November 12
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
Monday, 5 November 12
other future developments
Monday, 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) { // I'm a projector, or like a Kindle}@media (paged) and (interactive) and (touch){ // I'm 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 [email protected]. Use [css4-mediaqueries] in the subject line, and read lists.w3.org/Archives/Public/wwwstyle/2012Mar/0691.html first.”
-- Florian Rivoal
Monday, 5 November 12
Buy my book
“Subtle” advertisement
Monday, 5 November 12
game over
1up 0000000Monday, 5 November 12
01. dev.opera.com
02. slideshare.net/chrisdavidmills
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
game over
1up 0000000Monday, 5 November 12