Optimizing your layout for phones and tablets using viewport and media queries

Optimizing your layout
for phones and tablets
using viewport and
media queries
Andreas Bovens - Opera Software

about me

http://www.ﬂickr.com/pho
tos/thomaaas/4783952591
/

about me

/

ccio1/119626133/
om/photos/bocca
http://www.ﬂickr.c

about me

/

ccio1/119626133/
om/photos/bocca
http://www.ﬂickr.c

http://www.ﬂickr.com/photos/forcery/
3511170176/

Bruce Lawson Daniel Davis

Divya Manian
Chris Mills
Karl Dubost

Shwetank Dixit Tiffany Brown
Andreas Bovens

Luz Caballero

Patrick Lauke
Zi Bin Cheah Vadim Makeev Mike Taylor

“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

Coherence

small screen rendering
aka single column view

That’s all nice,
but what if I want to control
this zooming behavior?

Most commonly
though, you’ll want to
focus on controlling
page width...

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 850px,
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 stuff
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">

NB:
Make sure to use commas, not semi-colons as
delimiters between viewport values!
Remember this, especially when syntax-googling ;-)

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

So, how to use this?
Snifﬁng for mobile
browsers maybe?

So, how to use this?
Snifﬁng 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.

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

* 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
viewport + media queries
media queries

Media queries are conditional hooks
for applying different CSS rules,
depending on e.g. browser width,
screen height, 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) {
article {
border: 5px solid hsla(32, 98%, 51%, 1);
box-shadow: hsla(0, 100%, 0%, 0.5) 0 0 10px;
max-width: 800px;
margin: 0 auto 0 auto;
}
}

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

@media screen and (min-width: 400px),
not projection and (aspect-ratio: 16/9) {
article {
/* css for browsers with width ≥ 400px,
except projectors with 16/9 aspect ratio */
}
}

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

article {
}
}

Remember that mobile browsers have a
default viewport width (e.g. 850px).
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 about max/min-device-width/height?

A: There are use cases for this, but note that your
media queries won’t be applied when resizing the
browser on desktop.

Q: Should I start from small to large, or vice versa?

A: Do mobile ﬁrst, then enhance for desktop. This
will make the mobile experience faster. Deal with
old IE using a polyﬁll, such as Respond.js
https://github.com/scottjehl/Respond

Q: Which screen sizes should I design for?

A: All of them! No, seriously, don’t limit yourself.
Resize your browser window and tweak different
elements’ CSS properties when needed.

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

Device is 480px
wide, but browser
applies default
zoom of 150%.

480px/1.5 = 320px

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

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

(1)
Use high resolution
images to preserve
crispiness.

(2)
Use the device-
pixel-ratio media
query to serve
DPI-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%.

NB:
-o-max/min-device-pixel-ratio uses fractions
-webkit-max/min-device-pixel-ratio uses numbers

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

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

NB:
There are other target-densitydpi values, such as
high-dpi, medium-dpi, low-dpi, as well as actual DPI
numbers, but don’t bother with them. Just use
device-dpi, and then only if really needed.

@viewport
CSS Device Adaptation ED

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

@-o-viewport {
}
@media screen and (max-device-width: 480px) {
@-o-viewport {
width: 480px;
}
}

Craz
y stu
ff
@-o-viewport {
}
@media screen and (max-device-width: 480px) {
@-o-viewport {
width: 480px;
}
}

Phew, that was all!
Thanks for listening :-)
@andreasbovens

Thanks to ~yc for the wooden background: http://yc.deviantart.com/art/Wood-Rays-62468397

Optimizing your layout for phones and tablets using viewport and media queries

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

More from Andreas Bovens

More from Andreas Bovens (10)

Recently uploaded

Recently uploaded (20)

Optimizing your layout for phones and tablets using viewport and media queries