Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.
I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
1. Responsive design: techniques and
tricks to prepare your websites for
the multi-screen future Andreas Bovens - Opera Software
http://www.flickr.com/photos/redux/7145995789/
2. Responsive design: techniques and
tricks to prepare your websites for
the multi-screen future Andreas Bovens - Opera Software
http://www.flickr.com/photos/redux/7145995789/
4. “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.
5. Coherence Syncronization Screen sharing
Device shifting Complementarity Simultaneity
These patterns should help understand and define strategies for the multiscreen world.
http:/
/slidesha.re/kiip5y
6. “A digital product or
service looks and
works coherently
across devices.
Features are
optimized for
specific device
characteristics and
usage scenarios.”
Coherence
http:/
/slidesha.re/kiip5y
62. 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">
63. caveats
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.
* Patch: https:/
/github.com/scottjehl/iOS-Orientationchange-Fix
80. So, avoid sniffing,
but if you really have to,
provide a way for users
to make corrections,
and remember their
preference.
81. 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
82. * 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
83. * 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
84. * 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
capability detection
85. * 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
capability detection
viewport + media queries
87. Media queries are conditional
hooks for applying different
CSS rules, depending on e.g.
browser width or height,
orientation, aspect ratio, etc.
88. Differently said, media queries
allow you to optimize your site
layout for all kinds of form factors.
Via http://mediaqueri.es/
89. @media screen
and (min-width: 400px)
and (max-width: 800px) {
article {
/* css for browsers with width ≥ 400px and
≤ 800px */
}
}
90. @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 */
}
}
91. @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 */
}
}
92. @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!
93.
94. default viewport. width=device-width.
mobile specific media mobile specific media
queries not applied. queries applied.
95. The viewport and media queries
combo allows you to create
just one responsive site
that works everywhere.
96. Q: What do I start with, desktop or mobile?
A: Do mobile first, and build up your desktop
styles from there.
97. 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.
110. almost WVGA portrait
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%.
113. max/min-device-pixel-ratio might be dropped,
and we get a resolution media query instead.
@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;}
}
117. You will be able to specify multiple image sources:
<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>
118. You already can specify multiple video 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>
119. Sidenote about another responsive image technique:
object-fit and object-position allow you to crop images
129. Responsive design: techniques and
tricks to prepare your websites for
the multi-screen future Andreas Bovens - Opera Software
http://www.flickr.com/photos/redux/7145995789/
130. Responsive design: techniques and
tricks to prepare your websites for
the multi-screen future nt
prese Andreas Bovens - Opera Software
http://www.flickr.com/photos/redux/7145995789/