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

Andreas Bovens - Opera Softwarehttp://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

Coherence Screen sharingSyncronization

Device shifting Complementarity Simultaneity

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

http://slidesha.re/kiip5y

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/kiip5y

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

...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 defined in <head>, so fallback to default of 980px,which is squeezed inside 320px.

HVGA portrait

HVGA portrait HVGA landscape

HVGA portrait

320px × 1.5 zoom

HVGA portrait

(same result as width=device-width)

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

HVGA portrait

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

Important!Make sure to use commas, not semi-colons as delimiters between viewport values!

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

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

Browser pretends that 480px is 320px.

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:

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

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

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

@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.

Use high-res images to preserve crispiness.

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

You will be able to specify multiple image sources:

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/

becomes

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

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

@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

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

websites forthe

restrictions

usersto make

interprets

responsive

media screen

restrictionsbudget

wvga portrait

Technology

Designing Responsive Websites

Responsive Websites und Digital Signage

Designing for Mobile Websites using Responsive … for...

Why Mobile & Responsive Websites?

Building Better Responsive Websites

LMAtech2014 - Responsive websites: The 3 W’s of going...

Building Responsive Websites with Drupal

Websites testen mit dem HEBAtec Responsive Test

Why responsive websites?

CIRCUIT 2015 - Responsive Websites & Grid-Based Layouts

Responsive Websites Design

Responsive Web Design: Future of Websites

Test Design for Responsive Websites

How social content powers responsive design websites?

Responsive ecommerce websites

Best Responsive Designs & Websites