yahoo.com/tablet

No notes for slide

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&#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&#x201D; Dell Streaks and e-readers\n\nskills transfer\n

today module\nseamless\ngood first impression\n\n@font-face\ntablet\ndon&#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

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

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

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

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

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

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&#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

by this point in the day\n\nf bombs per second was through the roof\n\nGalaxy Tab is really broken\n

bug cool down exercise\n\nlaunched in a month\n\nsmall team\n\ninternet liked it\n

tablet development is new and not without peril but now is the time to get involved\n\nthanks!\n

yahoo.com/tablet

Matt Seeley

yahoo.com/tablet