yahoo.com/tablet

From 2011, describes development challenges of very first yahoo.com tablet homepage.

Video: https://vimeo.com/28846971

Transcript

1. yahoo.com/tablet Matt Seeley, @innerhtml
3. 0 2 4 6 8 Q3 2010 Q4 2010 Q1 2011 7.33 4.19 3.27 iPads sold in millions Sources: http://www.apple.com/pr/library/2011/01/18results.htm l http://www.apple.com/pr/library/2010/10/18results.htm l http://www.apple.com/pr/library/2010/07/20results.html
4. Text
6. Galaxy Tab iPad
7. today module @font-face viewport topics:
8. today module
9. huge images = huge download 1024 x 400
10. <div class="story" data-img="background.jpg"> <div class="caption"> <h3>Title of the Story</h3> <p>Brief descriptio n <a href="y!news/">More</a > </p> </div> </div > ... use the simplest DOM possible
11. function set (idx, isVisible) { var story = stories.children[idx] , src; if (story) { src = story.getAttribute("data-img"); story.style.backgroundImage = isVisible ? "url(" + src + ")" : ""; } } use the simplest JavaScript possible
12. <noscript > <div class="story" style="background- image:url(background.jpg);"> <div class="caption"> <h3>Title of the Story</h3> <p>Brief descriptio n <a href="y!news/">More</a > </p> </div> </div > </noscript > ...
13. reqs HTML elems desktop 42 216 kB 1013 iPad 22 33 kB 473 iPhone 39 106 kB 1254 Steve Souders, Mobile comparison of Top 11 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#f) format(svg); } minimum CSS for iPad & Galaxy Tab
18. ouch! late loading font resources
19. "GET /gothmmed.ttf) %20format(truetype), %20url(gothmmed.svg HTTP/ 1.1" 404 < 9
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#f) 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. fi le sizes as data URIs 127K 30K /[!-~]/ character subset
24. character subset /[!-~]/ only one works
25. li { font-face: "Gotham Medium"; /* harmful for SVG! */ text-overflow:ellipsis; }
26. li { font-face: "Gotham Medium"; /* harmful for SVG! */ text-overflow:ellipsis; } Fred Flintst... Barney Rub... George Jets... Yogi Bear this is what you expect
27. li { font-face: "Gotham Medium"; /* harmful for SVG! */ text-overflow:ellipsis; } ... ... ... Yogi Bear this is what you get
28. Think twice really-really-long before using @font-face
29. viewport Source: http://www. fl ickr.com/photos/dahlstroms/4083220012/
31. 7” 9.7”
32. 600 x 1024 768 x 1024
33. 170 ppi 132 ppi
34. 10mm
35. 40px on iPad 10mm 8mm
36. 10mm 6mm 40px on Galaxy Tab
37. size input controls to be touched dots are too small to touch!
38. fi tting the viewport Source: http://www. fl ickr.com/photos/midorisyu/3124671617/
39. device-width device-height orientation
41. <meta name="viewport" content="width=device-width, maximum-scale=1, targetDensityDpi=device-dpi">
42. @medi a only scree n and (device-width: 768px ) and (orientation: portrait) { /* styles go here * / }
43. iPad device-width is always 768px
44. @medi a only scree n and (device-width: 768px ) and (orientation: portrait) { /* iPad in portrait! * / }
45. @medi a only scree n and (device-width: 768px ) and (orientation: landscape) { /* iPad in landscape! * / }
46. Galaxy Tab device-width i s 600px or 1024px
47. Keyboard Hidden Keyboard Visible Portrait 887 500 Landscape 501 235 Galaxy Tab device-height i s really broken
48. // wtf galaxy tab? screen.height == window.innerHeight Galaxy Tab screen.height i s really broken too
49. Source: http://www. fl ickr.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 & note s http://goo.gl/I2pkN http://goo.gl/DJDME SlideShar e http://goo.gl/I2pkN