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 { }
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
3. I asked some developers about what responsive design meant to them
4. @media screen and (max-width: 767px){ media queries
5. targeting different devices
6. responsive grids
7. fluid layouts
8. CSS Pre-processors Breakpoints Font icons SVG Responsive Images Device orientation Typography Browser Width
9. These all focus on one thing
10. How the site looks
11. There is more to building a great responsive site than simply how it looks
12. We also need to consider how the site functions
13. Why change functionality • Devices come in all shapes 
 and sizes • Input methods vary between 
 devices • Device functionality ranges
14. Examples
15. accordion on mobile open content on desktop
16. accordion on mobile tabbed content on desktop Thanks to @monsika http://codepen.io/mpiotrowicz/pen/gocmu
17. single col on mobile equal columns on desktop
18. simple scrollable content on mobile parallax on desktop
19. new page on mobile lightbox on desktop
20. stacked content on mobile swappable panels on desktop
21. What do these examples tell us
22. It’s ok to have different journeys for different devices on a responsive site
23. Desktop journey
24. Mobile journey
25. Two ways to change functionality • Based on viewport size • Based on the features the 
 device supports
26. x How to change functionality based on the viewport
27. Two key browser API’s • window.onresize • window.matchMedia
28. window.onresize
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
30. The code //debounce missing to keep example short $(window).on('resize', function(){ if ($('body').width() < 768) { console.log('mobile'); } });
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
32. How to achieve the 
 logical separation if ($('body').width() < 768) { isMobile(); } ! if ($('body').width() >= 768) { isDesktop(); }
33. Browser Support IE Chrome Firefox Safari Android
34. window.matchMedia
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
36. The code var mql = window.matchMedia("(max-width:768px)"); mql.addListener(function(e){ if(e.matches){ console.log('enter mobile'); } });
37. Browser Support IE 10+ Chrome 9+ Firefox 6+ Safari 5.1+ Android 3.0+
38. Real World Usage 80.63% of users have a browser that supports matchMedia
39. Libraries
40. Two popular libraries
41. SimpleStateManager (aka SSM)
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
43. Setting up SSM Two methods to setup SSM • Download from Github • bower install SimpleStateManager
44. The API • addState - Add Responsive states • removeState - Remove Responsive states • ready - tell SSM the states are added and you are ready
45. Methodology • Prepare a state in the onEnter • Clean up a state in the onLeave • Define a onResize event per state (optional)
46. Adding a state ssm.addState({ id: “mobile”, maxWidth: 767, onEnter: function(){ console.log(‘enter mobile’); } }).ready();
47. Removing a state ssm.removeState('mobile');
48. Demo
49. Extending SSM SSM Plugins allow you to: • Extend the available state options • Wrap jQuery Plugins to add responsive functionality
50. Plugin Methodology • Add a custom config option • Use it like any other config option in your states
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; } }});
52. Using the config option ssm.addState({ maxHeight: 480, onEnter: function(){ console.log(‘enter mobile’); } }).ready();
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
55. What is enquire.js • Awesome Media Queries in JavaScript • Uses matchMedia API • Manages registering and unregistering
56. Setting up enquire.js Two methods to setup enquire.js • Download from Github • bower install enquire
57. The API • register - registers a media query attaching it to a handler • unregister - unregisters a media query
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
59. Registering a query enquire.register("(max-width: 767px)", { match : function() { console.log("enter mobile"); }, });
60. Unregistering a query enquire.unregister("(max-width: 767px)");
61. Demo
62. Summary In summary Enquire.js allows you to • Create listeners for media queries • Attach match and unmatch methods to your listeners
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
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
65. x How to change functionality based device features
66. x
67. Methodology • Detect the features that a browser supports • Progressively enhance your site based on the features it supports
68. Using Modernizr if(Modernizr.geolocation){ console.log('Supports GeoLocation'); }
69. Use in conjunction with SSM • Create a SSM config option using Modernizr for the test
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; } }});
71. Using the config option ssm.addState({ touch: true, maxWidth: 767, onEnter: function(){ console.log(‘is mobile device that supports touch events’); } }).ready();
72. So how do we build better experiences using Responsive JavaScript?
73. By targeting functionality based on the characteristics of a device
74. Optimising the journey our user follows to best suit the device
75. Demo code from this talk at ! https://github.com/jonathan-fielding/ ResponsiveJavaScriptTalkExamples
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
77. Any Questions
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