Web & Mobile

Transcript

1. 1.

   Web &
 Mobile @jcemer

2. 2.

   I work on GloboPlay.
 globo.com

3. 3.

   This talk is about two important subjects and their intersection.

4. 4.

   None
5. 5.

   None
6. 6.

   Mobile devices are dominating the Internet.

7. 7.

   Companies should focus on a mobile- first approach 
 for

   their websites.
8. 8.

   https://speakerdeck.com/jcemer/

9. 9.

   1. Mobile Web versions

10. 10.

    Facebook and Google are trying to filter and classify the

    Web.
11. 11.

    None
12. 12.

    None
13. 13.

    None
14. 14.

    None
15. 15.

    Instant Articles are a new way for any publisher to

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

    None
17. 17.

    None
18. 18.

    The average load time was between 
 0 and 300

    ms, compared with 
 3.66 seconds for similar web articles.
19. 19.

    No ads can appear above the fold. This would help

    with rapid initial loading.
20. 20.

    The biggest mistake we’ve made as a company is betting

    on HTML5 over native. @Zuckerberg, 2012
21. 21.

    The key to Instant Articles' functionality is the strictly formatted

    HTML5 which is optimized for faster loading.
22. 22.

    https://developers.facebook.com/
 docs/instant-articles/reference/

23. 23.

    None
24. 24.

    37% + reach 22% + shares 83% + Likes 57%

    + link clicks. https://blog.hootsuite.com/started-using-facebook- instant-articles/
25. 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. 26.

    Users won't have to click out of Facebook to view

    an article.
27. 27.

    None
28. 28.

    None
29. 29.

    None
30. 30.

    None
31. 31.

    None
32. 32.

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

    and restrictions).
33. 33.

    https://github.com/ampproject/amphtml

34. 34.

    None
35. 35.

    The big players are trying to restrict 
 and split

    the Web.
36. 36.

    None
37. 37.

    AMP and Instant Articles create different versions of a same

    website.
38. 38.

    2. Mobile Apps

39. 39.

    None
40. 40.

    None
41. 41.

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

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

    None
43. 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. 44.

    Native apps 
 might survive.

45. 45.

    Progressive Web Apps

46. 46.

    Progressive Web Apps have the reach of the web, and

    are reliable, fast and engaging.
47. 47.

    https:// dev.opera.com/

48. 48.

    None
49. 49.

    1. Deliver a Mobile-friendly design™

50. 50.

    None
51. 51.

    None
52. 52.

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

53. 53.

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

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

    None
55. 55.

    Designing in the browser allows the designer to keep checking

    the results in different devices.
56. 56.

    None
57. 57.

    16:1 3:4 2:3

58. 58.

    None
59. 59.

    2. Apply progressive enhance

60. 60.

    The app should works for every user, regardless of browser

    choice.
61. 61.

    Responsive Design != one size fits all. @Brad Frost

62. 62.

    Don’t get hung up thinking that media queries are the

    only tool in your toolbox. @Brad Frost
63. 63.

    I work for Booking.com, and we support IE 7, and

    I use flexbox. @Zoe Mickley
64. 64.

    Start with the content and then enhance the experience.

65. 65.

    Modernizr tells you what HTML, CSS and JavaScript features the

    user’s browser has to offer. https://modernizr.com/
66. 66.

    None
67. 67.

    @Brad Frost

68. 68.

    3. Ensure fast page load performance

69. 69.

    0.1 second reacting instantaneously. @Jakob Nielsen, 1993

70. 70.

    1 second
 user will notice the delay.

71. 71.

    10 seconds
 users will want to perform other tasks while

    waiting.
72. 72.

    Source:
 Forrester Consulting 
 http://bit.ly/1ttKspI

73. 73.

    None
74. 74.

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

75. 75.

    None
76. 76.

    https:// webpagetest.org/

77. 77.

    4. Use a secure network connection

78. 78.

    HTTPS ensures that the contents of communications between the user

    and site cannot be read or forged.
79. 79.

    None
80. 80.

    The page that's making the Geolocation API call must be

    served from a secure context.
81. 81.

    https:// letsencrypt.org/

82. 82.

    5. Create a manifest.json

83. 83.

    Manifest enable 
 add to homescreen and a launch experience

    more comparable to native apps.
84. 84.

    None
85. 85.

    None
86. 86.

    None
87. 87.

    None
88. 88.

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

89. 89.

    None
90. 90.

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

91. 91.

    None
92. 92.

    Service workers allow good caching strategies.

93. 93.

    Source: https://auth0.com/blog/creating-offline-first-
 web-apps-with-service-workers/

94. 94.

    https:// googlechrome.github.io/ samples/service-worker/ custom-offline-page/

95. 95.

    http://www.slideshare.net/caelumdev/ serviceworkers-sergio

96. 96.

    None
97. 97.

    PWAs can also benefit from 
 push notifications, 
 like

    native apps.
98. 98.

    None
99. 99.

    None
100. 100.

     https:// pwa.rocks/

101. 101.

     PWAs are in equal parts new Web APIs, design patterns,

     and marketing fluff.
102. 102.

     The Web still matter…

103. 103.

     Thank you! @jcemer