Benchmarking of Responsive Websites - UEM Sunrise Websites - [ February 2016 ]
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
-
Upload
andreas-bovens -
Category
Technology
-
view
118 -
download
0
description
Transcript of 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/
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...
<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
<meta name="viewport" content="width=320">
HVGA portrait
<meta name="viewport" content="width=320">
HVGA portrait HVGA landscape
<meta name="viewport" content="width=device-width">
HVGA portrait
HVGA portrait
<meta name="viewport" content="width=device-width">
HVGA portrait HVGA landscape
<meta name="viewport" content="width=device-width">
320px × 1.5 zoom
480px
HVGA
land
scap
eHV
GA la
ndsc
ape
<meta name="viewport" content="initial-scale=1">
HVGA portrait
<meta name="viewport" content="initial-scale=1">
HVGA portrait
<meta name="viewport" content="initial-scale=1">
HVGA portrait HVGA landscape
<meta name="viewport" content="initial-scale=1">
(same result as width=device-width)
HVGA portrait HVGA landscape
<meta name="viewport" content="initial-scale=0.5">
HVGA portrait HVGA landscape
<meta name="viewport" content="initial-scale=2">
HVGA portrait HVGA landscape
<meta name="viewport" content="width=device-width">
+<div style="width: 600px">
<meta name="viewport" content="width=device-width">
+<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
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
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
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">
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
* always ask yourself why the mobile site should be different from the desktop site
budget limitations
customer requirementstime restrictions
capabilities are differentdifferent layout needed
* always ask yourself why the mobile site should be different from the desktop site
budget limitations
customer requirementstime restrictions
capability detection
capabilities are differentdifferent layout needed
* always ask yourself why the mobile site should be different from the desktop site
budget limitations
customer requirementstime restrictions
different layout needed
viewport + media queries
capabilities are different
capability detection
* always ask yourself why the mobile site should be different from the desktop site
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.
http://www.flickr.com/photos/33284937@N04/5445675024/
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/
http://www.flickr.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/
<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/
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
present
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
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