With mobile web browsing becoming widespread, users expect their favorite sites to "just work" on their mobile device of choice. Exciting times, especially as there are a number of new hooks in modern mobile browsers that help web designers to create compelling experiences on phones and tablets.
In my talk, I cover the various features of the viewport meta tag, and look at how they allow you to control mobile browsers' zoom behaviors. I also connect this to Opera's CSS Device Adaptation proposal, which brings this feature to CSS in the form of the @viewport rule.
Furthermore, I explain how viewport can be combined with media queries to create super-flexible layouts that work nicely across different browsing contexts and devices, and explore various strategies to dealing with different screen sizes and pixel densities.
Viewport demos can be found on http://people.opera.com/andreasb/demos/parisweb2011/
Scaling API-first – The story of a global engineering organization
Optimizing your layout for phones and tablets using viewport and media queries
1. Optimizing your layout
for phones and tablets
using viewport and
media queries
Andreas Bovens - Opera Software
2. about me
http://www.flickr.com/pho
tos/thomaaas/4783952591
/
3. about me
http://www.flickr.com/pho
tos/thomaaas/4783952591
/
4. about me
http://www.flickr.com/pho
tos/thomaaas/4783952591
/
ccio1/119626133/
om/photos/bocca
http://www.flickr.c
5. about me
http://www.flickr.com/pho
tos/thomaaas/4783952591
/
ccio1/119626133/
om/photos/bocca
http://www.flickr.c
6. about me
http://www.flickr.com/pho
tos/thomaaas/4783952591
/
ccio1/119626133/
om/photos/bocca
http://www.flickr.c
http://www.flickr.com/photos/forcery/
3511170176/
7. Bruce Lawson Daniel Davis
Divya Manian
Chris Mills
Karl Dubost
Shwetank Dixit Tiffany Brown
Andreas Bovens
Luz Caballero
Patrick Lauke
Zi Bin Cheah Vadim Makeev Mike Taylor
8. “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.
9. Coherence Syncronization Screen sharing
Device shifting Complementarity Simultaneity
These patterns should help understand and define strategies for the multiscreen world.
http://slidesha.re/kiip5y
10. “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
78. So, avoid sniffing,
but if you really have to,
provide a way for users
to make corrections.
79. 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
80. * 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
81. * 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
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
capability detection
viewport + media queries
87. @media screen and (min-width: 400px)
and (max-width: 800px) {
article {
/* css for browsers with width ≥ 400px and
≤ 800px */
}
}
88. @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 */
}
}
89. @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 */
}
}
90. @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!
91.
92. default viewport. width=device-width.
mobile specific media mobile specific media
queries not applied. queries applied.
93. The viewport and media queries
combo allows you to create just
one responsive site that works
everywhere.
94.
95. 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.
96. 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
97. 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.
109. 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%.
115. 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.
123. Craz
y stu
ff
@-o-viewport {
width: device-width;
}
@media screen and (max-device-width: 480px) {
@-o-viewport {
width: 480px;
}
}
124. Phew, that was all!
Thanks for listening :-)
@andreasbovens
Thanks to ~yc for the wooden background: http://yc.deviantart.com/art/Wood-Rays-62468397