Download as PDF, PPTX
Uploaded byJean Carlo Emer
Web & Mobile
Mobile devices are dominating internet usage. Companies should adopt a mobile-first approach to their websites and focus on progressive web apps that work across devices and browsers. Progressive web apps use new web technologies like service workers to provide native-app-like experiences through features like push notifications, offline support, and the ability to launch from the home screen.
Web & Mobile
- 1.
- 2.
- 3. This talk isabout two important subjects and their intersection.
- 6. Mobile devices are dominating theInternet.
- 7. Companies should focus ona mobile- first approach for their websites.
- 8.
- 9.
- 10. Facebook and Google aretrying to filter and classify the Web.
- 15. Instant Articles are anew way for any publisher to create fast, interactive articles on Facebook.
- 18. The average load timewas between 0 and 300 ms, compared with 3.66 seconds for similar web articles.
- 19. No ads canappear above the fold. This would help with rapid initial loading.
- 20. The biggest mistake we’vemade as a company is betting on HTML5 over native. @Zuckerberg, 2012
- 21. The key toInstant Articles' functionality is the strictly formatted HTML5 which is optimized for faster loading.
- 22.
- 24. 37% + reach 22%+ shares 83% + Likes 57% + link clicks.https://blog.hootsuite.com/started-using-facebook- instant-articles/
- 25. As with anypublishing platform, the value of Instant Articles greatly depends on your business model and goals. https://blog.bufferapp.com/facebook-instant-articles
- 26. Users won't have toclick out of Facebook to view an article.
- 32. AMP-HTML is simply HTML5with a set of specifications (requirements and restrictions).
- 33.
- 35. The big playersare trying to restrict and split the Web.
- 37. AMP and Instant Articlescreate different versions of a same website.
- 38.
- 41. No-one is goingto install an app for each service, your mobile Web experience has to be good.
- 43. Deepest engagement for thelongest period of time happens in Apps, so Apps matter. http://venturebeat.com/2015/09/25/wait-what-mobile-browser- traffic-is-2x-bigger-than-app-traffic-and-growing-faster/
- 44. Native apps mightsurvive.
- 45.
- 46. Progressive Web Apps havethe reach of the web, and are reliable, fast and engaging.
- 47.
- 49.
- 52.
- 53. @media screen and(max-width: 1000px) { /* Styles */ } @media screen and (max-width: 560px) { /* Styles */ }
- 55. Designing in the browserallows the designer to keep checking the results in different devices.
- 57.
- 59.
- 60. The app should worksfor every user, regardless of browser choice.
- 61. Responsive Design != one sizefits all. @Brad Frost
- 62. Don’t get hungup thinking that media queries are the only tool in your toolbox. @Brad Frost
- 63. I work for Booking.com, andwe support IE 7, and I use flexbox. @Zoe Mickley
- 64. Start with the contentand then enhance the experience.
- 65. Modernizr tells you whatHTML, CSS and JavaScript features the user’s browser has to offer. https://modernizr.com/
- 67.
- 68. 3. Ensure fast pageload performance
- 69.
- 70. 1 second user willnotice the delay.
- 71. 10 seconds users willwant to perform other tasks while waiting.
- 72.
- 74.
- 76.
- 77. 4. Use asecure network connection
- 78. HTTPS ensures that thecontents of communications between the user and site cannot be read or forged.
- 80. The page that's makingthe Geolocation API call must be served from a secure context.
- 81.
- 82.
- 83. Manifest enable addto homescreen and a launch experience more comparable to native apps.
- 88.
- 90. 6. Allow theapp to be loaded on offline/flaky connections
- 92. Service workers allow good cachingstrategies.
- 93.
- 94.
- 95.
- 97. PWAs can also benefitfrom push notifications, like native apps.
- 100.
- 101. PWAs are inequal parts new Web APIs, design patterns, and marketing fluff.
- 102.
- 103.