Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Tools of the Mobile Web

Avatar for Matthew Crist Matthew Crist
February 29, 2012
Programming
13
1.3k

Tools of the Mobile Web

The deck from my talk at the inaugural Emerging Tech Meetup at Cantina.

Avatar for Matthew Crist

Matthew Crist

February 29, 2012
Tweet

More Decks by Matthew Crist

See All by Matthew Crist
Rapid Design in the Real World
Avatar for Matthew Crist matthewcrist
4
1.4k
Blink & Marquee: Let's get it right this time.
Avatar for Matthew Crist matthewcrist
1
430
Users Hate Slow Websites
Avatar for Matthew Crist matthewcrist
7
420
The Business Case for Responsive
Avatar for Matthew Crist matthewcrist
2
250
Honest SEO
Avatar for Matthew Crist matthewcrist
10
710
Optimize It!
Avatar for Matthew Crist matthewcrist
2
300
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
CSS Layouting
Avatar for Matthew Crist matthewcrist
29
1.8k

Other Decks in Programming

See All in Programming
Github Copilotのチャット履歴ビューワーを作りました～WPF、dotnet10もあるよ～ #clrh111
Avatar for KatsuYuzu katsuyuzu
0
120
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
3.3k
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
7
2.3k
著者と進める！『AIと個人開発したくなったらまずCursorで要件定義だ！』
Avatar for yasuna yasunacoffee
0
150
JETLS.jl ─ A New Language Server for Julia
Avatar for abap34 abap34
2
440
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
Avatar for Chris Richardson cer
PRO
0
390
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
200
大規模Cloud Native環境におけるFalcoの運用
Avatar for Chihiro Hasegawa owlinux1000
0
180
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
150
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
Avatar for kazuhiro hara karad
0
130
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
170
Python札幌 LT資料
Avatar for t3tra t3tra
6
1k

Featured

See All Featured
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
550
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
680
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Design in an AI World
Avatar for tapps tapps
0
94
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
31
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
0
4.6k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
400
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
130

Transcript

  1. MOBILE Tools of the MOBILE web

  2. Native Hybrid Mobile Web Frameworks

  3. All-in-one frameworks Sencha Touch too

  4. Frameworks allow for quick development of mobile apps. <div data-role="page"

    data-theme="b"> <div data-role="header" data-theme="b"> <h1>Place Puppy Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a"> <li data-role="list-divider">Puppies</li> <li><a href="food.php?id=slide" data-transition="slide">Slide</a></li> <li><a href="effects.php?id=slideup" data-transition="slideup">Slide Up</a></li> </ul> <ul data-role="listview" data-dividertheme="e"> <li data-role="list-divider">List of Puppies</li> <li><a href="#" data-transition="slide">Another List of Puppies</a></li> </ul> </div> <div data-role="footer" data-position="fixed"> <h1>&copy; 2012 Place Puppy</h1> </div> </div> No Sencha Touch example could fit in a slide.

  5. Frameworks are great for quick development, but...

  6. ...framework apps just never feel right.

  7. If an app looks native, it should perform natively.

  8. Framework experiences tend to be choppy...

  9. ...and their scrolling sucks.

  10. If you’re going with the web, embrace the web. The

    good & bad parts. http://cri.st/EUli

  11. It’s possible to use a framework while embracing the web.

    http://bagcheck.com

  12. Hybrid Mobile Web Frameworks à la carte

  13. 50% of mobile users abandon after 6-10 seconds.

  14. Server Response Processing + Page time

  15. Every library adds processing time.

  16. Backbone.js Sammy.js Spine.js Javscript MVC Agility.js Knockout.js Angular.js Ember.js Eyeballs.js

    Client side MVC...

  17. ... can be overkill. Handle with care.

  18. Micro libraries can ensure you only use what you need.

    jQuery Zepto Zest http://cri.st/EdMn http://zeptojs.com/ > >

  19. Ender.js helps too... “Build only what you need, when you

    need it.”

  20. http://microjs.com/

  21. ~92% of mobile is webkit...

  22. ...build if it were 0%

  23. Replace JavaScript animations with CSS3...

  24. ...fall back to Javascript if you have to.

  25. CSS3’s translate3d utilizes hardware acceleration. .selector {transform: translate3d(0,0,0)}

  26. Use local storage to cache to maximize performance. window.localStorage.set(‘something’, variable);

  27. Cache manifest in HTML5 can reduce calls to the server.

    <html manifest="puppy.appcache"> ... </div> CACHE MANIFEST puppy.html puppy.css jquery.min.js puppy.js puppy.html puppy.appcache

  28. Mobile Web Frameworks à la carte Responsive Design

  29. Great for content sites and some apps.

  30. Doesn’t solve 100% of the problem.

  31. Use responsive principals for device targeted sites.

  32. Frameworks à la carte Responsive Design Fin.