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

Tools of the Mobile Web

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Matthew Crist Matthew Crist
February 29, 2012
Programming
1.4k
13

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

More Decks by Matthew Crist

See All by Matthew Crist
Rapid Design in the Real World
Avatar for Matthew Crist matthewcrist
4
1.5k
Blink & Marquee: Let's get it right this time.
Avatar for Matthew Crist matthewcrist
1
470
Users Hate Slow Websites
Avatar for Matthew Crist matthewcrist
7
470
The Business Case for Responsive
Avatar for Matthew Crist matthewcrist
2
310
Honest SEO
Avatar for Matthew Crist matthewcrist
10
780
Optimize It!
Avatar for Matthew Crist matthewcrist
2
350
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
CSS Layouting
Avatar for Matthew Crist matthewcrist
29
1.9k

Other Decks in Programming

See All in Programming
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
Avatar for starfish719 starfish719
0
5k
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
720
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
2
330
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
Avatar for yasei no otoko yasei_no_otoko
0
120
自動化したのに回らない テスト運用の壁 ―AI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
360
言葉の格闘技のススメ～紙とペンと言葉から始める、キャリアの描き方～
Avatar for 進捗ゼミ progresscicada
2
170
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.1k
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
200
Built Our Own Background Agent at LayerX
Avatar for LayerX layerx
PRO
10
5.9k
今さら聞けない .NET CLI
Avatar for tkym htkym
0
200
Hono + Inertia + React で LP を構築した話
Avatar for Yuka Ooka oukayuka
2
110
源内ハンズオン概要編
Avatar for Hideyuki Nagata hideg
0
200

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
270
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
57k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
950
It's Worth the Effort
Avatar for 3n 3n
188
29k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
520
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
370
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k

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.