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.

HTML5 apps for iOS (and probably beyond)

5,491 views

Published on

Slides for the talk I gave at SuperMondays on July 25th, 2011.

Published in: Design, Technology
  • Be the first to comment

HTML5 apps for iOS (and probably beyond)

  1. 1. HTML5 APPS FOR iOS(and probably beyond)by Andi Farraka @semiBadandi@semibad.comhttp://semibad.com ;(
  2. 2. WHY HTML5 APPS?• ‘Install’ to device• Cross-platform• Perfect for small ideas• Buildapps quickly and using simple and familiar techniques• Deploy instantly from any web space• Potential for ‘dynamic’, personalised apps
  3. 3. UNFLappABLE
  4. 4. UNFLappABLEA very simple notecardapplication to help me through myfirst time speaking!Lives at unflappable.semibad.comOptimised for use on an iPhone /iPod Touch, but should work onany device
  5. 5. UNFLappABLELogin screen makes a simple AJAXcall and retrieves data from auser’s online accountWe store the JSON object locally,and from this point we can accessthe data whenever we like – evenwithout a network connection
  6. 6. UNFLappABLE
  7. 7. UNFLappABLEThe app is a single HTML page,divided into ‘views’ which the appmoves betweenPlain Old Semantic HTML!Most of what’s going on, happensin the <head>Uses jQuery, but only so I coulddevelop it quickly
  8. 8. DESIGNING ITDesign for touch – buttonsand interactive elementsare nice and bigAlso, think abouthow a user will holdthe device – the nextbutton is placed to beeasy for a user holdingin that orientation
  9. 9. DESIGNING ITUses a few image texturesfor a smaller number ofrequests, with CSS to stylethe graphical elements
  10. 10. DESIGNING ITiOS devices now support Futuratruetype @font-face Baskervilleembedding, but havea surprisingly good Gill sansselection of decent fonts Cochinavailable by default AmericanKeep it lightweight – mobile / Typewritertablet devices are a lot lesspowerful, even at the top end
  11. 11. STYLING IT UP• CSS3 – more than just rounded corners and drop shadows!• Imageless gradients – saves file size• Multiplebackgrounds – adds texture over bg gradient background: url(/img/bg.png) top center, -webkit-gradient(linear, left top, left bottom, from(#1feee7), to(#16a6a1));
  12. 12. STYLING IT UP• Multiplebox-shadow on flat textured elements – inset light colours for highlights• Use box-sizing to change the box model of an element – useful for fluid designs
  13. 13. STYLING IT UP• Uses rgba() throughout for blended colours and transform for ‘shuffling’ the menu• :nth-child cards a bit #menu li:nth-child(3n+2) { -webkit-transform: rotate(0.7deg); } #menu li:nth-child(3n+3) { -webkit-transform: rotate(-1deg); }
  14. 14. MEDIA QUERIESServe different stylesheets based ondifferent browser / device configurations
  15. 15. MEDIA QUERIES• For this app, the main stylesheet styles the app for iPhone / small screen devices• This depends on the project, but using the simplest version is a good fallback for older mobile devices• It also means that phones download use the smallest amount of bandwidth
  16. 16. MEDIA QUERIESmain.css contains a sectionwhich restyles for landscapeorientation/* landscape mode */@media only screen and(orientation:landscape) { body { xxx: xxx }}
  17. 17. MEDIA QUERIES
  18. 18. MEDIA QUERIESbig.css is used for anydevices with a higher widththan 481px – desktopbrowsers, iPads, etc.<link href=/css/big.css rel=stylesheet media=only screen and (min-device- width: 481px) />
  19. 19. HI RESOLUTION STYLESInclude using a min-device-pixels media query toserve to high-DPI devices<link href=/css/hi-res.css rel=stylesheet media=only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) />
  20. 20. HI RESOLUTION STYLESAdd double-size graphics, then shrink them to theproper size with background-sizeRemember that these extra images take up a lotof precious spacehtml { background: url(/img/bg-hi.png) top center (50%, 50%);}footer { background-image: url(/img/wood-hi.jpg); background-size: cover;}
  21. 21. APP CACHINGYour cache manifest is a simple file that tells thebrowser to cache certain filesYou specify it using a manifest attribute on youropening <html> tag:<html manifest=‘cache.manifest’>
  22. 22. APP CACHINGThe browser will need to be told how to read it,either in the .htaccess file or using a PHPwrapper file (or similar):AddType text/cache-manifest .manifestYou could quite easily write a backend script togenerate your manifest automatically
  23. 23. APP CACHINGThis one is very simple – CACHE MANIFESTit’s just a list of files that # unflappable : cache v0.17need caching (I’ve cut /css/reset.csssome out here) /css/main.css /css/big.css /css/hi-res.cssYour file must start withCACHE MANIFEST /img/icon.png /img/bg.png /img/bg-hi.png /img/brass.jpg /img/brass-hi.jpg /img/paper.jpg /img/wood.jpg /img/wood-hi.jpg
  24. 24. APP CACHINGDifficult to debug – fails silently if missingfiles or on bad syntax. Chrome dev tools areyour friend!
  25. 25. APP CACHING5MB limit on cached apps –keep an eye on file / data sizeWhen you update, you mustchange the manifest in someway – usually incrementing aversion number is best# unflappable : cache v0.946
  26. 26. LOCAL STORAGESimple key / value pairsEssentially just persistent variables, specific toyour app / domainlocalStorage items are always strings – you cansave objects into it by using JSON.stringify()This app uses localStorage to store the JSONobject with all the presentation data in
  27. 27. LOCAL STORAGETo set a localStorage variable:localStorage.setItem(‘key’, ‘value’);To retrieve a localStorage variable:localStorage.getItem(‘key’);And then delete it permanently:localStorage.removeItem(‘key’)
  28. 28. LOCAL STORAGEFor more complex data storage, you can alsouse WebSQL – client side SQL databasesCross-browser support isn’t as wide, though iOSsupports it fine
  29. 29. META TAGS & ICONSA bunch of stuff in the <head> to set upyour app!<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes" /><link rel="icon" href="/img/icon.png" /><link rel="apple-touch-icon" href="/img/apple-icon.png" /><link rel="apple-touch-icon" href="/img/apple-icon-hi.png" sizes="114x114" />
  30. 30. META TAGS & ICONSThe viewport meta tag lets you set how iOS (andother devices) will handle resizing, scrolling, andother detail<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  31. 31. META TAGS & ICONSThe apple-mobile-web-app-capable meta tag tellsiOS to not display browser chrome when a userruns this app from the home screen<meta name="apple-mobile-web-app-capable" content="yes" />
  32. 32. META TAGS & ICONSapple-mobile-web-app-status-bar-style allows youto set the status bar colourDefault is the light bar, also black or black-translucentIf you use black-translucent, your content willhave an extra 20px to fill:
  33. 33. META TAGS & ICONSIcons specified in the <head> are used on theuser’s home screen alongside native appsUse a 72px icon for iPad, and a 114px icon forRetina displays – if you have more than one,specify which is which using the sizes attribute<link rel="icon" href="/img/icon.png" /><link rel="apple-touch-icon"href="/img/apple-icon.png" /><link rel="apple-touch-icon"href="/img/apple-icon-hi.png" sizes="114x114" />
  34. 34. WHAT NEXT?This is a very simple introduction to what HTML5apps can do in the mobile spaceA surprising amount of features are exposed tomobile browsersCanvas interactivity, video, audio, geolocation,and the accelerometer are just a few thingswhich are available for your apps
  35. 35. WHAT NEXT?Dive into HTML5 (Mark Pilgrim)http://diveintohtml5.orgThe HTML5 Doctor (various)http://html5doctor.comHTML5 Poker cheat sheet (by... me)http://semibad.com/s/poker
  36. 36. THANK YOUPlease refrain from asking difficult questions@semibadandi@semibad.comhttp://semibad.com

×