Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
150
Progressive Web Apps in 10 minutes - Google for India
Avatar for Paul Kinlan paulkinlan
2
320
Be instant and engaging on the mobile web - Google Mobile for India
Avatar for Paul Kinlan paulkinlan
4
350
The future of the web on mobile? - Coldfront conf
Avatar for Paul Kinlan paulkinlan
5
57k
This is the Web Platform
Avatar for Paul Kinlan paulkinlan
5
66k
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
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
200
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
220
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6k
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
270
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
130
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
190

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
100
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
80
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
0
80
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
690
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
680
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k

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