Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web & Mobile
Search
Jean Carlo Emer
November 19, 2016
Technology
1
180
Web & Mobile
This talk is about two important subjects and their intersection.
Jean Carlo Emer
November 19, 2016
Tweet
Share
More Decks by Jean Carlo Emer
See All by Jean Carlo Emer
Thinking metrics on React apps
jcemer
0
150
Cache em aplicações web
jcemer
0
280
Aplicações Web - um estudo sobre React
jcemer
1
180
Lapidando o Globo Play
jcemer
1
250
Desenvolvedor mobile precisa aprender Web
jcemer
1
110
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
600
Tudo o que a web (podia ser) ainda será
jcemer
8
610
Embarque App
jcemer
0
470
Componentes para a web
jcemer
15
1.1k
Other Decks in Technology
See All in Technology
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
110
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
1
1.4k
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
150
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
270
生成AI時代のデータ基盤
shibuiwilliam
1
1.2k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
240
AWSで推進するデータマネジメント
kawanago
0
680
Microsoft Fabric のネットワーク保護のアップデートについて
ryomaru0825
1
120
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
210
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
100
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
2
340
JavaScript 研修
recruitengineers
PRO
6
1.3k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Fireside Chat
paigeccino
39
3.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
We Have a Design System, Now What?
morganepeng
53
7.8k
Gamification - CAS2011
davidbonilla
81
5.4k
Unsuck your backbone
ammeep
671
58k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Code Reviewing Like a Champion
maltzj
525
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Transcript
Web & Mobile @jcemer
I work on GloboPlay. globo.com
This talk is about two important subjects and their intersection.
None
None
Mobile devices are dominating the Internet.
Companies should focus on a mobile- first approach for
their websites.
https://speakerdeck.com/jcemer/
1. Mobile Web versions
Facebook and Google are trying to filter and classify the
Web.
None
None
None
None
Instant Articles are a new way for any publisher to
create fast, interactive articles on Facebook.
None
None
The average load time was between 0 and 300
ms, compared with 3.66 seconds for similar web articles.
No ads can appear above the fold. This would help
with rapid initial loading.
The biggest mistake we’ve made as a company is betting
on HTML5 over native. @Zuckerberg, 2012
The key to Instant Articles' functionality is the strictly formatted
HTML5 which is optimized for faster loading.
https://developers.facebook.com/ docs/instant-articles/reference/
None
37% + reach 22% + shares 83% + Likes 57%
+ link clicks. https://blog.hootsuite.com/started-using-facebook- instant-articles/
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
Users won't have to click out of Facebook to view
an article.
None
None
None
None
None
AMP-HTML is simply HTML5 with a set of specifications (requirements
and restrictions).
https://github.com/ampproject/amphtml
None
The big players are trying to restrict and split
the Web.
None
AMP and Instant Articles create different versions of a same
website.
2. Mobile Apps
None
None
No-one is going to install an app for each service,
your mobile Web experience has to be good.
None
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/
Native apps might survive.
Progressive Web Apps
Progressive Web Apps have the reach of the web, and
are reliable, fast and engaging.
https:// dev.opera.com/
None
1. Deliver a Mobile-friendly design™
None
None
<meta name="viewport" content="width=device-width">
@media screen and (max-width: 1000px) { /* Styles */
} @media screen and (max-width: 560px) { /* Styles */ }
None
Designing in the browser allows the designer to keep checking
the results in different devices.
None
16:1 3:4 2:3
None
2. Apply progressive enhance
The app should works for every user, regardless of browser
choice.
Responsive Design != one size fits all. @Brad Frost
Don’t get hung up thinking that media queries are the
only tool in your toolbox. @Brad Frost
I work for Booking.com, and we support IE 7, and
I use flexbox. @Zoe Mickley
Start with the content and then enhance the experience.
Modernizr tells you what HTML, CSS and JavaScript features the
user’s browser has to offer. https://modernizr.com/
None
@Brad Frost
3. Ensure fast page load performance
0.1 second reacting instantaneously. @Jakob Nielsen, 1993
1 second user will notice the delay.
10 seconds users will want to perform other tasks while
waiting.
Source: Forrester Consulting http://bit.ly/1ttKspI
None
https://developers.google.com/ speed/pagespeed/insights/
None
https:// webpagetest.org/
4. Use a secure network connection
HTTPS ensures that the contents of communications between the user
and site cannot be read or forged.
None
The page that's making the Geolocation API call must be
served from a secure context.
https:// letsencrypt.org/
5. Create a manifest.json
Manifest enable add to homescreen and a launch experience
more comparable to native apps.
None
None
None
None
https://www.w3.org/TR/appmanifest/
None
6. Allow the app to be loaded on offline/flaky connections
None
Service workers allow good caching strategies.
Source: https://auth0.com/blog/creating-offline-first- web-apps-with-service-workers/
https:// googlechrome.github.io/ samples/service-worker/ custom-offline-page/
http://www.slideshare.net/caelumdev/ serviceworkers-sergio
None
PWAs can also benefit from push notifications, like
native apps.
None
None
https:// pwa.rocks/
PWAs are in equal parts new Web APIs, design patterns,
and marketing fluff.
The Web still matter…
Thank you! @jcemer