HTML5
Mobile
Frameworks
Creative Director
at
BRIAN LACEY
http://techcrunch.com/2012/04/09/html5-features-drive-up-mobile-websites-usage-by-up-to-28/
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
Brad Frost
Progressive Enhancement
+ Mobile First
Launched Two HTML5 Responsive Designs
Haz-Map
APPS.USA.gov
Mobile Phone Problem:
Slower Processors and
Inconsistent Browser Capabilities
Frameworks Available Today
http://www.webresourcesdepot.com/a-detailed-comparison-of-mobile-frameworks/
Makeup of Frameworks
960 Based Grid Systems, 1140
css, Blueprint.css
320 and Up
Bootstrap by Twitter,
Foundation, Skelton
...
HTML Mobile Frameworks
Options Developing for Mobile
• Starbucks new
website is a good
example
• A site created
specifical...
Mobile / Web APP Frameworks
Sencha Jquery Mobile
A resounding 79% of mobile developers report that they will integrate some HTML5 in
their apps in 2012. This is much highe...
.m / Redirects sites
• Rapid Prototyping
• Foundation to Build Site
• Foundation for Progressive
Enhancement and Mobile
First Mentality
• 1 cod...
HTML5 Mobile Boilerplate
• Template not a stand alone
framework
• Cross Browser Consistency
– Fallback for Blackberry, IE ...
Bootstrap by Twitter
• Impressive UI components
Library
• LESS Framework
• Responsive Grid
• Media Queries
• JavaScript Pl...
320 and UP
• Mobile First Boilerplate
• Built to load assets and styles
progressively only when
needed.
• Optimize the sit...
Thank
You
Upcoming SlideShare
Loading in...5
×

Modev ux brian lacey presentation

586

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
586
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Modev ux brian lacey presentation

  1. 1. HTML5 Mobile Frameworks Creative Director at BRIAN LACEY
  2. 2. http://techcrunch.com/2012/04/09/html5-features-drive-up-mobile-websites-usage-by-up-to-28/
  3. 3. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/ Brad Frost
  4. 4. Progressive Enhancement + Mobile First
  5. 5. Launched Two HTML5 Responsive Designs Haz-Map
  6. 6. APPS.USA.gov
  7. 7. Mobile Phone Problem: Slower Processors and Inconsistent Browser Capabilities
  8. 8. Frameworks Available Today http://www.webresourcesdepot.com/a-detailed-comparison-of-mobile-frameworks/
  9. 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. 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. 11. Mobile / Web APP Frameworks Sencha Jquery Mobile
  12. 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. 13. .m / Redirects sites
  14. 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. 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. 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. 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. 18. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×