Blur The Lines - Native Feeling Web Apps

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

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