16. “Desktop computers and mobile devices are so different that
the only way to offer a great user experience is to create two
separate designs — typically with fewer features for mobile.”
www.useit.com/alertbox/mobile-redesign.html
29. The Sage “... accepts the ebb and flow of things,
Nurtures them, but does not own them,”
Tao Te Ching; 2 Abstraction
www.alistapart.com/articles/dao
35. CSS 3 Media Queries
“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/
36. CSS 3 Media Queries
● builds on CSS 2.1 Media Types concept
● more granular control (not just screen, print...)
http://www.w3.org/TR/css3-mediaqueries/
37. Media features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
38. CSS 3 Media Queries
<link rel="stylesheet" ...
media="screen and (max-width:480px)" href="...">
@import url("...") screen and (max-width:480px);
@media screen and (max-width:480px) {
// insert CSS rules here
}
39. Multiple expressions – and keyword
@media screen and (min-width:180px) and (max-
width:480px) {
// screen device and width > 180px
// and width < 480px
}
40. Multiple expressions – comma separated
@media screen and (min-width:800px),
print and (min-width:20em) {
// screen device with width > 800px
// or print device with width > 20em
}
41. Negative expressions – not keyword
@media not screen and (min-width:800px) {
// not applied to screen device
// with width > 800px
}
42. Exclusive expressions – only keyword
@media only screen and (min-width:800px) {
// only applied to screen device
// with width > 800px
}
43. Multiple media queries
/* “The absence of a media query is the first
media query” Bryan Rieger */
@media screen and (max-width:480px) {
// screen device and width < 480px
}
@media screen and (max-width:980px) {
// screen device and width < 980px
}
@media screen and (min-width:980px) {
// screen device and width > 980px
}
95. CSS Device Adaptation
@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
www.w3.org/TR/css-device-adapt
only works in Opera Mobile 11+ at the moment, with -o- prefix
dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport