Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply


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. …

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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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’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” Dell Streaks and e-readers\n\nskills transfer\n
  • today module\nseamless\ngood first impression\n\n@font-face\ntablet\ndon’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&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 < 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 & 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’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
  • Transcript

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