Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web & Mobile

618 views

Published on

This talk is about two important subjects and their intersection.

Published in: Technology
  • Be the first to comment

Web & Mobile

  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. Mobile devices are dominating the Internet.
  5. 5. Companies should focus on a mobile- first approach 
 for their websites.
  6. 6. https://speakerdeck.com/jcemer/
  7. 7. 1. Mobile Web versions
  8. 8. Facebook and Google are trying to filter and classify the Web.
  9. 9. Instant Articles are a new way for any publisher to create fast, interactive articles on Facebook.
  10. 10. The average load time was between 
 0 and 300 ms, compared with 
 3.66 seconds for similar web articles.
  11. 11. No ads can appear above the fold. This would help with rapid initial loading.
  12. 12. The biggest mistake we’ve made as a company is betting on HTML5 over native. @Zuckerberg, 2012
  13. 13. The key to Instant Articles' functionality is the strictly formatted HTML5 which is optimized for faster loading.
  14. 14. https://developers.facebook.com/
 docs/instant-articles/reference/
  15. 15. 37% + reach 22% + shares 83% + Likes 57% + link clicks.https://blog.hootsuite.com/started-using-facebook- instant-articles/
  16. 16. 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
  17. 17. Users won't have to click out of Facebook to view an article.
  18. 18. AMP-HTML is simply HTML5 with a set of specifications (requirements and restrictions).
  19. 19. https://github.com/ampproject/amphtml
  20. 20. The big players are trying to restrict 
 and split the Web.
  21. 21. AMP and Instant Articles create different versions of a same website.
  22. 22. 2. Mobile Apps
  23. 23. No-one is going to install an app for each service, your mobile Web experience has to be good.
  24. 24. 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/
  25. 25. Native apps 
 might survive.
  26. 26. Progressive Web Apps
  27. 27. Progressive Web Apps have the reach of the web, and are reliable, fast and engaging.
  28. 28. https:// dev.opera.com/
  29. 29. 1. Deliver a Mobile-friendly design™
  30. 30. <meta name="viewport" 
 content="width=device-width">
  31. 31. @media screen and (max-width: 1000px) { 
 /* Styles */ 
 } @media screen and (max-width: 560px) { 
 /* Styles */ 
 }
  32. 32. Designing in the browser allows the designer to keep checking the results in different devices.
  33. 33. 16:1 3:42:3
  34. 34. 2. Apply progressive enhance
  35. 35. The app should works for every user, regardless of browser choice.
  36. 36. Responsive Design != one size fits all. @Brad Frost
  37. 37. Don’t get hung up thinking that media queries are the only tool in your toolbox. @Brad Frost
  38. 38. I work for Booking.com, and we support IE 7, and I use flexbox. @Zoe Mickley
  39. 39. Start with the content and then enhance the experience.
  40. 40. Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer. https://modernizr.com/
  41. 41. @Brad Frost
  42. 42. 3. Ensure fast page load performance
  43. 43. 0.1 second reacting instantaneously. @Jakob Nielsen, 1993
  44. 44. 1 second
 user will notice the delay.
  45. 45. 10 seconds
 users will want to perform other tasks while waiting.
  46. 46. Source:
 Forrester Consulting 
 http://bit.ly/1ttKspI
  47. 47. https://developers.google.com/ speed/pagespeed/insights/
  48. 48. https:// webpagetest.org/
  49. 49. 4. Use a secure network connection
  50. 50. HTTPS ensures that the contents of communications between the user and site cannot be read or forged.
  51. 51. The page that's making the Geolocation API call must be served from a secure context.
  52. 52. https:// letsencrypt.org/
  53. 53. 5. Create a manifest.json
  54. 54. Manifest enable 
 add to homescreen and a launch experience more comparable to native apps.
  55. 55. https://www.w3.org/TR/appmanifest/
  56. 56. 6. Allow the app to be loaded on offline/flaky connections
  57. 57. Service workers allow good caching strategies.
  58. 58. Source: https://auth0.com/blog/creating-offline-first-
 web-apps-with-service-workers/
  59. 59. https:// googlechrome.github.io/ samples/service-worker/ custom-offline-page/
  60. 60. http://www.slideshare.net/caelumdev/ serviceworkers-sergio
  61. 61. PWAs can also benefit from 
 push notifications, 
 like native apps.
  62. 62. https:// pwa.rocks/
  63. 63. PWAs are in equal parts new Web APIs, design patterns, and marketing fluff.
  64. 64. The Web still matter…
  65. 65. Thank you!@jcemer

×