Web & Mobile

Web & Mobile

This talk is about two important subjects and their intersection.

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

November 19, 2016
Tweet

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