Taken from a talk at the London Web Meet-up - 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."

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

2. About me
• Full stack developer
• Been building responsively for
over 3 years
• Worked with big brands like
Beamly, Virgin, Sony and BT

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 mobileopen content on desktop

15. single col on mobileequal columns on desktop

16. simple scrollable
content on mobile
parallax on desktop

17. new page on mobilelightbox 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
IEChromeFirefox 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

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