HTML5 APPS FOR iOS(and probably beyond)by Andi Farraka @semiBadandi@semibad.comhttp://semibad.com                        ;(
WHY HTML5 APPS?• ‘Install’   to device• Cross-platform• Perfect     for small ideas• Buildapps quickly and using simple an...
UNFLappABLE
UNFLappABLEA very simple notecardapplication to help me through myfirst time speaking!Lives at unflappable.semibad.comOptimi...
UNFLappABLELogin screen makes a simple AJAXcall and retrieves data from auser’s online accountWe store the JSON object loc...
UNFLappABLE
UNFLappABLEThe app is a single HTML page,divided into ‘views’ which the appmoves betweenPlain Old Semantic HTML!Most of wh...
DESIGNING ITDesign for touch – buttonsand interactive elementsare nice and bigAlso, think abouthow a user will holdthe dev...
DESIGNING ITUses a few image texturesfor a smaller number ofrequests, with CSS to stylethe graphical elements
DESIGNING ITiOS devices now support          Futuratruetype @font-face              Baskervilleembedding, but havea surpri...
STYLING IT UP• CSS3 – more than just rounded corners and drop shadows!• Imageless      gradients – saves file size• Multipl...
STYLING IT UP• Multiplebox-shadow on flat textured elements – inset light colours for highlights• Use box-sizing to change ...
STYLING IT UP• Uses   rgba() throughout for blended colours           and transform for ‘shuffling’ the menu• :nth-child ca...
MEDIA QUERIESServe different stylesheets based ondifferent browser / device configurations
MEDIA QUERIES• For  this app, the main stylesheet  styles the app for iPhone / small  screen devices• This depends on the ...
MEDIA QUERIESmain.css contains a sectionwhich restyles for landscapeorientation/* landscape mode */@media only screen and(...
MEDIA QUERIES
MEDIA QUERIESbig.css is used for anydevices with a higher widththan 481px – desktopbrowsers, iPads, etc.<link href=/css/bi...
HI RESOLUTION STYLESInclude using a min-device-pixels media query toserve to high-DPI devices<link href=/css/hi-res.css re...
HI RESOLUTION STYLESAdd double-size graphics, then shrink them to theproper size with background-sizeRemember that these e...
APP CACHINGYour cache manifest is a simple file that tells thebrowser to cache certain filesYou specify it using a manifest ...
APP CACHINGThe browser will need to be told how to read it,either in the .htaccess file or using a PHPwrapper file (or simil...
APP CACHINGThis one is very simple –       CACHE MANIFESTit’s just a list of files that   # unflappable : cache v0.17need c...
APP CACHINGDifficult to debug – fails silently if missingfiles or on bad syntax. Chrome dev tools areyour friend!
APP CACHING5MB limit on cached apps –keep an eye on file / data sizeWhen you update, you mustchange the manifest in someway...
LOCAL STORAGESimple key / value pairsEssentially just persistent variables, specific toyour app / domainlocalStorage items ...
LOCAL STORAGETo set a localStorage variable:localStorage.setItem(‘key’, ‘value’);To retrieve a localStorage variable:local...
LOCAL STORAGEFor more complex data storage, you can alsouse WebSQL – client side SQL databasesCross-browser support isn’t ...
META TAGS & ICONSA bunch of stuff in the <head> to set upyour app!<meta name="viewport" content="width=device-width, initi...
META TAGS & ICONSThe viewport meta tag lets you set how iOS (andother devices) will handle resizing, scrolling, andother d...
META TAGS & ICONSThe apple-mobile-web-app-capable meta tag tellsiOS to not display browser chrome when a userruns this app...
META TAGS & ICONSapple-mobile-web-app-status-bar-style allows youto set the status bar colourDefault is the light bar, als...
META TAGS & ICONSIcons specified in the <head> are used on theuser’s home screen alongside native appsUse a 72px icon for i...
WHAT NEXT?This is a very simple introduction to what HTML5apps can do in the mobile spaceA surprising amount of features a...
WHAT NEXT?Dive into HTML5 (Mark Pilgrim)http://diveintohtml5.orgThe HTML5 Doctor (various)http://html5doctor.comHTML5 Poke...
THANK YOUPlease refrain from asking difficult questions@semibadandi@semibad.comhttp://semibad.com
Upcoming SlideShare
Loading in …5
×

HTML5 apps for iOS (and probably beyond)

5,434 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

×