Leveraging Modernizr and Media Queries

Scripts and Styles by Device Using the Same Markup

Transcript

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-in YepNope.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