Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
yahoo.com/tablet   Matt Seeley, @innerhtml
864                                                                           7.332                                    4.1...
Text
iPad   Galaxy Tab
topics:today module@font-faceviewport
today module
1024 x 400huge images = huge download
use the simplest DOM possible<div class="story" data-img="background.jpg">  <div class="caption">    <h3>Title of the Stor...
use the simplest JavaScript possiblefunction set (idx, isVisible) {    var story = stories.children[idx],        src;    i...
<noscript>  <div class="story" style="background-image:url(background.jpg);">    <div class="caption">      <h3>Title of t...
Steve Souders, Mobile comparison of Top 11                                 reqs                        HTML               ...
@font-face
@angry-face
SVG for iPadTruetype for Android
@font-face {  font-family: "Gotham Medium";  font-weight: normal;  font-style: normal;  src: url(gothmed.ttf) format(truet...
ouch! late loading font resources
<9   "GET /gothmmed.ttf)   %20format(truetype),%20url(gothmmed.svg HTTP/          1.1" 404
@font-face {  font-family: "Gotham Medium";  font-weight: normal;  font-style: normal;  src: url(data:font/truetype;base64...
most SVG data URIs   are too long
data:image/svg+xml;charset=utf-8,<URI_ENCODED>     SVG as a data URI
/[!-~]/character subset    30K            127K file sizes as data URIs
/[!-~]/character subset      only one works
li {  font-face: "Gotham Medium";  /* harmful for SVG! */  text-overflow:ellipsis;}
this is what you expectFred Flintst...   Barney Rub...   George Jets... Yogi Bearli {  font-face: "Gotham Medium";  /* har...
this is what you get...       ...        ...        Yogi Bearli {  font-face: "Gotham Medium";  /* harmful for SVG! */  te...
Think twice really-really-long  before using @font-face
viewportSource: http://www.flickr.com/photos/dahlstroms/4083220012/
9.7”   7”
768 x 1024   600 x 1024
132 ppi   170 ppi
10mm
40px oniPad      10mm           8mm
40px onGalaxy Tab   10mm              6mm
dots are too           small to touch!size input controls   to be touched
fitting the viewport    Source: http://www.flickr.com/photos/midorisyu/3124671617/
device-height orientationdevice-width
<meta   name="viewport"   content="width=device-width,maximum-scale=1,targetDensityDpi=device-dpi">
@media    only screen    and (device-width: 768px)    and (orientation: portrait) {    /* styles go here */}
iPad device-width is always 768px
@media    only screen    and (device-width: 768px)    and (orientation: portrait) {    /* iPad in portrait! */}
@media    only screen    and (device-width: 768px)    and (orientation: landscape) {    /* iPad in landscape! */}
Galaxy Tab device-width is    600px or 1024px
Galaxy Tab device-height is      really broken             Keyboard   Keyboard              Hidden     Visible  Portrait  ...
Galaxy Tab screen.height is    really broken too// wtf galaxy tab?screen.height == window.innerHeight
Source: http://www.flickr.com/photos/krupptastic/4988425044/
When the keyboard is  open, the Galaxy Tab  matches ‘landscape’    @media queriesregardless of orientation
@media only screen  and (orientation:portrait) {  .wtf-galaxy { pitch:low; }}@media only screen  and (device-width:600px) ...
#deepbreath
@innerhtmlGalaxy Tab tests & notes   SlideSharehttp://goo.gl/I2pkN        http://goo.gl/wAMalhttp://goo.gl/DJDME
yahoo.com/tablet
yahoo.com/tablet
yahoo.com/tablet
yahoo.com/tablet
yahoo.com/tablet
yahoo.com/tablet
yahoo.com/tablet
yahoo.com/tablet
Upcoming SlideShare
Loading in …5
×

yahoo.com/tablet

3,874 views

Published on

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

Published in: Technology, Art & Photos
  • Be the first to comment

yahoo.com/tablet

  1. 1. yahoo.com/tablet Matt Seeley, @innerhtml
  2. 2. 864 7.332 4.19 3.270 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
  3. 3. Text
  4. 4. iPad Galaxy Tab
  5. 5. topics:today module@font-faceviewport
  6. 6. today module
  7. 7. 1024 x 400huge images = huge download
  8. 8. 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>...
  9. 9. use the simplest JavaScript possiblefunction set (idx, isVisible) { var story = stories.children[idx], src; if (story) { src = story.getAttribute("data-img"); story.style.backgroundImage = isVisible ? "url(" + src + ")" : ""; }}
  10. 10. <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>...
  11. 11. 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/
  12. 12. @font-face
  13. 13. @angry-face
  14. 14. SVG for iPadTruetype for Android
  15. 15. @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
  16. 16. ouch! late loading font resources
  17. 17. <9 "GET /gothmmed.ttf) %20format(truetype),%20url(gothmmed.svg HTTP/ 1.1" 404
  18. 18. @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 :(
  19. 19. most SVG data URIs are too long
  20. 20. data:image/svg+xml;charset=utf-8,<URI_ENCODED> SVG as a data URI
  21. 21. /[!-~]/character subset 30K 127K file sizes as data URIs
  22. 22. /[!-~]/character subset only one works
  23. 23. li { font-face: "Gotham Medium"; /* harmful for SVG! */ text-overflow:ellipsis;}
  24. 24. this is what you expectFred Flintst... Barney Rub... George Jets... Yogi Bearli { font-face: "Gotham Medium"; /* harmful for SVG! */ text-overflow:ellipsis;}
  25. 25. this is what you get... ... ... Yogi Bearli { font-face: "Gotham Medium"; /* harmful for SVG! */ text-overflow:ellipsis;}
  26. 26. Think twice really-really-long before using @font-face
  27. 27. viewportSource: http://www.flickr.com/photos/dahlstroms/4083220012/
  28. 28. 9.7” 7”
  29. 29. 768 x 1024 600 x 1024
  30. 30. 132 ppi 170 ppi
  31. 31. 10mm
  32. 32. 40px oniPad 10mm 8mm
  33. 33. 40px onGalaxy Tab 10mm 6mm
  34. 34. dots are too small to touch!size input controls to be touched
  35. 35. fitting the viewport Source: http://www.flickr.com/photos/midorisyu/3124671617/
  36. 36. device-height orientationdevice-width
  37. 37. <meta name="viewport" content="width=device-width,maximum-scale=1,targetDensityDpi=device-dpi">
  38. 38. @media only screen and (device-width: 768px) and (orientation: portrait) { /* styles go here */}
  39. 39. iPad device-width is always 768px
  40. 40. @media only screen and (device-width: 768px) and (orientation: portrait) { /* iPad in portrait! */}
  41. 41. @media only screen and (device-width: 768px) and (orientation: landscape) { /* iPad in landscape! */}
  42. 42. Galaxy Tab device-width is 600px or 1024px
  43. 43. Galaxy Tab device-height is really broken Keyboard Keyboard Hidden Visible Portrait 887 500 Landscape 501 235
  44. 44. Galaxy Tab screen.height is really broken too// wtf galaxy tab?screen.height == window.innerHeight
  45. 45. Source: http://www.flickr.com/photos/krupptastic/4988425044/
  46. 46. When the keyboard is open, the Galaxy Tab matches ‘landscape’ @media queriesregardless of orientation
  47. 47. @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 */}
  48. 48. #deepbreath
  49. 49. @innerhtmlGalaxy Tab tests & notes SlideSharehttp://goo.gl/I2pkN http://goo.gl/wAMalhttp://goo.gl/DJDME

×