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

Build awesome responsive experiences with JavaScript

Build awesome responsive experiences with JavaScript

Media queries allow us to to optimise the look and feel of our site to work across a wide variety of devices, but often these devices have a wide variety of different capabilities, including different input methods, additional API’s and screen sizes. With this in mind, it really doesn’t make sense to offer the same functionality to all devices, we need a way to provide optimised functionality dependant on the capabilities of the device. This is where responsive javascript comes in, this talk aims to teach you not only why we need to be doing this, but also how we can go about doing this with our sites.

Jonathan Fielding

June 30, 2014

More Decks by Jonathan Fielding

Other Decks in Programming


  1. About me • Full stack developer • Been building responsively

 over 3 years • Worked with big brands like
 Beamly, Virgin, Sony and BT • Collector of geeky t-shirts
  2. Why change functionality • Devices come in all shapes 

    and sizes • Input methods vary between 
 devices • Device functionality ranges
  3. Two ways to change functionality • Based on viewport size

    • Based on the features the 
 device supports
  4. Methodology • Add event to window.onresize • Use conditional statements

    to detect current width of browser • Add debounce to resize event to 
 prevent it firing excessively
  5. The code //debounce missing to keep example short $(window).on('resize', function(){

    if ($('body').width() < 768) { console.log('mobile'); } });
  6. Could get messy • Lots of code simply placed in

    an on resize event could potentially be messy • Need to ensure there is a clear logical separation between different targeted viewport sizes
  7. How to achieve the 
 logical separation if ($('body').width() <

    768) { isMobile(); } ! if ($('body').width() >= 768) { isDesktop(); }
  8. Methodology • Prepare a MediaQueryList by using a media query

    with window.matchMedia • Add listener to MediaQueryList • When listener fires check if its a match or unmatch
  9. What is SSM? • Responsive State Manager for JS •

    Uses Resize Event for states • Uses matchMedia for validation • Uses concept of states • Expandable with plugins
  10. Setting up SSM Two methods to setup SSM • Download

    from Github • bower install SimpleStateManager
  11. The API • addState - Add Responsive states • removeState

    - Remove Responsive states • ready - tell SSM the states are added and you are ready
  12. Methodology • Prepare a state in the onEnter • Clean

    up a state in the onLeave • Define a onResize event per state (optional)
  13. Extending SSM SSM Plugins allow you to: • Extend the

    available state options • Wrap jQuery Plugins to add responsive functionality
  14. Plugin Methodology • Add a custom config option • Use

    it like any other config option in your states
  15. Add a config option ssm.addConfigOption({name:"maxHeight", test: function(){ if(typeof this.state.maxHeight ===

    "number" && this.state.maxHeight <= window.innerHeight){ return true; } else{ return false; } }});
  16. Summary • Create responsive states with predefined rules of when

    it should be active • Add onEnter, onLeave and onResize events to a state • Use config options to add new tests
  17. What is enquire.js • Awesome Media Queries in JavaScript •

    Uses matchMedia API • Manages registering and unregistering
  18. The API • register - registers a media query attaching

    it to a handler • unregister - unregisters a media query
  19. Methodology • Register a media query with one or more

    handlers • Relevant handlers will fire when media query are matched or unmatched • Unregister unneeded handlers
  20. Summary In summary Enquire.js allows you to • Create listeners

    for media queries • Attach match and unmatch methods to your listeners
  21. SSM vs Enquire.js SimpleStateManager Enquire.js method onresize and some matchMedia

    matchMedia browser support IE7+, FF, O, C, S IE10+, FF, O, C, S API events Enter, Leave, Resize Enter, Leave Plugin Library yes no
  22. In Summary • Looked at two API’s we can use

    for responsive JavaScript • Looked at SimpleStateManager and enquire.js as an option to simplify writing responsive JavaScript
  23. x

  24. Methodology • Detect the features that a browser supports •

    Progressively enhance your site based on the features it supports
  25. Use in conjunction with SSM • Create a SSM config

    option using Modernizr for the test
  26. Add a config option ssm.addConfigOption({name:"touch", test: function(){ if(typeof this.state.touch ===

    "boolean" && this.state.touch === Modernizr.touch){ return true; } else{ return false; } }});
  27. Using the config option ssm.addState({ touch: true, maxWidth: 767, onEnter:

    function(){ console.log(‘is mobile device that supports touch events’); } }).ready();
  28. • Learn how to make your sites responsive • Chapter

    on Responsive JavaScript • http://bitly.com/NXusZn • 35% off eBook discount code: B3GW3B • 3 eBooks to give away today
  29. Further Resources MDN - Testing Media Queries - mzl.la/18r5yGi MDN

    – MediaQueryList - mzl.la/1bxbbZJ MDN – Window.matchMedia - mzl.la/19qc3Yk SimpleStateManager – simplestatemanager.com Enquire.js - wicky.nillia.ms/enquire.js/ MatchMedia Polyfill - github.com/paulirish/matchMedia.js/ Jonathan Fielding’s Blog - jonathanfielding.com ! Demo code from this talk at ! https://github.com/jonathan-fielding/ ResponsiveJavaScriptTalkExamples