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.

Transcript

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

   View Slide

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

   over 3 years
   • Creator of SimpleStateManager
   

   View Slide

3. I asked some developers
   about what responsive design
   meant to them
   

   View Slide

4. targeting different devices
   

   View Slide

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

   View Slide

6. responsive grids
   

   View Slide

7. fluid layouts
   

   View Slide

8. These all focus on one thing
   

   View Slide

9. How the site looks
   

   View Slide

10. There is more to building a
    great responsive site than
    simply how it looks
    

    View Slide

11. We also need to consider
    how the site functions
    

    View Slide

12. Why change functionality
    • Devices come in all shapes 

    and sizes
    • Input methods vary between 

    devices
    • Device functionality ranges
    

    View Slide

13. Examples
    

    View Slide

14. accordion on mobile
    open content on desktop
    

    View Slide

15. single col on mobile
    equal columns on desktop
    

    View Slide

16. simple scrollable
    content on mobile
    parallax on desktop
    

    View Slide

17. new page on mobile
    lightbox on desktop
    

    View Slide

18. stacked content
    on mobile
    swappable panels
    on desktop
    

    View Slide

19. What do these
    examples tell us
    

    View Slide

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

    View Slide

21. Desktop journey
    

    View Slide

22. Mobile journey
    

    View Slide

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

    device supports
    

    View Slide

24. x
    How to change
    functionality based
    on the viewport
    

    View Slide

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

    View Slide

26. window.resize
    

    View Slide

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
    

    View Slide

28. The code
    //debounce missing to keep example short
    $(window).on('resize', function(){
    if ($('body').width() < 768) {
    console.log('mobile');
    }
    });
    

    View Slide

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
    

    View Slide

30. How to achieve the 

    logical separation
    if ($('body').width() < 768) {
    isMobile();
    }
    !
    if ($('body').width() >= 768) {
    isDesktop();
    }
    

    View Slide

31. Browser Support
    IE
    Chrome
    Firefox Safari Android
    

    View Slide

32. window.matchMedia
    

    View Slide

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
    

    View Slide

34. The code
    var mql = window.matchMedia("(max-width:768px)");
    mql.addListener(function(e){
    if(e.matches){
    console.log('enter mobile');
    }
    });
    

    View Slide

35. Browser Support
    IE 10+
    Chrome 9+
    Firefox 6+ Safari 5.1+ Android 3.0+
    

    View Slide

36. Real World Usage
    80.63%
    of users have a browser
    that supports
    matchMedia
    

    View Slide

37. Libraries
    

    View Slide

38. Two popular libraries
    

    View Slide

39. SimpleStateManager
    (aka SSM)
    

    View Slide

40. What is SSM?
    • Responsive State Manager for JS
    • Uses Resize Event
    • Uses concept of states
    • Expandable with plugins
    

    View Slide

41. Setting up SSM
    Two methods to setup SSM
    • Download from Github
    • bower install SimpleStateManager
    

    View Slide

42. The API
    • addState - Add Responsive
    states
    • removeState - Remove
    Responsive states
    • ready - tell SSM the states are
    added and you are ready
    

    View Slide

43. Methodology
    • Prepare a state in the onEnter
    • Clean up a state in the
    onLeave
    • Define a onResize event per
    state (optional)
    

    View Slide

44. Adding a state
    ssm.addState({
    id: “mobile”,
    maxWidth: 767,
    onEnter: function(){
    console.log(‘enter mobile’);
    }
    }).ready();
    

    View Slide

45. Removing a state
    ssm.removeState('mobile');
    

    View Slide

46. Demo
    

    View Slide

47. Extending SSM
    SSM Plugins allow you to:
    • Extend the available state
    options
    • Wrap jQuery Plugins to add
    responsive functionality
    

    View Slide

48. Plugin Methodology
    • Add a custom config option
    • Use it like any other config option
    in your states
    

    View Slide

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;
    }
    }});
    

    View Slide

50. Using the config option
    ssm.addState({
    maxHeight: 480,
    onEnter: function(){
    console.log(‘enter mobile’);
    }
    }).ready();
    

    View Slide

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
    

    View Slide

52. View Slide

53. What is enquire.js
    • Awesome Media Queries in
    JavaScript
    • Uses matchMedia API
    • Manages registering and
    unregistering
    

    View Slide

54. Setting up enquire.js
    Two methods to setup enquire.js
    • Download from Github
    • bower install enquire
    

    View Slide

55. The API
    • register - registers a media
    query attaching it to a handler
    • unregister - unregisters a
    media query
    

    View Slide

56. Methodology
    • Register a media query with a
    handler
    • Handler will fire when media
    query matches
    • Unregister unneeded handlers
    

    View Slide

57. Registering a query
    enquire.register("(max-width: 767px)", {
    match : function() {
    console.log("enter mobile");
    },
    });
    

    View Slide

58. Unregistering a query
    enquire.unregister("(max-width: 767px)");
    

    View Slide

59. Demo
    

    View Slide

60. Summary
    In summary Enquire.js allows you to
    • Create listeners for media queries
    • Attach match and unmatch
    methods to your listeners
    

    View Slide

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
    

    View Slide

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
    

    View Slide

63. x
    How to change
    functionality based
    device features
    

    View Slide

64. x
    

    View Slide

65. Methodology
    • Detect the features that a browser
    supports
    • Progressively enhance your site
    based on the features it supports
    

    View Slide

66. Using Modernizr
    if(Modernizr.geolocation){
    console.log('Supports GeoLocation');
    }
    

    View Slide

67. Use in conjunction with SSM
    • Create a SSM config option using
    Modernizr for the test
    

    View Slide

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;
    }
    }});
    

    View Slide

69. Using the config option
    ssm.addState({
    touch: true,
    maxWidth: 767,
    onEnter: function(){
    console.log(‘is mobile device
    that supports touch events’);
    }
    }).ready();
    

    View Slide

70. So how do we build better
    experiences using
    Responsive JavaScript?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

75. Any Questions
    

    View Slide

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
    

    View Slide