Web & Mobile

This talk is about two important subjects and their intersection.

Transcript

1. Web &

   Mobile
   @jcemer
   

   View Slide

2. I work on
   GloboPlay.

   globo.com
   

   View Slide

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

   View Slide

4. View Slide

5. View Slide

6. Mobile devices
   are dominating
   the Internet.
   

   View Slide

7. Companies should
   focus on a mobile-
   first approach 

   for their websites.
   

   View Slide

8. https://speakerdeck.com/jcemer/
   

   View Slide

9. 1. Mobile
   Web versions
   

   View Slide

10. Facebook and
    Google are trying
    to filter and classify
    the Web.
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. Instant Articles
    are a new way for any
    publisher to create
    fast, interactive
    articles on Facebook.
    

    View Slide

16. View Slide

17. View Slide

18. The average load
    time was between 

    0 and 300 ms,
    compared with 

    3.66 seconds for
    similar web articles.
    

    View Slide

19. No ads can appear
    above the fold.
    This would help
    with rapid initial
    loading.
    

    View Slide

20. The biggest mistake
    we’ve made as a
    company is betting on
    HTML5 over native.
    @Zuckerberg, 2012
    

    View Slide

21. The key to Instant
    Articles' functionality is
    the strictly formatted
    HTML5 which is
    optimized for faster
    loading.
    

    View Slide

22. https://developers.facebook.com/

    docs/instant-articles/reference/
    

    View Slide

23. View Slide

24. 37% + reach
    22% + shares
    83% + Likes
    57% + link clicks.
    https://blog.hootsuite.com/started-using-facebook-
    instant-articles/
    

    View Slide

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
    

    View Slide

26. Users won't have
    to click out of
    Facebook to
    view an article.
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

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

    View Slide

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

    View Slide

34. View Slide

35. The big players are
    trying to restrict 

    and split the Web.
    

    View Slide

36. View Slide

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

    View Slide

38. 2. Mobile
    Apps
    

    View Slide

39. View Slide

40. View Slide

41. No-one is going to
    install an app for
    each service, your
    mobile Web
    experience has to
    be good.
    

    View Slide

42. View Slide

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/
    

    View Slide

44. Native apps 

    might survive.
    

    View Slide

45. Progressive
    Web Apps
    

    View Slide

46. Progressive Web
    Apps have the reach
    of the web, and are
    reliable, fast and
    engaging.
    

    View Slide

47. https://
    dev.opera.com/
    

    View Slide

48. View Slide

49. 1. Deliver a
    Mobile-friendly
    design™
    

    View Slide

50. View Slide

51. View Slide

52. content="width=device-width">
    

    View Slide

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

    /* Styles */ 

    }
    @media screen and (max-width: 560px) { 

    /* Styles */ 

    }
    

    View Slide

54. View Slide

55. Designing in the
    browser allows the
    designer to keep
    checking the results
    in different devices.
    

    View Slide

56. View Slide

57. 16:1
    3:4
    2:3
    

    View Slide

58. View Slide

59. 2. Apply
    progressive
    enhance
    

    View Slide

60. The app should
    works for every
    user, regardless of
    browser choice.
    

    View Slide

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

    View Slide

62. Don’t get hung up
    thinking that media
    queries are the only
    tool in your toolbox.
    @Brad Frost
    

    View Slide

63. I work for
    Booking.com,
    and we support IE 7,
    and I use flexbox.
    @Zoe Mickley
    

    View Slide

64. Start with the
    content and then
    enhance the
    experience.
    

    View Slide

65. Modernizr tells you
    what HTML, CSS and
    JavaScript features
    the user’s browser
    has to offer.
    https://modernizr.com/
    

    View Slide

66. View Slide

67. @Brad Frost
    

    View Slide

68. 3. Ensure fast
    page load
    performance
    

    View Slide

69. 0.1 second
    reacting
    instantaneously.
    @Jakob Nielsen, 1993
    

    View Slide

70. 1 second

    user will notice
    the delay.
    

    View Slide

71. 10 seconds

    users will want to
    perform other tasks
    while waiting.
    

    View Slide

72. Source:

    Forrester Consulting 

    http://bit.ly/1ttKspI
    

    View Slide

73. View Slide

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

    View Slide

75. View Slide

76. https://
    webpagetest.org/
    

    View Slide

77. 4. Use a secure
    network
    connection
    

    View Slide

78. HTTPS ensures that
    the contents of
    communications
    between the user and
    site cannot be read or
    forged.
    

    View Slide

79. View Slide

80. The page that's
    making the
    Geolocation API call
    must be served from
    a secure context.
    

    View Slide

81. https://
    letsencrypt.org/
    

    View Slide

82. 5. Create a
    manifest.json
    

    View Slide

83. Manifest enable 

    add to homescreen
    and a launch
    experience more
    comparable to
    native apps.
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

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

    View Slide

89. View Slide

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

    View Slide

91. View Slide

92. Service workers
    allow good
    caching strategies.
    

    View Slide

93. Source: https://auth0.com/blog/creating-offline-first-

    web-apps-with-service-workers/
    

    View Slide

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

    View Slide

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

    View Slide

96. View Slide

97. PWAs can also
    benefit from 

    push notifications, 

    like native apps.
    

    View Slide

98. View Slide

99. View Slide

100. https://
     pwa.rocks/
     

     View Slide

101. PWAs are in equal
     parts new Web APIs,
     design patterns, and
     marketing fluff.
     

     View Slide

102. The Web
     still matter…
     

     View Slide

103. Thank you!
     @jcemer
     

     View Slide