$30 off During Our Annual Pro Sale. View Details »

Building Better Experiences with Responsive JavaScript

Building Better Experiences with Responsive JavaScript

Responsive design has thus far focused on using media queries to alter the way our site looks using CSS. The next step is to look at how we can progressively enhance our site based on the the features of the device. This is going beyond what CSS can offer and moving into the realms of responsive javascript. There are already new browser API’s are arriving to enables this, with the matchMedia API we can target specific functionality based on whether a media query matches.

Similarly we can add extra functionality and loads additional assets based upon features like geolocation and the camera. This is not building separate sites, its just changing the functionality of a single site based on the users device to optimise their experience.
The aim of this talk is to help you learn about what you can do with responsive javascript. You will learn about how you can target specific functionality to different types of devices which enable you to optimise your user experience.

Jonathan Fielding

June 19, 2014
Tweet

More Decks by Jonathan Fielding

Other Decks in Programming

Transcript

  1. Building Better Experiences with Responsive JavaScript Jonathan Fielding @jonthanfielding

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

    for
 over 3 years • Creator of SimpleStateManager
  3. I asked some developers about what responsive design meant to

    them
  4. targeting different devices

  5. @media screen and (max-width: 767px){ media queries

  6. responsive grids

  7. fluid layouts

  8. These all focus on one thing

  9. How the site looks

  10. There is more to building a great responsive site than

    simply how it looks
  11. We also need to consider how the site functions

  12. Why change functionality • Devices come in all shapes 


    and sizes • Input methods vary between 
 devices • Device functionality ranges
  13. Examples

  14. accordion on mobile open content on desktop

  15. single col on mobile equal columns on desktop

  16. simple scrollable content on mobile parallax on desktop

  17. new page on mobile lightbox on desktop

  18. stacked content on mobile swappable panels on desktop

  19. What do these examples tell us

  20. It’s ok to have different journeys for different devices on

    a responsive site
  21. Desktop journey

  22. Mobile journey

  23. Two ways to change functionality • Based on viewport size

    • Based on the features the 
 device supports
  24. x How to change functionality based on the viewport

  25. Two key browser API’s • window.onresize • window.matchMedia

  26. window.resize

  27. 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
  28. The code //debounce missing to keep example short $(window).on('resize', function(){

    if ($('body').width() < 768) { console.log('mobile'); } });
  29. 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
  30. How to achieve the 
 logical separation if ($('body').width() <

    768) { isMobile(); } ! if ($('body').width() >= 768) { isDesktop(); }
  31. Browser Support IE Chrome Firefox Safari Android

  32. window.matchMedia

  33. 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
  34. The code var mql = window.matchMedia("(max-width:768px)"); mql.addListener(function(e){ if(e.matches){ console.log('enter mobile');

    } });
  35. Browser Support IE 10+ Chrome 9+ Firefox 6+ Safari 5.1+

    Android 3.0+
  36. Real World Usage 80.63% of users have a browser that

    supports matchMedia
  37. Libraries

  38. Two popular libraries

  39. SimpleStateManager (aka SSM)

  40. What is SSM? • Responsive State Manager for JS •

    Uses Resize Event • Uses concept of states • Expandable with plugins
  41. Setting up SSM Two methods to setup SSM • Download

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

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

    up a state in the onLeave • Define a onResize event per state (optional)
  44. Adding a state ssm.addState({ id: “mobile”, maxWidth: 767, onEnter: function(){

    console.log(‘enter mobile’); } }).ready();
  45. Removing a state ssm.removeState('mobile');

  46. Demo

  47. Extending SSM SSM Plugins allow you to: • Extend the

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

    it like any other config option in your states
  49. 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; } }});
  50. Using the config option ssm.addState({ maxHeight: 480, onEnter: function(){ console.log(‘enter

    mobile’); } }).ready();
  51. 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
  52. None
  53. What is enquire.js • Awesome Media Queries in JavaScript •

    Uses matchMedia API • Manages registering and unregistering
  54. Setting up enquire.js Two methods to setup enquire.js • Download

    from Github • bower install enquire
  55. The API • register - registers a media query attaching

    it to a handler • unregister - unregisters a media query
  56. Methodology • Register a media query with a handler •

    Handler will fire when media query matches • Unregister unneeded handlers
  57. Registering a query enquire.register("(max-width: 767px)", { match : function() {

    console.log("enter mobile"); }, });
  58. Unregistering a query enquire.unregister("(max-width: 767px)");

  59. Demo

  60. Summary In summary Enquire.js allows you to • Create listeners

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

    IE7+, FF, O, C, S IE10+, FF, O, C, S API events Enter, Leave, Resize Enter, Leave Plugin Library yes no
  62. 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
  63. x How to change functionality based device features

  64. x

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

    Progressively enhance your site based on the features it supports
  66. Using Modernizr if(Modernizr.geolocation){ console.log('Supports GeoLocation'); }

  67. Use in conjunction with SSM • Create a SSM config

    option using Modernizr for the test
  68. 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; } }});
  69. Using the config option ssm.addState({ touch: true, maxWidth: 767, onEnter:

    function(){ console.log(‘is mobile device that supports touch events’); } }).ready();
  70. So how do we build better experiences using Responsive JavaScript?

  71. By targeting functionality based on the characteristics of a device

  72. Optimising the journey our user follows to best suit the

    device
  73. Demo code from this talk at ! https://github.com/jonathan-fielding/ ResponsiveJavaScriptTalkExamples

  74. • Learn how to make your sites responsive • Chapter

    on Responsive JavaScript • http://bitly.com/NXusZn • 35% off eBook discount code: B3GW3B • 4 eBooks to give away today
  75. Any Questions

  76. 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