Leveraging Modernizr and Media Queries:

Scripts and Styles by Device Using the Same Markup

R.A.D. Mobile Frameworks

Write less-do more

Sencha Touch jQuery Mobile jQTouch Zepto.js

This presentation we will be discussing jQuery mobile, which uses HTML5 attributes to render content automatically

jQuery Mobile

Requires jQuery

Uses HTML5 attributes to render content automatically without having to write one line of javascript

Can be scripted to produce pages on the fly via AJAX

Supports multitude of mobile devices

Each “page” must have HTML5 data-role attributes page and content

The Disconnect:existing website implementation

The consensus of developer opinions has been to maintain separate site HTML for mobile, utilizing User Agent identification to serve the version based on device

Issues this causes

User Agent is unreliable, alterable, and does not scale to new devices

Contrary to responsive web design

Maintenance on two separate html sites needed for all updates

Mobile only does not scale well to desktop, looks goofy, simplistic

What about including both desk and mobile scripting, same page?

jQuery UI and jQuery mobile scripting is very different Use of Document(Ready) versus

bind(‘mobileinit’) UI script commands differ, drag and drop

, slider, touch events Imminent Collision

The PLEDGE

ONE HTML document

Based on the media query, serve the css/js files for mobile or desktop version, while content remains same

The TURN – Modernizr.js

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites

Using built-in YepNope.js micro-library as Modernizr.load(), you can now combine feature detection with media queries and conditional resource loading

Modernizr example code

Modernizr.load([{ test : Modernizr.mq(

'only screen and (min-device-width: 320px) and (max-device-width: 768px)'),

yep : [‘mobile.js', ‘mobile.css'],nope : [‘desktop.js', ‘jquery-ui.js', ‘jquery-

ui.css', 'css/desk.css' ],complete : function () {//javascript functions here

} }]);

The PRESTIEGE: site only loads files needed

Desktop

The PRESTIEGE: site only loads files needed

Tablet

The PRESTIEGE: site only loads files needed

Smartphone

Try it on for size

View presented demo page in action (requires valid netid)https://ur.nd.edu/itix12/pre.php

View an example (no login required) http://ur.nd.edu/JQM/test.html

Download above example’s source code

Contact Jay Rizzi for any questions regarding this presentation , usage, or opinions on exotic leather shoes