Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Blur The Lines - Native Feeling Web Apps

135d480b7bf92956adcf5abd04821376?s=47 Rob Tarr
February 25, 2014

Blur The Lines - Native Feeling Web Apps

Some tips for writing web apps that feel like part of the native ecosystem


Rob Tarr

February 25, 2014


  1. Rob Tarr Blur the Lines: Write Web Apps That Feel

  2. Blur the Lines: Write web apps that look native What

    are we talking about?
  3. Building Native Web Apps

  4. Blur the Lines: Write web apps that look native Who’s

    Your Audience?
  5. Who’s Your Audience?

  6. There are some advantages to a native app

  7. A few native app cons ‣ Limited to certain devices

    - iOS vs. Android ‣ Approval processes ‣ Delay in pushing out updates ‣ Some users don’t upgrade ‣ iOS no Nitro JavaScript engine
  8. A few web app cons ‣ Limited access to APIs

    ‣ Publicity ‣ Harder to monetize
  9. Building Native Web Apps

  10. Building Native Web Apps http://bit.ly/1oDzPLW How to create a web

    app that looks like a iOS7 native app
  11. Building Native Web Apps ‣ Style ‣ Behavior ‣ Compatibility

  12. Blur the Lines: Write web apps that look native Typography

  13. iOS7 & Apple System Fonts

  14. iOS7 & Apple System Fonts -apple-system-body -apple-system-caption1 -apple-system-caption2 -apple-system-footnote -apple-system-headline

    -apple-system-short-body -apple-system-short-caption1 -apple-system-short-footnote -apple-system-short-headline -apple-system-short-subheadline bit.ly/1oDSoiS font: {
  15. iOS7 & Apple System Fonts <div style="font:-apple-system-headline"> <div style="font-size:2em">This is

    the headline…</div> </div>
  16. Safari Chrome

  17. Safari Chrome <meta name="apple-mobile-web-app- capable" content="yes">

  18. Safari Chrome <meta name="apple-mobile-web-app-status- bar-style" content=“black-translucent">

  19. Safari Web Content Guide Configuring Web Applications bit.ly/1cMoCDB

  20. Blur the Lines: Write web apps that look native Images

  21. Home Screen Icons

  22. Home Screen Icons <link rel="apple-touch-icon" href="icon.png"> <link rel="apple-touch-icon" sizes="144x144" href="/icon-144x144.png">

    ! <meta name="msapplication-TileColor" content="#73c5d3"> <meta name="msapplication-TileImage" content="icon.png"> bit.ly/1hnz18G
  23. SVGs ‣ Inline ‣ Backgrounds ‣ Data URIs ‣ Animations

  24. SVG Animations

  25. Blur the Lines: Write web apps that look native Animations

  26. Animations

  27. Navigation Animations www.thepetedesign.com/demos/jquery_wheelmenu_demo.html

  28. Navigation Animations www.thepetedesign.com/demos/jquery_wheelmenu_demo.html

  29. Animations easings.net

  30. Navigation Animations www.snowbird.com

  31. Animations forecast.io

  32. Animations forecast.io

  33. Matching ‣ http://jeremyckahn.github.io/stylie/ ‣ http://matthewlein.com/ceaser/ ‣ http://easings.net/

  34. Blur the Lines: Write web apps that look native Behavior

  35. fastclick ...mobile browsers will wait approximately 300ms from the time

    that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap. ! https://github.com/ftlabs/fastclick
  36. fastclick playthreeve.com

  37. fastclick

  38. fastclick

  39. fastclick

  40. fastclick

  41. dragging

  42. dragging http://eightmedia.github.io/hammer.js/

  43. Linking to Native Apps href=“tel:19374010915” href=“facetime:19374010915” ! href=“http://maps.apple.com? q=123+Webster+St.,+Dayton,+OH +45402”

  44. keyboards http://bit.ly/1fJluWA

  45. Blur the Lines: Write web apps that look native Performance

  46. Performance bit.ly/1mu9bTz Simple explanation: ! The Nitro Javascript engine compiles

    your code into native ARM code
  47. Performance bit.ly/1mu9bTz Apps saved to the iOS home screen don’t

    get the benefits of the Nitro JavaScript engine. BUSTED
  48. Performance Application Cache bit.ly/1bHGKAh bit.ly/1hs9ifb Service Workers mzl.la/1fkPWWa bit.ly/1edzjjz

  49. Performance Write really good code.

  50. Blur the Lines: Write web apps that look native New

  51. Geolocation JavaScript APIs

  52. Battery JavaScript APIs http://www.smartjava.org/examples/webapi-battery/

  53. Camera JavaScript APIs <input type=“file”> bit.ly/1o3Lu3w

  54. JavaScript APIs shinydemos.com/warholiser/

  55. Accelerometer JavaScript APIs isthisanearthquake.com

  56. JavaScript APIs https://developers.inkfilepicker.com/docs/web/

  57. In-App Purchases http://bit.ly/1fEcJgA

  58. In-App Purchases http://bit.ly/1fEcJgA

  59. In-App Purchases http://bit.ly/1fEcJgA

  60. Building Native Web Apps

  61. THANKS! @robtarr tarr@heysparkbox.com