Tablet development is new. New devices are coming fast and vary in quality. While a lot of our existing methodologies apply, we are discovering new tools and tricks. Topics to include cover: - network and runtime performance - @font-face, enemy of man - viewport handling across desktop, iPad and Galaxy Tab What you'll learn from this talk: - best practices to deliver UIs to multiple viewports - @font-face & @media rule usage across iPad and Galaxy Tab - Galaxy Tab bugs and work arounds

1. yahoo.com/tablet
Matt Seeley, @innerhtml

3. 8
6
4
7.33
2 4.19
3.27
0
Q3 2010 Q4 2010 Q1 2011
iPads sold in millions
Sources: http://www.apple.com/pr/library/2011/01/18results.html
http://www.apple.com/pr/library/2010/10/18results.html
http://www.apple.com/pr/library/2010/07/20results.html

4. Text

6. iPad Galaxy Tab

7. topics:
today module
@font-face
viewport

8. today module

9. 1024 x 400
huge images = huge download

10. use the simplest DOM possible
<div class="story" data-img="background.jpg">
<div class="caption">
<h3>Title of the Story</h3>
<p>Brief description
<a href="y!news/">More</a>
</p>
</div>
</div>
...

11. use the simplest JavaScript possible
function set (idx, isVisible) {
var story = stories.children[idx],
src;
if (story) {
src = story.getAttribute("data-img");
story.style.backgroundImage = isVisible ?
"url(" + src + ")" : "";
}
}

12. <noscript>
<div class="story" style="background-
image:url(background.jpg);">
<div class="caption">
<h3>Title of the Story</h3>
<p>Brief description
<a href="y!news/">More</a>
</p>
</div>
</div>
</noscript>
...

13. Steve Souders, Mobile comparison of Top 11
reqs HTML elems
desktop 42 216 kB 1013
iPad 22 33 kB 473
iPhone 39 106 kB 1254
Source: http://www.stevesouders.com/blog/2011/03/14/mobile-comparison-of-top-11/

14. @font-face

15. @angry-face

16. SVG for iPad
Truetype for Android

17. @font-face {
font-family: "Gotham Medium";
font-weight: normal;
font-style: normal;
src: url(gothmed.ttf) format(truetype),
url(gothmed.svg#id) format(svg);
}
minimum CSS for iPad & Galaxy Tab

18. ouch! late loading font resources

19. <9
"GET /gothmmed.ttf)
%20format(truetype),
%20url(gothmmed.svg HTTP/
1.1" 404

20. @font-face {
font-family: "Gotham Medium";
font-weight: normal;
font-style: normal;
src: url(data:font/truetype;base64,DATA)
format(truetype),
url(gothmed.svg#id) format(svg);
}
use a data URI, just one :(

21. most SVG data URIs
are too long

22. data:image/svg+xml;charset=utf-8,
<URI_ENCODED>
SVG as a data URI

23. /[!-~]/
character subset
30K 127K
file sizes as data URIs

24. /[!-~]/
character subset
only one works

25. li {
font-face: "Gotham Medium";
/* harmful for SVG! */
text-overflow:ellipsis;
}

26. this is what you expect
Fred Flintst... Barney Rub... George Jets... Yogi Bear
li {
font-face: "Gotham Medium";
/* harmful for SVG! */
text-overflow:ellipsis;
}

27. this is what you get
... ... ... Yogi Bear
li {
font-face: "Gotham Medium";
/* harmful for SVG! */
text-overflow:ellipsis;
}

28. Think twice really-really-long
before using @font-face

29. viewport
Source: http://www.flickr.com/photos/dahlstroms/4083220012/

31. 9.7” 7”

32. 768 x 1024 600 x 1024

33. 132 ppi 170 ppi

34. 10mm

35. 40px on
iPad 10mm
8mm

36. 40px on
Galaxy Tab 10mm
6mm

37. dots are too
small to touch!
size input controls
to be touched

38. fitting the viewport
Source: http://www.flickr.com/photos/midorisyu/3124671617/

39. device-height
orientation
device-width

41. <meta
name="viewport"
content="width=device-width,
maximum-scale=1,
targetDensityDpi=device-dpi">

42. @media
only screen
and (device-width: 768px)
and (orientation: portrait) {
/* styles go here */
}

43. iPad device-width
is always 768px

44. @media
only screen
and (device-width: 768px)
and (orientation: portrait) {
/* iPad in portrait! */
}

45. @media
only screen
and (device-width: 768px)
and (orientation: landscape) {
/* iPad in landscape! */
}

46. Galaxy Tab device-width is
600px or 1024px

47. Galaxy Tab device-height is
really broken
Keyboard Keyboard
Hidden Visible
Portrait 887 500
Landscape 501 235

48. Galaxy Tab screen.height is
really broken too
// wtf galaxy tab?
screen.height == window.innerHeight

49. Source: http://www.flickr.com/photos/krupptastic/4988425044/

50. When the keyboard is
open, the Galaxy Tab
matches ‘landscape’
@media queries
regardless of orientation

51. @media only screen
and (orientation:portrait) {
.wtf-galaxy { pitch:low; }
}
@media only screen
and (device-width:600px) {
/* Galaxy Tab portrait */
}
@media only screen
and (device-width:1024px) {
/* Galaxy Tab landscape */
}

52. #deepbreath

57. @innerhtml
Galaxy Tab tests & notes SlideShare
http://goo.gl/I2pkN http://goo.gl/wAMal
http://goo.gl/DJDME