Scripts and Styles by Device Using the Same Markup

1. Leveraging
Modernizr and
Media Queries:
Scripts and Styles by
Device Using the Same
Markup

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

3.  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

4.  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

5.  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

6.  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

7.  ONE HTML document
 Based on the media
query, serve the css/js
files for mobile or
desktop version, while
content remains same

8.  Modernizr is an open-source JavaScript
library that helps you build the next
generation of HTML5 and CSS3-powered
websites
 Using built-inYepNope.js micro-library
as Modernizr.load(), you can now combine
feature detection with media queries and
conditional resource loading

9. 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
}
}
]);

10.  Desktop

11.  Tablet

12.  Smartphone

13.  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