Your SlideShare is downloading. ×
0
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Leveraging Modernizr and Media Queries
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Leveraging Modernizr and Media Queries

4,772

Published on

Scripts and Styles by Device Using the Same Markup

Scripts and Styles by Device Using the Same Markup

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,772
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. LeveragingModernizr andMedia Queries:Scripts and Styles byDevice Using the SameMarkup
  • 2. Write less-do more Sencha Touch jQuery Mobile jQTouch Zepto.jsThis presentation we will be discussingjQuery mobile, which uses HTML5 attributes torender 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

×