Blur The Lines - Native Feeling Web Apps

Transcript

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

   Native

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

    http://bit.ly/1oDzPLW

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”

    http://bit.ly/1j2MswD

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

    APIs

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