Web & Mobile

Transcript

1. Web &
 Mobile @jcemer

2. I work on GloboPlay.
 globo.com

3. This talk is about two important subjects and their intersection.

4. None
5. None

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.
11. None
12. None
13. None
14. None

15. Instant Articles are a new way for any publisher to

    create fast, interactive articles on Facebook.
16. None
17. None

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/

23. None

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.
27. None
28. None
29. None
30. None
31. None

32. AMP-HTML is simply HTML5 with a set of specifications (requirements

    and restrictions).

33. https://github.com/ampproject/amphtml

34. None

35. The big players are trying to restrict 
 and split

    the Web.
36. None

37. AMP and Instant Articles create different versions of a same

    website.

38. 2. Mobile Apps

39. None
40. None

41. No-one is going to install an app for each service,

    your mobile Web experience has to be good.
42. None

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/

48. None

49. 1. Deliver a Mobile-friendly design™

50. None
51. None

52. <meta name="viewport" 
 content="width=device-width">

53. @media screen and (max-width: 1000px) { 
 /* Styles */

    
 } @media screen and (max-width: 560px) { 
 /* Styles */ 
 }
54. None

55. Designing in the browser allows the designer to keep checking

    the results in different devices.
56. None

57. 16:1 3:4 2:3

58. None

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/
66. None

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

73. None

74. https://developers.google.com/ speed/pagespeed/insights/

75. None

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.
79. None

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.
84. None
85. None
86. None
87. None

88. https://www.w3.org/TR/appmanifest/

89. None

90. 6. Allow the app to be loaded on offline/flaky connections

91. None

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

96. None

97. PWAs can also benefit from 
 push notifications, 
 like

    native apps.
98. None
99. None

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