Adapt and respond: keeping responsive into the future

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

Monday, 5 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 queries

media="screen and (max-width: 481px)"

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


media queries


the mobile problem


viewport

<meta name="viewport"
content="width=device-width">


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


“Subtle”
advertisement
Buy my book

game over

1up 0000000

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 0000000

Adapt and respond: keeping responsive into the future

Recommandé

Recommandé

Contenu connexe

Similaire à Adapt and respond: keeping responsive into the future

Similaire à Adapt and respond: keeping responsive into the future (20)

Plus de Chris Mills

Plus de Chris Mills (20)

Dernier

Dernier (20)

Adapt and respond: keeping responsive into the future

Notes de l'éditeur