Random thoughts on making your site cross-device friendly standards>next / London / 28 May 2011

1. Adaptive layouts
RANDOM THOUGHTS ON MAKING YOUR SITE CROSS-DEVICE FRIENDLY
Patrick H. Lauke / standards>next / London / 28 May 2011

2. we need a site that
works on mobile

3. we need a site that
works on iPhone

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

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

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

9. what exactly is a
“mobile device”?

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

13. CSS 2 Media Types

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

15. media="handheld"

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

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

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

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

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

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

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

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

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

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

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

27. http://mediaqueri.es

28. http://mediaqueri.es

29. http://mediaqueri.es

30. http://mediaqueri.es

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

32. “not a magic bullet...”

33. viewport meta

34. physical vs virtual pixels

36. mobile devices lie
(to better serve the user)

40. viewport meta
suggests sizing to mobile browser

41. viewport meta
<meta name="viewport" content="width=320">
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

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

43. <meta name="viewport" content="width=480">

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

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

48. <meta name="viewport" content="width=550,
maximum-scale=1.0">

49. maximum-scale=1.0
breaks zooming!

50. if (navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i)) {
var viewportmeta =
document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-
scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart',
function() {
viewportmeta.content = 'width=device-width, minimum-
scale=0.25, maximum-scale=1.6';
}, false);
}
}
adactio.com/journal/4470

51. device-width to the rescue?

53. in Mobile Safari only: device-width always
same (portrait/landscape) … WTF?

54. high-dpi devices lie
about device-width

56. <meta name="viewport" content="width=device-width">

58. 480px / 160% = 300px

59. <meta name="viewport" content="width=device-width,
target-densitydpi=device-dpi">

60. CSS Device Adaptation
@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
dev.w3.org/csswg/css-device-adapt
Currently only in Opera Mobile 11 with -o- prefix
dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport

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

62. @media + @viewport
@media screen and (max-device-width: 550px) {
@-o-viewport {
width: 550px;
}
}
only apply viewport width fixing on small-screen devices

63. @viewport
@-o-viewport {
width: 550px auto;
}
minimum and maximum width

64. BUG ALERT: Opera currently not re-running Media Queries on portrait/landscape switch

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