Upgrade to Pro — share decks privately, control downloads, hide ads and more …

yahoo.com/tablet

Matt
March 26, 2011
22

 yahoo.com/tablet

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

Video: https://vimeo.com/28846971

Matt

March 26, 2011
Tweet

Transcript

  1. 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
  2. <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
  3. 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
  4. <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 > ...
  5. 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/
  6. @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
  7. @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 :(
  8. li { font-face: "Gotham Medium"; /* harmful for SVG! */

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

    text-overflow:ellipsis; } ... ... ... Yogi Bear this is what you get
  10. @medi a only scree n and (device-width: 768px ) and

    (orientation: portrait) { /* styles go here * / }
  11. @medi a only scree n and (device-width: 768px ) and

    (orientation: portrait) { /* iPad in portrait! * / }
  12. @medi a only scree n and (device-width: 768px ) and

    (orientation: landscape) { /* iPad in landscape! * / }
  13. Keyboard Hidden Keyboard Visible Portrait 887 500 Landscape 501 235

    Galaxy Tab device-height i s really broken
  14. @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 * / }