This talk is about two important subjects and their intersection.

1. Web &
Mobile@jcemer

2. I work on
GloboPlay.
globo.com

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

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.

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

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/

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.

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

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

35. The big players are
trying to restrict
and split the Web.

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

38. 2. Mobile
Apps

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

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/

49. 1. Deliver a
Mobile-friendly
design™

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

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

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

57. 16:1
3:42:3

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/

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

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

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.

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.

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

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

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

97. PWAs can also
benefit from
push notifications,
like native apps.

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