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.

Transcript

1. Build awesome
   responsive experiences
   with JavaScript
   Jonathan Fielding
   @jonthanfielding
   30th June 2014 #lwssausage
   { }
   

   View Slide

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

   over 3 years
   • Worked with big brands like

   Beamly, Virgin, Sony and BT
   • Collector of geeky t-shirts
   

   View Slide

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

   View Slide

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

   View Slide

5. targeting different devices
   

   View Slide

6. responsive grids
   

   View Slide

7. fluid layouts
   

   View Slide

8. CSS Pre-processors
   Breakpoints Font icons
   SVG
   Responsive Images
   Device orientation
   Typography Browser Width
   

   View Slide

9. These all
   focus on one thing
   

   View Slide

10. How the site looks
    

    View Slide

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

    View Slide

12. We also need to consider
    how the site functions
    

    View Slide

13. Why change functionality
    • Devices come in all shapes 

    and sizes
    • Input methods vary between 

    devices
    • Device functionality ranges
    

    View Slide

14. Examples
    

    View Slide

15. accordion on mobile
    open content on desktop
    

    View Slide

16. accordion on mobile
    tabbed content on desktop
    Thanks to @monsika http://codepen.io/mpiotrowicz/pen/gocmu
    

    View Slide

17. single col on mobile
    equal columns on desktop
    

    View Slide

18. simple scrollable
    content on mobile
    parallax on desktop
    

    View Slide

19. new page on mobile
    lightbox on desktop
    

    View Slide

20. stacked content
    on mobile
    swappable panels
    on desktop
    

    View Slide

21. What do these
    examples tell us
    

    View Slide

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

    View Slide

23. Desktop journey
    

    View Slide

24. Mobile journey
    

    View Slide

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

    device supports
    

    View Slide

26. x
    How to change
    functionality based
    on the viewport
    

    View Slide

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

    View Slide

28. window.onresize
    

    View Slide

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

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

    View Slide

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

32. How to achieve the 

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

    View Slide

33. Browser Support
    IE
    Chrome
    Firefox Safari Android
    

    View Slide

34. window.matchMedia
    

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

39. Libraries
    

    View Slide

40. Two popular libraries
    

    View Slide

41. SimpleStateManager
    (aka SSM)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. Demo
    

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

54. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. Methodology
    • Register a media query with
    one or more handlers
    • Relevant handlers will fire when
    media query are matched or
    unmatched
    • Unregister unneeded handlers
    

    View Slide

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

    View Slide

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

    View Slide

61. Demo
    

    View Slide

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

    View Slide

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

    View Slide

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

65. x
    How to change
    functionality based
    device features
    

    View Slide

66. x
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

77. Any Questions
    

    View Slide

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