modev ux brian lacey presentation

HTML5Mobile FrameworksCreative 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 DesignsHaz-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 Frameworks960 Based Grid Systems, 1140 css, Blueprint.css

320 and Up

Bootstrap by Twitter, Foundation, Skelton

Sencha Touch, Jquery Mobile, Jo, MProject

HTML Mobile FrameworksOptions 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.

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 higher than many industry observers had anticipated as late as Q4 2011.

HTML5 in Mobile APPs

.m / Redirects sites

• 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.

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

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

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

Thank

You