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
Tools of the Mobile Web
Search
Matthew Crist
February 29, 2012
Programming
12
1.2k
Tools of the Mobile Web
The deck from my talk at the inaugural Emerging Tech Meetup at Cantina.
Matthew Crist
February 29, 2012
Tweet
Share
More Decks by Matthew Crist
See All by Matthew Crist
Rapid Design in the Real World
matthewcrist
4
1.2k
Blink & Marquee: Let's get it right this time.
matthewcrist
1
290
Users Hate Slow Websites
matthewcrist
7
310
The Business Case for Responsive
matthewcrist
1
160
Honest SEO
matthewcrist
9
440
Optimize It!
matthewcrist
1
200
BBQ
matthewcrist
80
8.8k
CSS Layouting
matthewcrist
28
1.6k
Other Decks in Programming
See All in Programming
Good first issues of TypeProf
mame
4
870
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
2.9k
HonoのRPCで真の型安全が欲しかった
kosei28
1
160
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
110
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
1
220
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
180
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
Timeline エディター拡張入門
yucchiy
0
460
How to implement a RubyVM with PHP?
memory1994
PRO
2
990
The Design of Everyday APIs - PyCon 2024
roguelynn
1
220
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
440
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
63k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Side Projects
sachag
451
41k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
4 Signs Your Business is Dying
shpigford
176
21k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Docker and Python
trallard
35
2.7k
Robots, Beer and Maslow
schacon
PRO
155
8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Raft: Consensus for Rubyists
vanstee
133
6.3k
The Cost Of JavaScript in 2023
addyosmani
21
4k
It's Worth the Effort
3n
180
27k
Transcript
MOBILE Tools of the MOBILE web
Native Hybrid Mobile Web Frameworks
All-in-one frameworks Sencha Touch too
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>© 2012 Place Puppy</h1> </div> </div> No Sencha Touch example could fit in a slide.
Frameworks are great for quick development, but...
...framework apps just never feel right.
If an app looks native, it should perform natively.
Framework experiences tend to be choppy...
...and their scrolling sucks.
If you’re going with the web, embrace the web. The
good & bad parts. http://cri.st/EUli
It’s possible to use a framework while embracing the web.
http://bagcheck.com
Hybrid Mobile Web Frameworks à la carte
50% of mobile users abandon after 6-10 seconds.
Server Response Processing + Page time
Every library adds processing time.
Backbone.js Sammy.js Spine.js Javscript MVC Agility.js Knockout.js Angular.js Ember.js Eyeballs.js
Client side MVC...
... can be overkill. Handle with care.
Micro libraries can ensure you only use what you need.
jQuery Zepto Zest http://cri.st/EdMn http://zeptojs.com/ > >
Ender.js helps too... “Build only what you need, when you
need it.”
http://microjs.com/
~92% of mobile is webkit...
...build if it were 0%
Replace JavaScript animations with CSS3...
...fall back to Javascript if you have to.
CSS3’s translate3d utilizes hardware acceleration. .selector {transform: translate3d(0,0,0)}
Use local storage to cache to maximize performance. window.localStorage.set(‘something’, variable);
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
Mobile Web Frameworks à la carte Responsive Design
Great for content sites and some apps.
Doesn’t solve 100% of the problem.
Use responsive principals for device targeted sites.
Frameworks à la carte Responsive Design Fin.