Presentation from NYC Mobile Web Meetup: http://www.meetup.com/NYC-Mobile-Web/ An overview on what Mobile Web is, why it matters and what you should consider, along with an overview of HTML 5, device APIs, and Frameworks that can help you start. About Me: Nicolae Rusan, Cofounder of Frame: http://www.useframe.com/

1. Mobile Web Apps in a Nutshell

2. Who Am I?
Frame
useframe.com
Nicolae Rusan
Co-founder,
Design/JS Engineer

3. What Is Mobile Web?
What Is Mobile Web?
Optimized Sites up to Full Blown Apps
in the Browser

4. What Is Mobile Web?
What Is Mobile Web?
Design for a variety of screen sizes and
devices

5. What Is Mobile Web?
Taking advantage of device capabilities

6. What Is Mobile Web?
Handling Limitations
• Browser Memory
• Slower Networks
• Slower Hardware
• Different Capabilities

7. Why Mobile Web?
Write once, works everywhere..

8. Why Mobile Web?
Write once, works everywhere..
(Still not there yet.)

9. Why Mobile Web?
People are used to browsers
Customers
• Do they know your site?
• Specific use case: more likely
to use browser than native
app?

10. Why Mobile Web?
People are used to browsers
Developers
• Familiar technologies:
• HTML, Javascript, CSS

11. Why Mobile Web?
Not competitive with Native Apps!
Why not do both?

12. Why Mobile Web?
Some frameworks let you:
write web code => compiled to native:
e.g. PhoneGap, Appcelerator‟s Titanium
etc.

13. Why Not Mobile Web?
Native Apps still have better
performance and responsiveness.

14. Why Not Mobile Web?
The App Store is a good distribution
channel
• easier to charge

15. Why Not Mobile Web?
If you need Device APIs
e.g. Camera, Voice
- (Phone Gap Workaround)

16. Why Not Mobile Web?
It‟s good to be an app!
• Homescreen real-estate
• Push notifications

17. Frameworks

18. Touch
Full out MVC Framework w/ Touch
• built on top of Ext JS

19. Touch
Cross-browser
• Both Mobile and Desktop

20. Touch
Don‟t write HTML, glue together “Components”
• Lots of GUI Components :
• E.g. Carousel, Picker, Toolbars, Animations,
Charts and Graphs.
• Lots of Touch Events

21. Touch
Close integration with PhoneGap

22. Touch
• Reasonably well documented
• Free to use (unless you‟re making an app builder)
• Can pay for support

23. Touch
For Examples:
Sencha Kitchen Sink
http://dev.sencha.com/deploy/touch/examples/kitchensink/
RedditUI
(iPad Web App built by Frame CTO on Sencha 2.0)
http://www.redditui.com

24. Touch
Cons: • Heavy
• 365KB, >40K lines of
code, DOM Bloat
• Initial load time.

25. Touch
Cons: • Heavy
• 365KB, >40K lines of
code, DOM Bloat
• Initial load time.
• Weird Bugs, hard to
identify best practices

26. Touch
Cons: • Heavy
• 365KB, >40K lines of
code, DOM Bloat
• Initial load time.
• Weird Bugs, hard to
identify best practices
• Hard to separate
components

27. Touch
Cons: • Heavy
• 365KB, >40K lines of
code, DOM Bloat
• Initial load time.
• Weird Bugs, hard to
identify best practices
• Hard to separate
components
• Do you need all these
browsers supported?

28. Touch
Cons: • Sencha 2.0 is out in
developer preview,
working to fix many of
these issues

29. • Developed by Sencha Labs
• Not full MVC (separate from Ext JS)
• Touch events (swipe, tap)
• Some UI Components (not as may as sencha)
• Fairly performant, decent documentation, still
crashes fairly often

30. Zepto.js
• Mobile WebKit browsers + Safari, Chrome,
Firefox, Opera
• Based on jQuery syntax (familiar selectors, and
event binding)
• Very Small: 2KB – they care about speed.
• Adds Touch events:
• swipeleft, swiperight, tap, doubletap, pinchin pinchout
etc. that you can bind to elements
• e.g. $(„some selector‟).swipeLeft(function(){
});

31. Zepto.js
• Mobile WebKit browsers + Safari, Chrome,
Firefox, Opera
• Based on jQuery syntax (familiar selectors, and
event binding)
• Very Small: 2KB – they care about speed.
• Adds Touch events:
• swipeleft, swiperight, tap, doubletap, pinchin pinchout
etc. that you can bind to elements
• e.g. $(„some selector‟).swipeLeft(function(){
});

32. Zepto.js
• Mobile WebKit browsers + Safari, Chrome,
Firefox, Opera

33. Zepto.js
• Mobile WebKit browsers + Safari, Chrome,
Firefox, Opera
• Based on jQuery syntax (familiar selectors, and
event binding)

34. Zepto.js
• Mobile WebKit browsers + Safari, Chrome,
Firefox, Opera
• Based on jQuery syntax (familiar selectors, and
event binding)
• Very Small: 2KB – helps initial speed.

35. Zepto.js
• Mobile WebKit browsers + Safari, Chrome,
Firefox, Opera
• Based on jQuery syntax (familiar selectors, and
event binding)
• Very Small: 2KB – helps initial speed.
• Adds Touch events:
• swipeleft, swiperight, tap, doubletap, pinchin pinchout
etc. that you can bind to elements
• e.g. $(„some selector‟).swipeLeft(function(){
});

36. Cubiq iScroll – Matteo Spinelli
• http://cubiq.org/
• Various components + experiments you can use
• e.g. scrollable content, carousels very nice
picker, full-page carousel, pull to refresh
• Small file sizes
• good examples and explanation of code
• Used on Nike.com, Apple and others

37. Other Frameworks to Checkout
• Other Frameworks:
• DojoToolkit, jQuery Mobile,
• Compile to native apps:
• PhoneGap, Appcelerator‟s Titanium,
Rhomobile, and many others

38. How From The Ground Up
• Setup Web App mode
<meta name="viewport"
content="width=device-width,
initial-scale=1,
maximum-scale=1,
minimum-scale=1,
user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-
translucent" />
Checkout Viewporter: https://github.com/zynga/viewporter/

39. How From The Ground Up
• Built in Touch Events in Safari
touchstart: a finger is placed on a DOM element.
touchmove: a finger is dragged along a DOM element.
touchend: a finger is removed from a DOM element.
touches: a list of all fingers currently on the screen.
targetTouches: a list of fingers on the current DOM element.
changedTouches: a list of fingers involved in the current event. For
example, in a touchend event, this will be the finger that was
removed.

40. How From The Ground Up
• Built in Gesture Events
– E.g. pinch,
– Not available on all devices/browsers
• Built in Orientation Events

41. How From The Ground Up
• More than touch:
– Accelerometer + Gyroscope APIs
– GeoLocation
– Other HTML 5 + CSS 3 goodness:
• E.g. WebSockets, onhashchange
• CSS 3 transforms for hardware acceleration,
instead of javascript

42. How From The Ground Up
• More than touch:
– Accelerometer + Gyroscope APIs
– GeoLocation
– Other HTML 5 + CSS 3 goodness:
• E.g. WebSockets, onhashchange
• CSS 3 transforms for hardware acceleration,
instead of javascript

43. Resources
• Checkout Frame for an example of what’s possible:
– www.useframe.com
– Sample Store (browse on iPad) : www.shop.kindredclothiers.com
• Frameworks and Libraries:
– Zepto: http://zeptojs.com/
– Sencha: http://www.sencha.com/products/touch/
– jQTouch: http://jqtouch.com/
– jQuery Mobile: http://jquerymobile.com/
– Cubiq (iScroll): http://cubiq.org/ (also has sample of Add to Homescreen code for webapps)
– Scrollability: http://joehewitt.github.com/scrollability/
• Packaging as a Native App
– PhoneGap: http://phonegap.com/
– Titanium: http://www.appcelerator.com/
– AppMobi: http://www.appmobi.com/
• Native Browser Events/ Doing things from scratch
– Great Intro Article and Resources: http://www.html5rocks.com/en/mobile/touch.html
– Apple documentation on webkit touch events:
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/Han
dlingEvents.html
– http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript
• Good Presentations
– Performance: http://www.slideshare.net/firt/mobile-web-html5-performance-optimization?from=ss_embed
– More About Why Perf Matters and Responsive Design: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-
yiibu

44. Future of Mobile Web?
2012:
Gap between native and web shrinks
Device APIs opened up to browsers.
A winning Framework?
Write Web Straight to Native?

45. Thanks for your time 
Resources will be online soon.