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 Softwarehttp://www.flickr.com/photos/redux/7145995789/

http://www.flickr.com/photos/redux/7145995789/








@andreasbovens

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

?

small screen rendering aka single column view

zoom and pan

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

Let’s talk about the viewport mechanism

This is the viewport.

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

<meta ...>

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

This works in:

with some exceptions ;-)

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



HVGA portrait

HVGA portrait

HVGA portrait

HVGA portrait

HVGA portrait

HVGA portrait

HVGA portrait

HVGA portrait

HVGA portrait

HVGA portrait

HVGA portrait

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

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

HVGA portrait


HVGA portrait


HVGA portrait HVGA landscape

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

HVGA portrait

HVGA portrait




320px × 1.5 zoom

480px

HVGA

land

scap

eHV

GA la

ndsc

ape

<meta name="viewport" content="initial-scale=1">

HVGA portrait


HVGA portrait




(same result as width=device-width)


<meta name="viewport" content="initial-scale=0.5">





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


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

HVGA portrait

<meta name="viewport" content="width=device-width, initial-scale=1">+<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 settings

other settings




other settings




other settings




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

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.

caveats

* Patch: https://github.com/scottjehl/iOS-Orientationchange-Fix

https://github.com/scottjehl/iOS-Orientationchange-Fix

https://github.com/scottjehl/iOS-Orientationchange-Fix

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



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

Better don’t sniff.

So, how to use this?Sniff 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,and remember their preference.

* always ask yourself why the mobile site should be different from the desktop site

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

budget limitations

customer requirementstime restrictions

different layout neededcapabilities are different


budget limitations


capabilities are differentdifferent layout needed


budget limitations


capability detection

capabilities are differentdifferent layout needed


budget limitations


different layout needed

viewport + media queries

capabilities are different

capability detection


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 { /* 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. 980px).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 do I start with, desktop or mobile?

A: Do mobile first, 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.




Dealing withhigh-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

alm

ost W

VGA

port

rait

HVGA portrait

alm

ost W

VGA

port

rait

Browser pretends that 480px is 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 tocontrol PPI related stuff, these are the things you can do:

alm

ost W

VGA

port

rait

Set the meta viewport’starget-densitydpi to device-dpi.

(1)

alm

ost W

VGA

port

rait

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

(1)

alm

ost W

VGA

port

rait

Use special device-pixel-ratio media query to serve PPI-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%.

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.

@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;}}

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

alm

ost W

VGA

port

rait

Use high-res images to preserve crispiness.

(3)

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



<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 will be able to specify multiple image 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>

You already can specify multiple video sources:

Sidenote about another responsive image technique:

object-fit and object-position allow you to crop images

simple resize

resize with object-fit and object-position adjustments

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






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

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



<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

becomes

@viewport {width: device-width;zoom: 1;user-zoom: fixed;

}

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

becomes

@-o-/-ms-viewport {width: device-width;zoom: 1;user-zoom: fixed;

}

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





present






present




@andreasbovens

Corkboard background: http://psd.tutsplus.com/freebies/texture/corkboard-texture-pack/

Thank you!

Glyphicons: http://glyphicons.com/glyphicons-licenses/

Dosis font: http://www.impallari.com/dosis

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

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

http://glyphicons.com/glyphicons-licenses/

http://glyphicons.com/glyphicons-licenses/

http://www.impallari.com/dosis

http://www.impallari.com/dosis

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

Technology

websites forthe

restrictions

usersto make

interprets

responsive

media screen

restrictionsbudget

wvga portrait