Web & Mobile

This talk is about two important subjects and their intersection.

Transcript

1. Web &
 Mobile @jcemer
2. I work on GloboPlay.
 globo.com
3. This talk is about two important subjects and their intersection.
6. Mobile devices are dominating the Internet.
7. Companies should focus on a mobile- first approach 
 for their websites.
8. https://speakerdeck.com/jcemer/
9. 1. Mobile Web versions
10. Facebook and Google are trying to filter and classify the Web.
15. Instant Articles are a new way for any publisher to create fast, interactive articles on Facebook.
18. The average load time was between 
 0 and 300 ms, compared with 
 3.66 seconds for similar web articles.
19. No ads can appear above the fold. This would help with rapid initial loading.
20. The biggest mistake we’ve made as a company is betting on HTML5 over native. @Zuckerberg, 2012
21. The key to Instant Articles' functionality is the strictly formatted HTML5 which is optimized for faster loading.
22. https://developers.facebook.com/
 docs/instant-articles/reference/
24. 37% + reach 22% + shares 83% + Likes 57% + link clicks. https://blog.hootsuite.com/started-using-facebook- instant-articles/
25. As with any publishing 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 to click out of Facebook to view an article.
32. AMP-HTML is simply HTML5 with a set of specifications (requirements and restrictions).
33. https://github.com/ampproject/amphtml
35. The big players are trying to restrict 
 and split the Web.
37. AMP and Instant Articles create different versions of a same website.
38. 2. Mobile Apps
41. No-one is going to install an app for each service, your mobile Web experience has to be good.
43. Deepest engagement for the longest 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 
 might survive.
45. Progressive Web Apps
46. Progressive Web Apps have the reach of the web, and are reliable, fast and engaging.
47. https:// dev.opera.com/
49. 1. Deliver a Mobile-friendly design™
52. <meta name="viewport" 
 content="width=device-width">
53. @media screen and (max-width: 1000px) { 
 /* Styles */ 
 } @media screen and (max-width: 560px) { 
 /* Styles */ 
 }
55. Designing in the browser allows the designer to keep checking the results in different devices.
57. 16:1 3:4 2:3
59. 2. Apply progressive enhance
60. The app should works for every user, regardless of browser choice.
61. Responsive Design != one size fits all. @Brad Frost
62. Don’t get hung up thinking that media queries are the only tool in your toolbox. @Brad Frost
63. I work for Booking.com, and we support IE 7, and I use flexbox. @Zoe Mickley
64. Start with the content and then enhance the experience.
65. Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer. https://modernizr.com/
67. @Brad Frost
68. 3. Ensure fast page load performance
69. 0.1 second reacting instantaneously. @Jakob Nielsen, 1993
70. 1 second
 user will notice the delay.
71. 10 seconds
 users will want to perform other tasks while waiting.
72. Source:
 Forrester Consulting 
 http://bit.ly/1ttKspI
74. https://developers.google.com/ speed/pagespeed/insights/
76. https:// webpagetest.org/
77. 4. Use a secure network connection
78. HTTPS ensures that the contents of communications between the user and site cannot be read or forged.
80. The page that's making the Geolocation API call must be served from a secure context.
81. https:// letsencrypt.org/
82. 5. Create a manifest.json
83. Manifest enable 
 add to homescreen and a launch experience more comparable to native apps.
88. https://www.w3.org/TR/appmanifest/
90. 6. Allow the app to be loaded on offline/flaky connections
92. Service workers allow good caching strategies.
93. Source: https://auth0.com/blog/creating-offline-first-
 web-apps-with-service-workers/
94. https:// googlechrome.github.io/ samples/service-worker/ custom-offline-page/
95. http://www.slideshare.net/caelumdev/ serviceworkers-sergio
97. PWAs can also benefit from 
 push notifications, 
 like native apps.
100. https:// pwa.rocks/
101. PWAs are in equal parts new Web APIs, design patterns, and marketing fluff.
102. The Web still matter…
103. Thank you! @jcemer