Save 37% off PRO during our Black Friday Sale! »

yahoo.com/tablet

Ab098775ed30da167fa4989980c1e2d5?s=47 Matt
March 26, 2011
6

 yahoo.com/tablet

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

Video: https://vimeo.com/28846971

Ab098775ed30da167fa4989980c1e2d5?s=128

Matt

March 26, 2011
Tweet

Transcript

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

  2. None
  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

  5. None
  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/

  30. None
  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

  40. None
  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

  53. None
  54. None
  55. None
  56. None
  57. @innerhtml Galaxy Tab tests & note s http://goo.gl/I2pkN http://goo.gl/DJDME SlideShar

    e http://goo.gl/I2pkN