Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

State of the Mobile Browser

Avatar for Paul Kinlan Paul Kinlan
April 25, 2013
Programming
3
220

State of the Mobile Browser

What is the state of the Mobile Browser? Find out in this presentation for State of the Browser.

Avatar for Paul Kinlan

Paul Kinlan

April 25, 2013
Tweet

More Decks by Paul Kinlan

See All by Paul Kinlan
[this.javascript] State of Chrome
Avatar for Paul Kinlan paulkinlan
0
140
Progressive Web Apps in 10 minutes - Google for India
Avatar for Paul Kinlan paulkinlan
2
310
Be instant and engaging on the mobile web - Google Mobile for India
Avatar for Paul Kinlan paulkinlan
4
340
The future of the web on mobile? - Coldfront conf
Avatar for Paul Kinlan paulkinlan
5
56k
This is the Web Platform
Avatar for Paul Kinlan paulkinlan
5
65k
The Next Evolution of Chrome Apps - Devoxx 2012
Avatar for Paul Kinlan paulkinlan
3
410
Building Web Apps of the future. Tomorrow, today and yesterday.
Avatar for Paul Kinlan paulkinlan
32
7.4k

Other Decks in Programming

See All in Programming
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
110
Integrating WordPress and Symfony
Avatar for Alexandre Salomé alexandresalome
0
130
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
470
新卒エンジニアのプルリクエスト with AI駆動
Avatar for Yuta Fukunaga fukunaga2025
0
180
AIコーディングエージェント（Gemini）
Avatar for kondai kondai24
0
180
モデル駆動設計をやってみよう ワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
Avatar for haru860 haru860
0
230
愛される翻訳の秘訣
Avatar for Kishikawa Katsumi kishikawakatsumi
1
270
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
Avatar for Ryota Nakamura nowaki28
0
360
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
660
著者と進める！『AIと個人開発したくなったらまずCursorで要件定義だ！』
Avatar for yasuna yasunacoffee
0
120
C-Shared Buildで突破するAI Agent バックテストの壁
Avatar for po3rin po3rin
0
360
認証・認可の基本を学ぼう前編
Avatar for kaza kouyuume
0
180

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
It's Worth the Effort
Avatar for 3n 3n
187
29k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
88
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
69k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.2k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k

Transcript

  1. State of the Mobile Browser google.com/+PaulKinlan goo.gl/3LyMW

  2. Overview

  3. > 1 Billion users have a modern browser.

  4. Every device has to have a "decent" browser.

  5. The browser is still the most used application.

  6. None

  7. Rounded Corners

  8. Naive Look

  9. What is your mobile traffic?

  10. None
  11. None
  12. None

  13. > 50% "We now have more users engaging with Google+

    from mobile than desktop." - IO 2012

  14. Mobile The important bits

  15. 2 THINGS

  16. Performance Where do you look?

  17. Developers look at the .... Network (time to glass)

  18. I also think UI Jank (time to frustration)

  19. Lumpiness = Less Engagement

  20. None

  21. 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

  22. Where are the bottlenecks? • Javascript? • DOM manipulation? •

    Paint?

  23. It's not just the JS + Re-Layouts. + Re-paints +

    Decode time X X
  24. None
  25. None

  26. Go home and measure [email protected]

  27. Inconsistencies

  28. Wot Consistent Platform?

  29. 100% Support Mostly boring stuff

  30. Media Queries 100% onmobile.iwanttouse.com/#css-mediaqueries

  31. Geolocation 86% http://onmobile.iwanttouse.com/#geolocation

  32. Offline http://onmobile.iwanttouse.com/#offline-apps 86%

  33. Native developers build online in

  34. Web developers build offline in

  35. Adding offline is a lot harder than online

  36. Camera Access <input type=file accept=image/jpeg capture> Demo http://jsbin.com/avawaj/1 86%

  37. SVG 80% It would be 100% if not for Android

    < 3

  38. Flex Box It would be 100% if not for Android

    < 3 80%

  39. WebSQL Database 86%

  40. IndexedDB 3% Reaching 3% of the web you might as

    well use any API you want....

  41. Thinking about storage in terms of API's is wrong

  42. WebSockets 86% On mobile use wss (secure sockets)

  43. None

  44. Device Orientation onmobile.iwanttouse.com/#deviceorientation 67% window.ondeviceorientation = function(event) { // process

    event.alpha, event.beta and event.gamma }; jsbin.com/ofeces/1

  45. FileReader 66%

  46. requestAnimationFrame 44%

  47. Web Audio onmobile.iwanttouse.com/#audio-api 40%

  48. The following might look depressing

  49. But it's really exciting

  50. Shadow DOM onmobile.iwanttouse.com/#shadowdom 3%

  51. getUserMedia onmobile.iwanttouse.com/#stream 2% jsbin.com/iyekuc/3/quiet navigator.getUserMedia( {audio:true, video: true}, function(stream) {

    videoEl.src = URL.createObjectURL(stream); });

  52. WebRTC onmobile.iwanttouse.com/#streams 1% apprtc-m.appspot.com

  53. WebGL http://onmobile.iwanttouse.com/#webgl 1% Demo: dungeonfury.playcanvas.com

  54. CSS Filters http://onmobile.iwanttouse.com/#css-filters 43%? <style> img { -webkit-filter: blur(30px); }

    </style> http://jsbin.com/orekeb/2/

  55. CSS Custom Shaders 0%

  56. The mobile web is a rich platform

  57. Go and do moar Awesome