Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive JavaScript

135d480b7bf92956adcf5abd04821376?s=47 Rob Tarr
April 26, 2013

Responsive JavaScript

JavaScript tools to help you build responsive websites.

135d480b7bf92956adcf5abd04821376?s=128

Rob Tarr

April 26, 2013
Tweet

Transcript

  1. Rob Tarr RESPONSIVE JAVASCRIPT Not Your Momma’s JavaScript Sunday, April

    28, 13
  2. Fluid Grids Flexible Media Media Queries RESPONSIVE + Sunday, April

    28, 13
  3. Fluid Grids Flexible Media Media Queries JavaScript AWESOME + Sunday,

    April 28, 13
  4. RESPONSIVE JAVASCRIPT - NOT YOUR MOMMA’S JAVASCRIPT THE ROLE OF

    JAVASCRIPT IN RESPONSIVE Sunday, April 28, 13
  5. THE ROLE OF JAVASCRIPT IN RESPONSIVE Progressive Enhancement “...uses web

    technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page... while also providing an enhanced version of the page...” http://en.wikipedia.org/wiki/Progressive_enhancement Sunday, April 28, 13
  6. THE ROLE OF JAVASCRIPT IN RESPONSIVE Aggressive Enhancement “...treating content

    itself as an enhancement.” http://globalmoxie.com/blog/making-of-people-mobile.shtml Sunday, April 28, 13
  7. SECTION HEADER Aggressive Enhancement ‣ http://filamentgroup.com/lab/ajax_includes_modular_content/ ‣ http://github.com/filamentgroup/Ajax-Include-Pattern/ ‣ http://github.com/filamentgroup/quickconcat

    ‣ http://24ways.org/2011/conditional-loading-for-responsive-designs Sunday, April 28, 13
  8. Loading content based on media queries THE ROLE OF JAVASCRIPT

    IN RESPONSIVE Enhanced Content Sunday, April 28, 13
  9. How do you arrange your content? THE ROLE OF JAVASCRIPT

    IN RESPONSIVE Positioning Content ‣ http://github.com/filamentgroup/AppendAround Sunday, April 28, 13
  10. A better way to load CSS? THE ROLE OF JAVASCRIPT

    IN RESPONSIVE eCSSential ‣ http://github.com/scottjehl/eCSSential ‣ http://github.com/filamentgroup/quickconcat Sunday, April 28, 13
  11. THE ROLE OF JAVASCRIPT IN RESPONSIVE Polyfills A shim that

    mimics a future API providing fallback functionality to older browsers. http://paulirish.com/i/7570.png Sunday, April 28, 13
  12. THE ROLE OF JAVASCRIPT IN RESPONSIVE Polyfills ‣ http://github.com/scottjehl/Respond ‣

    http://github.com/paulirish/matchMedia.js ‣ http://github.com/scottjehl/picturefill Sunday, April 28, 13
  13. RESPONSIVE JAVASCRIPT - NOT YOUR MOMMA’S JAVASCRIPT PERFORMANCE ENHANCING USER

    INTERACTIONS POLYFILLS Sunday, April 28, 13
  14. position: fixed Sunday, April 28, 13

  15. position: fixed Sunday, April 28, 13

  16. THE ROLE OF JAVASCRIPT IN RESPONSIVE position: fixed ‣ http://github.com/filamentgroup/fixed-fixed

    ‣ http://github.com/scottjehl/Device-Bugs/issues/1 ‣ It’s buggy - proceed with caution ‣ Keyboard issues when filling out forms Sunday, April 28, 13
  17. THE ROLE OF JAVASCRIPT IN RESPONSIVE Orientation Change Bug ‣

    http://github.com/scottjehl/iOS-Orientationchange-Fix Sunday, April 28, 13
  18. THE ROLE OF JAVASCRIPT IN RESPONSIVE respond.js ‣ http://scottjehl.github.com/respond Sunday,

    April 28, 13
  19. THE ROLE OF JAVASCRIPT IN RESPONSIVE matchMedia ‣ http://github.com/paulirish/matchMedia.js ‣

    http://github.com/sparkbox/mediaCheck ‣ http://github.com/ten1seven/jRespond Sunday, April 28, 13
  20. THE ROLE OF JAVASCRIPT IN RESPONSIVE Responsive Nav ‣ http://responsive-nav.com/

    Sunday, April 28, 13
  21. SECTION HEADER Typography Sunday, April 28, 13

  22. THE ROLE OF JAVASCRIPT IN RESPONSIVE Typography ‣ http://fittextjs.com ‣

    http://www.frequency-decoder.com/demo/slabText ‣ http://letteringjs.com ‣ http://www.kernjs.com Sunday, April 28, 13
  23. THE ROLE OF JAVASCRIPT IN RESPONSIVE Touch ‣ http://eightmedia.github.com/hammer.js ‣

    http://github.com/jairajs89/Touchy.js ‣ http://google.com ‣ http://swipejs.com ‣ http://flexslider.woothemes.com ‣ http://marktyrrell.com/labs/blueberry Sunday, April 28, 13
  24. Code Structure Sunday, April 28, 13

  25. $(function() { NAV.init(); }); Sunday, April 28, 13

  26. THANKS! @robtarr tarr@heysparkbox.com Sunday, April 28, 13