$30 off During Our Annual Pro Sale. View Details »

Web & Mobile

Web & Mobile

This talk is about two important subjects and their intersection.

Jean Carlo Emer

November 19, 2016
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

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