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
State of the Mobile Browser
Search
Paul Kinlan
April 25, 2013
Programming
3
210
State of the Mobile Browser
What is the state of the Mobile Browser? Find out in this presentation for State of the Browser.
Paul Kinlan
April 25, 2013
Tweet
Share
More Decks by Paul Kinlan
See All by Paul Kinlan
[this.javascript] State of Chrome
paulkinlan
0
140
Progressive Web Apps in 10 minutes - Google for India
paulkinlan
2
300
Be instant and engaging on the mobile web - Google Mobile for India
paulkinlan
4
310
The future of the web on mobile? - Coldfront conf
paulkinlan
5
56k
This is the Web Platform
paulkinlan
5
65k
The Next Evolution of Chrome Apps - Devoxx 2012
paulkinlan
3
400
Building Web Apps of the future. Tomorrow, today and yesterday.
paulkinlan
32
7.3k
Other Decks in Programming
See All in Programming
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.3k
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
180
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
1k
生成AI時代のフルスタック開発
kenn
10
2.7k
型安全なDrag and Dropの設計を考える
yudppp
5
650
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
890
バリデーションライブラリ徹底比較
nayuta999999
1
410
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
620
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
570
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.1k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rails Girls Zürich Keynote
gr2m
94
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Statistics for Hackers
jakevdp
799
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing for Performance
lara
608
69k
We Have a Design System, Now What?
morganepeng
52
7.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Transcript
State of the Mobile Browser google.com/+PaulKinlan goo.gl/3LyMW
Overview
> 1 Billion users have a modern browser.
Every device has to have a "decent" browser.
The browser is still the most used application.
None
Rounded Corners
Naive Look
What is your mobile traffic?
None
None
None
> 50% "We now have more users engaging with Google+
from mobile than desktop." - IO 2012
Mobile The important bits
2 THINGS
Performance Where do you look?
Developers look at the .... Network (time to glass)
I also think UI Jank (time to frustration)
Lumpiness = Less Engagement
None
They have to hack it up like crazy Its no
longer your father's HTML. • Just a <body /> • Busting DOM Trees into iframes to create layers http://goo.gl/P90PK
Where are the bottlenecks? • Javascript? • DOM manipulation? •
Paint?
It's not just the JS + Re-Layouts. + Re-paints +
Decode time X X
None
None
Go home and measure
[email protected]
Inconsistencies
Wot Consistent Platform?
100% Support Mostly boring stuff
Media Queries 100% onmobile.iwanttouse.com/#css-mediaqueries
Geolocation 86% http://onmobile.iwanttouse.com/#geolocation
Offline http://onmobile.iwanttouse.com/#offline-apps 86%
Native developers build online in
Web developers build offline in
Adding offline is a lot harder than online
Camera Access <input type=file accept=image/jpeg capture> Demo http://jsbin.com/avawaj/1 86%
SVG 80% It would be 100% if not for Android
< 3
Flex Box It would be 100% if not for Android
< 3 80%
WebSQL Database 86%
IndexedDB 3% Reaching 3% of the web you might as
well use any API you want....
Thinking about storage in terms of API's is wrong
WebSockets 86% On mobile use wss (secure sockets)
None
Device Orientation onmobile.iwanttouse.com/#deviceorientation 67% window.ondeviceorientation = function(event) { // process
event.alpha, event.beta and event.gamma }; jsbin.com/ofeces/1
FileReader 66%
requestAnimationFrame 44%
Web Audio onmobile.iwanttouse.com/#audio-api 40%
The following might look depressing
But it's really exciting
Shadow DOM onmobile.iwanttouse.com/#shadowdom 3%
getUserMedia onmobile.iwanttouse.com/#stream 2% jsbin.com/iyekuc/3/quiet navigator.getUserMedia( {audio:true, video: true}, function(stream) {
videoEl.src = URL.createObjectURL(stream); });
WebRTC onmobile.iwanttouse.com/#streams 1% apprtc-m.appspot.com
WebGL http://onmobile.iwanttouse.com/#webgl 1% Demo: dungeonfury.playcanvas.com
CSS Filters http://onmobile.iwanttouse.com/#css-filters 43%? <style> img { -webkit-filter: blur(30px); }
</style> http://jsbin.com/orekeb/2/
CSS Custom Shaders 0%
The mobile web is a rich platform
Go and do moar Awesome