Responsive JavaScript

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