Responsive design: techniques and tricks to prepare your websites for the multi-screen future

Responsive design: techniques and
tricks to prepare your websites for
the multi-screen future Andreas Bovens - Opera Software
http://www.ﬂickr.com/photos/redux/7145995789/

“Patterns for
Multiscreen
Strategies”
Coherence Syncronization Screen sharing

By Precious
http:/
/slidesha.re/kiip5y

Device shifting Complementarity Simultaneity

These patterns should help understand and define strategies for the multiscreen world.

Coherence Syncronization Screen sharing

Device shifting Complementarity Simultaneity

These patterns should help understand and define strategies for the multiscreen world.

http:/
/slidesha.re/kiip5y

“A digital product or
service looks and
works coherently
across devices.
Features are
optimized for
speciﬁc device
characteristics and
usage scenarios.”
Coherence
http:/
/slidesha.re/kiip5y

Coherence
http://slidesha.re/kiip5y

small screen rendering
aka single column view

“Nice, but how can we control
this zooming behavior?”

Let’s talk about the
viewport mechanism

...we can control page
width & height, zoom
level, etc.

This works in:

with some exceptions ;-)

http:/
/www.opera.com/developer/tools/mobile/

HVGA portrait

no viewport deﬁned in <head>,
so fallback to default of 980px,
which is squeezed inside
320px.

HVGA portrait

<meta name="viewport"
content="width=320">

HVGA portrait HVGA landscape

content="width=320">

HVGA portrait

content="width=device-width">

HVGA landscape HVGA landscape

480px
320px × 1.5 zoom

HVGA portrait

content="initial-scale=1">


(same result as width=device-width)


content="initial-scale=0.5">


+
<div style="width: 600px">

HVGA portrait


+

HVGA portrait

content="width=device-width,
initial-scale=1">
+

other settings
maximum-scale=... , minimum-scale=...
<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">
user-scalable=yes|no
<meta name="viewport" content="width=320, user-scalable=no">
height=...
<meta name="viewport" content="height=device-height">

Important!
Make sure to use commas, not semi-colons
as delimiters between viewport values!
<meta name="viewport" content="initial-scale=1; user-scalable=no">
<meta name="viewport" content="initial-scale=1, user-scalable=no">

caveats
Android Browser doesn’t support user-scalable=no.
IE interprets width=device-width as 320px.
Safari on iPad always interprets width=device-width
as 768px, although it’s 1024px wide in landscape
mode. This can be overridden with initial-scale=1,
which... triggers a zooming bug* on orientation
change.
* Patch: https:/
/github.com/scottjehl/iOS-Orientationchange-Fix

http://www.ﬂickr.com/photos/33284937@N04/4771132618/

So, how to use this?
Sniff for mobile
browsers maybe?

So, how to use this?
Sniff for mobile
browsers maybe?
Better don’t sniff.

Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00

So, avoid snifﬁng,
but if you really have to,
provide a way for users
to make corrections,
and remember their
preference.

So, avoid snifﬁng,
but if you really have to*,
provide a way for users
to make corrections,
and remember their
preference.
* always ask yourself why the mobile site should be
different from the desktop site


customer requir
ements
tim e restrictions

budget limitations

capabilities are different
different layout needed


customer requir
ements
tim e restrictions

budget limitations

capability detection


customer requir
ements
tim e restrictions

budget limitations

capability detection
viewport + media queries

Let’s talk about media queries

Media queries are conditional
hooks for applying different
CSS rules, depending on e.g.
browser width or height,
orientation, aspect ratio, etc.

Differently said, media queries
allow you to optimize your site
layout for all kinds of form factors.

Via http://mediaqueri.es/

@media screen
and (min-width: 400px)
and (max-width: 800px) {
article {
/* css for browsers with width ≥ 400px and
≤ 800px */
}
}

@media screen
and (aspect-ratio: 16/9)
and (orientation: landscape) {
article {
/* css for browsers with an aspect ratio of
16/9 and orientation is landscape */
}
}

@media screen
and (max-width: 800px) {
article {
/* css for browsers with width ≤ 800px */
}
}
@media screen and (max-width: 400px) {
article {
}
}

@media screen and (max-width: 400px) {
article {
}
}

Remember that mobile browsers have
a default viewport width (e.g. 980px).
For your mobile speciﬁc media queries
to work, you need to set the viewport!

default viewport. width=device-width.
mobile speciﬁc media mobile speciﬁc media
queries not applied. queries applied.

The viewport and media queries
combo allows you to create
just one responsive site
that works everywhere.

Q: What do I start with, desktop or mobile?

A: Do mobile ﬁrst, and build up your desktop
styles from there.

Q: Which devices, screen sizes should I design for?

A: All of them! Use content breakpoints, instead of
device breakpoints and you’ll get a long way.

http:/
/www.ﬂickr.com/photos/33284937@N04/5445675024/

Dealing with
high-PPI “Retina” screens

A pixel is not what it seems.
Thus far, we’ve talked about
pixels in terms of “CSS pixels”.
One CSS pixel can be multiple
device pixels.

HVGA portrait

almost WVGA portrait

Browser pretends
that 480px is 320px.

In most scenarios, you won’t
have to worry about this.
It just works.

However, if you want to
control PPI related stuff,
these are the things you can do:

(1)
Set the meta
viewport’s
target-densitydpi
to device-dpi.

(1)
Everything is
shown at 100%.
One CSS pixel is
equal to one device
pixel.

(2)
Use special device-
pixel-ratio media
query to serve
PPI-speciﬁc CSS.

I’ve set the
1500×1500px
background-image
to repeat every
1000px, making it
crispy again. The
rest of the content
is still scaled 150%.

caveats

-o-max/min-device-pixel-ratio uses fractions
instead of numbers. So 3/2, not 1.5.

Watch out for max/min--moz-device-pixel-ratio.

max/min-device-pixel-ratio might be dropped,
and we get a resolution media query instead.

@media screen and (min-device-pixel-ratio: 3/2) {
body {background-size: 250px;}
}
would become:

@media screen and (min-resolution: 1.5dppx) {
body {background-size: 250px;}
}

(3)
Use high-res
images to preserve
crispiness.

http:/
/www.w3.org/community/respimg/

You will be able to specify multiple image sources:

<picture>
<source media="(orientation: landscape)"
srcset="long.jpg 1x, long2.jpg 2x">
<source media="(orientation: portrait)"
srcset="tall.jpg 1x, tall2.jpg 2x">
<img src="fallback.jpg" />
</picture>

You already can specify multiple video sources:

<video>
<source type="video/webm" src="small.webm"
media="all and (max-width: 480px)">
<source type="video/webm" src="large.webm"
media="all and (min-width: 481px)" >
</video>

Sidenote about another responsive image technique:

object-ﬁt and object-position allow you to crop images

resize with
object-ﬁt and
object-position
adjustments

http:/
/dev.opera.com/articles/view/css3-object-ﬁt-object-position/

http://www.ﬂickr.com/photos/33284937@N04/5588693890/

Why do all this viewport
stuff with <meta> tags?
Isn’t this something for CSS?

http:/
/dev.w3.org/csswg/css-device-adapt/

http:/
/dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Responsive design: techniques and
tricks to prepare your websites for
the multi-screen future nt
prese Andreas Bovens - Opera Software
http://www.ﬂickr.com/photos/redux/7145995789/

Thank you!
@andreasbovens

Dosis font: http:/
/www.impallari.com/dosis
Glyphicons: http:/
/glyphicons.com/glyphicons-licenses/
Corkboard background: http:/
/psd.tutsplus.com/freebies/texture/corkboard-texture-pack/

Responsive design: techniques and tricks to prepare your websites for the multi-screen future

More Related Content

What's hot

Viewers also liked

Similar to Responsive design: techniques and tricks to prepare your websites for the multi-screen future

More from Andreas Bovens

Recently uploaded

Responsive design: techniques and tricks to prepare your websites for the multi-screen future

Editor's Notes