1. HTML5
Mobile
Frameworks
Creative Director
at
BRIAN LACEY

2. http://techcrunch.com/2012/04/09/html5-features-drive-up-mobile-websites-usage-by-up-to-28/

3. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
Brad Frost

4. Progressive Enhancement
+ Mobile First

5. Launched Two HTML5 Responsive Designs
Haz-Map

6. APPS.USA.gov

7. Mobile Phone Problem:
Slower Processors and
Inconsistent Browser Capabilities

8. Frameworks Available Today
http://www.webresourcesdepot.com/a-detailed-comparison-of-mobile-frameworks/

9. Makeup of Frameworks
960 Based Grid Systems, 1140
css, Blueprint.css
320 and Up
Bootstrap by Twitter,
Foundation, Skelton
Sencha Touch, Jquery Mobile,
Jo, MProject

10. HTML Mobile Frameworks
Options Developing for Mobile
• Starbucks new
website is a good
example
• A site created
specifically for the
handset
• Facebook, Twitter,
Yahoo, Amazon
• Built with HTML5
• Wrapped to
access phone
capabilities like
the camera.

11. Mobile / Web APP Frameworks
Sencha Jquery Mobile

12. A resounding 79% of mobile developers report that they will integrate some HTML5 in
their apps in 2012. This is much higher than many industry observers had anticipated as
late as Q4 2011.
HTML5 in Mobile APPs

13. .m / Redirects sites

14. • Rapid Prototyping
• Foundation to Build Site
• Foundation for Progressive
Enhancement and Mobile
First Mentality
• 1 code base
• Device Agnostic – Works
the same on all devices
HTML Responsive
Frameworks
• Breakpoints / media queries
over a growing number of
screen sizes will drive you
crazy
• Not all phone browsers where
create equal
– therefore you have to additional
JavaScript to “normalize” the
experience across all browser.

15. HTML5 Mobile Boilerplate
• Template not a stand alone
framework
• Cross Browser Consistency
– Fallback for Blackberry, IE Mobile
• Media Query Polyfill
• Mobile Webkit Optimizations
• Optimizes Viewport Scaling
• Hides URL bar
• HTML5 Offline Caching
• Excellent Foundation to Build
on

16. Bootstrap by Twitter
• Impressive UI components
Library
• LESS Framework
• Responsive Grid
• Media Queries
• JavaScript Plugins for UI
• Foundation for Rapid
Prototyping for both Mobile
and Web

17. 320 and UP
• Mobile First Boilerplate
• Built to load assets and styles
progressively only when
needed.
• Optimize the site for what you
are viewing it on and built on
the HTML5 Boilerplate
• Contains 5 Media Query
Increments
– 480, 600, 768, 992, 1382px
• Modernizr.js and selectivizr
• Eliminates the styles/js that
you “may” and only includes
css/js that you need

18. Thank
You