This document discusses making websites responsive for different devices. It covers using CSS media queries to apply different styling based on screen width, height, and other device features. It also covers using viewport meta tags to control zooming and scaling on mobile browsers. The goal is to build sites that can adapt their layouts across various devices like phones, tablets, and desktops.

1. Adaptive layouts
MAKING YOUR SITE CROSS-DEVICE FRIENDLY
Patrick H. Lauke / standards>next / Manchester / 23 March 2011

2. we need a site that
works on iPhone

3. ...works on iPhone...
oh, and iPad

4. “remove iPhone from ass”
Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html

5. make your site work on all
(most) mobile devices

7. don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/

8. CSS 2 Media Types

9. Media types
all braille
embossed handheld
print projection
screen speech
tty tv

10. CSS 2.1 Media Types
<link rel="stylesheet" ...
media="print" href="...">
@import url("...") print;
@media print {
// insert CSS rules here
}

11. CSS 3 Media Queries
“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/

12. CSS 3 Media Queries
●
build and extend CSS 2.1 Media Types
●
more granular control of capabilities
http://www.w3.org/TR/css3-mediaqueries/

13. Media features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

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

15. Multiple expressions – and keyword
@media screen and (min-width:180px) and (max-
width:480px) {
// screen device and width > 180px
// and width < 480px
}

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

17. Negative expressions – not keyword
@media not screen and (min-width:800px) {
// not applied to screen device
// with width > 800px
}

18. Negative expressions – only keyword
@media only screen and (min-width:800px) {
// only applied to screen device
// with width > 800px
}

19. Multiple media queries
@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
}

20. www.alistapart.com/articles/responsive-web-design

21. http://mediaqueri.es

22. http://mediaqueri.es

23. http://mediaqueri.es

24. http://mediaqueri.es

25. www.themaninblue.com/writing/perspective/2004/09/21

26. viewport meta

27. physical vs virtual pixels

29. mobile devices lie
“to lie is to state something with disregard to the truth with the intention
that people will accept the statement as truth” thanks wikipedia

30. viewport meta
suggests sizing to mobile browser

31. viewport meta
<meta name="viewport"
content="width=480">
<meta name="viewport"
content="width=480, user-scalable=no">
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

32. Viewport properties
width initial-scale
height minimum-scale
user-scalable maximum-scale

35. <meta name="viewport" content="width=550">

38. CSS Device Adaptation
@viewport {
width: device-width;
}
@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
dev.w3.org/csswg/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

39. Viewport properties
width / min-width / max-width user-zoom
height / min-height / max-height orientation
zoom / min-zoom / max-zoom

40. high-dpi devices
...is where my brain starts to melt
dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
developer.android.com/reference/android/webkit/WebView.html

41. www.opera.com/developer
patrick.lauke@opera.com