Keeping responsive into the future by Chris mills

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 dad
Friday, 9 November 12

useful stuff
‣ dev.opera.com
‣ webplatform.org
‣ slideshare.net/
chrisdavidmills
‣ cmills@opera.com
‣ @chrisdavidmills

in this talk...
‣ MQ: Beyond width and height
‣ Other “responsive modules”
‣ Legacy support
‣ RWD for the future

A quick flashback

In the beginning...
‣ There wasn’t much RWD
‣ We only really looked at the
Web on desktops/laptops

Ok. We had wap

Then the mobile web
arrived

media types
media="screen"
media="print"

media types
media="handheld"
media="tv"

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

Back to the modern
world

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

media queries

the mobile problem

other rwd issues

Other
considerations
‣ Making replaced elements
responsive
‣ Bandwidth/loading of
resources
‣ Resolution
‣ Processing power
‣ Control mechanisms

replaced elements

replaced elements
#related img {
display: block;
margin: 0 auto;
max-width: 100%;
}

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

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

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

Mobile first
example
header { background: url(small-
image.png); }
@media screen and (min-width: 480px) {
header { background: url(large-
image.png); }
}

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)">

But html images are
not so lucky
<img src="thats-all-folks.png"> ?

Various solutions
‣ http://dev.opera.com/
articles/view/responsive-
images-problem/
‣ None work perfectly
‣ Pre-fetch is a bitch

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.

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>

suggested solutions
‣ Srcset
‣ New image formats?
‣ Defined the media tests in
meta tags?
‣ New headers and protocols?

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.

resolution

resolution
64px

resolution
64px
48px

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

SOLUTIONS
<img src="500px_image.jpg" width="250">

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) {
}

soon to be
replaced by
@media screen and (resolution: 1.5dppx)
{
}

tell the truth with
viewport
content="width=device-width,
target-densitydpi=device-dpi">

All good but...
‣ Images may now start to look
a little small
‣ You could serve larger
images for devices with
higher resolutions

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

supporting older
browsers

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

solutions
‣ Provide fallbacks such as
simpler layouts or pixels
instead of % or rems
‣ Use a media query polyfill
such as respond.js

modernizr
<html lang="en-US" class="no-js">
<head>
<script src="modernizr.js"></script>
</head>

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

modernizr css
#wrapper:hover, #wrapper:focus {
transform: rotateX(180deg);
}

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%);
}

modernizr JS
function rotateForm() {
if(Modernizr.cssanimations &&
Modernizr.csstransforms3d) {
form.setAttribute("class","form-
rotate");
form.style.left = "0rem";
} else {
back.style.zIndex = "5";
}
}

@supports
@supports (display:flex) {
section { display: flex }
...
}

other responsive
css3 modules

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

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

CSS device
adaptation
content="width=550,
maximum-scale=1.0,
target-densitydpi=device-dpi">
@viewport {
width: 550px;
max-zoom: 1;
resolution: device;
}

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
browsers

Flex box
<section>
<article id="first"></article>
<article id="second"></article>
<article id="third"></article>
</section>

Flex box
section {
display: flex;
flex-flow: row;
}
section {
display: flex;
flex-flow: column;
}

Flex box
section {
display: flex;
flex-flow: row;
align-items: center;
}

Flex box
#first, #third {
order: 2;
}
#second {
order: 1;
}

Flex box
#first {
flex: 1;
}
#second {
flex: 1;
}
#third {
flex: 1;
}

Flex box
#first {
flex: 1;
}
#second {
flex: 1;
}
#third {
flex: 2;
}

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.

Multi col
article {
column-width: 20em;
column-gap: 2em;
}

other future
developments

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/

script MQ
@media screen and (script) {...}
@media screen and not (script) {...}

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) {...}

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.

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.

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
}

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
}

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

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 Rivoal

Buy my book
“Subtle”
advertisement

game over
1up 0000000

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
game over
1up 0000000

Keeping responsive into the future by Chris mills

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to Keeping responsive into the future by Chris mills

Similar to Keeping responsive into the future by Chris mills (20)

More from Codemotion

More from Codemotion (20)

Recently uploaded

Recently uploaded (20)

Keeping responsive into the future by Chris mills