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

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

about me

http://www.flickr.com/photos/thomaaas/4783952591/






about me


和







http://www.flickr.com/photos/boccaccio1/

119626133/

about me

和












about me



119626133/












about me



119626133/

http://www.flickr.com/photos/forcery/3511170176/










Chris Mills

Bruce Lawson Daniel Davis

Karl Dubost

Andreas BovensShwetank Dixit

Divya Manian

Luz Caballero

Tiffany Brown

Vadim Makeev Mike TaylorZi Bin CheahPatrick Lauke

Coherence Screen sharingSyncronization

Device shifting Complementarity Simultaneity

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

“Patterns for Multiscreen Strategies”

By Precious http://slidesha.re/kiip5y

http://slidesha.re/kiip5y


Coherence Screen sharingSyncronization

Device shifting Complementarity Simultaneity

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




Coherence

“A digital product or service looks and works coherently across devices. Features are optimized for specific device characteristics and usage scenarios.”




http://slidesha.re/kiip5yCoherence

show top-left and pan

small screen rendering aka single column view

zoom and pan

That’s all nice, but what if I want to control

this zooming behavior?

Answer:viewport meta

This is the viewport

(not just this)

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

... using a "viewport" meta tag in the <head> of the page.

<meta ...>

works in:

with some exceptions ;-)

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



HVGA portrait

HVGA portrait

no viewport defined in <head>, so fallback to default of 850px,which is squeezed inside 320px.

320px × 1.5 zoom

480px

HVGA

land

scap

eHV

GA la

ndsc

ape


(same result as width=device-width)



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


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

HVGA portrait

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

other stuff

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

http://www.flickr.com/photos/33284937@N04/4771132618/



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

Better don’t sniff.

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

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

So, avoid sniffing,but if you really have to,provide a way for users to make corrections.

So, avoid sniffing,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


budget limitations

customer requirementstime restrictions

different layout neededcapabilities are different


budget limitations


different layout neededcapability detection

capabilities are different


budget limitations


different layout needed

viewport + media queries

capabilities are different

capability detection

Let’s talk aboutmedia queriesviewport + 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 */ }

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

}

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

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

}

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

default viewport.mobile specific media queries not applied.

width=device-width. mobile specific media

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 first, then enhance for desktop. This will make the mobile experience faster. Deal with old IE using a polyfill, 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.

Dealing withhigh-DPI screens

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

HVGA portrait

alm

ost W

VGA

port

rait

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

480px/1.5 = 320px

alm

ost W

VGA

port

rait

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:

alm

ost W

VGA

port

rait

Use high resolution images to preserve crispiness.

(1)

alm

ost W

VGA

port

rait

Use the device-pixel-ratio media query to serve DPI-specific CSS.

(2)

alm

ost W

VGA

port

rait

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

alm

ost W

VGA

port

rait

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

(3)

alm

ost W

VGA

port

rait

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

(3)

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.

@viewportCSS Device Adaptation ED

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

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

width: 480px; }}

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

width: 480px; }}

Crazy stuff

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

@andreasbovens

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

http://yc.deviantart.com/art/Wood-Rays-62468397

http://yc.deviantart.com/art/Wood-Rays-62468397

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

Technology

hvga portrait hvga landscape

media screen

hvga portraitno viewport

browser width

controllingpage width

coherence http

pxand maxwidth

px solid hsla32