Download - Leveraging Modernizr and Media Queries
![Page 1: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/1.jpg)
Leveraging Modernizr and Media Queries:
Scripts and Styles by Device Using the Same Markup
![Page 2: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/2.jpg)
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
![Page 3: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/3.jpg)
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
![Page 4: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/4.jpg)
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
![Page 5: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/5.jpg)
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
![Page 6: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/6.jpg)
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
![Page 7: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/7.jpg)
The PLEDGE
ONE HTML document
Based on the media query, serve the css/js files for mobile or desktop version, while content remains same
![Page 8: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/8.jpg)
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
![Page 9: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/9.jpg)
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
} }]);
![Page 10: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/10.jpg)
The PRESTIEGE: site only loads files needed
Desktop
![Page 11: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/11.jpg)
The PRESTIEGE: site only loads files needed
Tablet
![Page 12: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/12.jpg)
The PRESTIEGE: site only loads files needed
Smartphone
![Page 13: Leveraging Modernizr and Media Queries](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7bfed4a7959ea488b45e9/html5/thumbnails/13.jpg)
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