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,470

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
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,470
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • increasing sales\n\nstrong holiday sales\n\nnot optimal page\n
  • A bit behind\n\nhover actions, small controls, lost realestate\n\nno viewport tag so it&amp;#x2019;s scaled down as if it was 980px wide\n\nwent from this...\n
  • rich design\n\ntouch controls\n\nfit layout\n\noptimized\n
  • primarily an ipad site\n\nworking on galaxy version\n\nall Webkit rendering but not the same browser\n\nexcludes Tablet PCs (HP touch smart) and hybrid tablet laptops\n\nexcludes small devices 5&amp;#x201D; Dell Streaks and e-readers\n\nskills transfer\n
  • today module\nseamless\ngood first impression\n\n@font-face\ntablet\ndon&amp;#x2019;t break desktop\n\nviewport\norientation\nsize\n
  • first impression\n\nbig images / custom font\n\nseamless / responsive\n\npresents lots of content\n
  • big images\n\nlots of them\n\nlazy loading\n\nload event\n\nuser events\n
  • all div.story elements are available in the DOM onload\n\nno IMG element, assign img to story using data attribute\n\nuser can swipe to story before image is available\n\nno DOM creation on swipe\n\n\n
  • load or unload images when the user interacts with the scrollview\n\nkept it simple\n\nassumed the network is slow\n\nonly support webkit, allows us to use native sugar such as children\n\nall the code is inline, easy to copy/paste\n
  • first story repeated as fallback\n\n
  • \n
  • custom fonts\n
  • limitations\n\nbuggy browsers\n\nmakes you crazy\n
  • Desktop Safari support truetype\n\nNot Mobile Safari\n\nWebkit is just the rendering core, not the entire browser\n\nThey are different browsers same as Chrome vs Safari\n\nwhy? millions of users downloading ttf would put at&amp;t over limit!\n
  • @font-face block\n\ndescriptive rules\n\nsrc attribute accepts multiple srcs\n\nformat hint\n\nid of font in svg file\n\nmost natural way to support Android and Mobile Safari\n\ntwo problems with this approach\n
  • \n
  • second, desktop compatibility\n\n404 in logs means error\n\ntriggers alerts bad news\n\nhandle non webkit UA as fallback\n
  • avoid external request on android browser\n\nie &lt; 9 no longer cause 404\n\nie 9 ignores it\n\ndown-side is every UA downloads\n\nwhy not both\n
  • \n
  • svg can be embedded using URI encoding\n\nnot base64 -- not binary\n\nhard/impossible to find on net\n\nany URI encoded character becomes 2 to 3 chars\n\nsubsetting as an option\n
  • subset of characters \n\nno characters with accents\n\ntoo strict for editorial usage\n
  • subsetting eventually worked\n\nno punctuation\n\nnot good for international site\n\nfine for icons\n
  • \n
  • \n
  • \n
  • font-face are nice\n\nfile size\n\nnetwork request\n\nno data-uri\n\ncss rendering glitches\n
  • unique\n\nchanges orientation\n\ndifferent physical sizes\n\nsimilar resolutions\n\ndevice and user scaling\n\nfirst challenge\n\npixels are different sizes\n
  • diagonal size refresher\n
  • diagonal size refresher\n
  • resolution\n\nsame height in pixels but device is shorter\n\npixels are physically smaller\n
  • pixels per inch\n\nppi changes as we go between different monitors\n\nchange not as abrupt\n
  • minimum size of 6mm x 6mm but 10mm better\n\nassumes a ppi of 96 way below both tablets\n\nvisualize this\n
  • low end of pixel density\n
  • high end of pixel density\n\npretty small\n\neffect\n
  • clickable with a mouse\n\nbarely touchable on an ipad\n\nsilly hard to touch on a galaxy\n\nsecond thing to keep in mind\n\nfitting the viewport\n
  • orientation \n\ndevice-width\n\ndevice-height\n\nfitting the device / avoid scaling\n
  • \n
  • ipad screenshots\n\norientation\n\nperfect fit\n\nfirst step to achieve is meta viewport\n
  • size &amp; scale viewport\n\n1:1 mapping between device and css pixels\n\nscaling not necessary we fit viewport ourself\n\nandroid default scale\n\nandroid consistent value for device-width\n\nuse media queries to target devices\n
  • extension of css2 @media rules\n\nmedia type\n\nmedia features\n\nonly hides query from older user agents\n\ndefined as media attributes on link and style elements or inline using @media\n\n
  • nice\n\neasy\n\nconsistent\n
  • \n\n\n
  • iPad is easy, you&amp;#x2019;re done\n\n
  • okay...\n\niPad device size consistent\n\nforgive Galaxy Tab, makes sense\n
  • device height should always be either 1024 or 600\n\nthese numbers are actually the inner height of the window\n
  • \n
  • by this point in the day\n\nf bombs per second was through the roof\n\nGalaxy Tab is really broken\n
  • \n
  • \n
  • bug cool down exercise\n\nlaunched in a month\n\nsmall team\n\ninternet liked it\n
  • \n
  • \n
  • \n
  • tablet development is new and not without peril but now is the time to get involved\n\nthanks!\n
  • \n
  • 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

    ×