Changing Functionality
Why change functionality
• Offer a tailored experience regardless
of the device
• Potentially decrease bounce rate
Slide 6
Slide 6 text
Examples of changing
functionality
Slide 7
Slide 7 text
New page on
mobile
Lightbox on desktop
Slide 8
Slide 8 text
Accordion on
mobile
Open content on desktop
Slide 9
Slide 9 text
single col on
mobile
equal columns on desktop
Slide 10
Slide 10 text
simple scrollable
content on mobile
parallax on desktop
Slide 11
Slide 11 text
How to change
functionality
Slide 12
Slide 12 text
Changing Functionality
• Typically requires javascript
• Two Apis
• window.onresize
• window.matchMedia
Slide 13
Slide 13 text
window.onresize
Slide 14
Slide 14 text
Methodology for using onresize
• Add event to window.onresize
• Use conditional statements to
detect current width of
browser
• Add debounce to resize event
to prevent it firing excessively
Slide 15
Slide 15 text
Example
//debounce missing to keep example short
$(window).on('resize', function(){
if ($('body').width() < 768) {
console.log('mobile');
}
});
Slide 16
Slide 16 text
Could get messy
• Lots of code simply placed in an on
resize event could potentially be
messy
• Not a clear logical separation of
different states
Slide 17
Slide 17 text
Build a state manager
var stateManager = (function () {
var state = null;
var resizePage = function () {
if ($('body').width() < 768) {
if (state !== "mobile") { displayMobile(); }
resizeMobile();
}
else {
if (state !== "desktop") { displayDesktop(); }
resizeDesktop();
}
};
var displayMobile = function () {
state = "mobile";
console.log("enter mobile");
};
var displayDesktop = function () {
state = "desktop";
console.log("enter desktop");
};
var resizeMobile = function () {
console.log("resizing mobile");
};
var resizeDesktop = function () {
console.log("resizing desktop");
};
return {
init: function () {
resizePage();
$(window).on('resize', resizePage);
}
};
} ());
Slide 18
Slide 18 text
Find it on github
https://github.com/jonathan-fielding/
Responsive-Javascript-Examples
Slide 19
Slide 19 text
browser support
IE
Chrome
Firefox
Safari
Android
All Major Browsers Support
window.onresize
Slide 20
Slide 20 text
matchMedia
Slide 21
Slide 21 text
Methodology for using matchMedia
• Prepare a MediaQueryList by
using a media query with
window.matchMedia
• Add listener to MatchQueryList
• When listener fires check if its
a match or unmatch
Slide 22
Slide 22 text
Code example
var mql = window.matchMedia("(max-width:768px)");
mql.addListener(function(e){
if(e.matches){
console.log('enter mobile');
}
});
real world usage
74.22%
of users have a browser
that supports
matchMedia
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Two Main Libraries
Slide 27
Slide 27 text
SimpleStateManager!
(aka SSM)
Slide 28
Slide 28 text
What is SSM?
• Responsive State Manager for JS
• Uses Resize Event
• Expandable with plugins
Slide 29
Slide 29 text
Setting up SSM
Two methods to setup SSM
• Download from Github
• bower install SimpleStateManager
Slide 30
Slide 30 text
The API
• addState, addStates - Add
Responsive states
• removeState, removeStates - Remove
Responsive states
• ready - tell SSM the states are added
and you are ready
Slide 31
Slide 31 text
Methodology for using SSM
• Prepare a state in the
onEnter
• Clean up a state in the
onLeave
• Define a onResize event per
state (optional)
Slide 32
Slide 32 text
Adding a state
ssm.addState({
maxWidth: 767,
onEnter: function(){
console.log(‘enter mobile’);
}
}).ready();
Slide 33
Slide 33 text
Removing a state
ssm.removeState('mobile');
Slide 34
Slide 34 text
Extending SSM
SSM Plugins allow you
• Extend the available state options
• Wrap jQuery Plugins to add
responsive functionality
Slide 35
Slide 35 text
DEMO
Slide 36
Slide 36 text
SSM Summary
In summary SSM allows you to
• Create responsive states with
predefined rules of when it should be
active
• Add onEnter, onLeave and onResize
events to a state
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
What is EnquireJS?
• Awesome Media Queries in
JavaScript
• Uses matchMedia API
• Manages registering and
unregistering
Slide 39
Slide 39 text
Setting up Enquire.js
Two methods to setup Enquire.js
• Download from Github
• bower install enquire
Slide 40
Slide 40 text
The API
• register - registers a media query
attaching it to a handler
• unregister - unregisters a media query
Slide 41
Slide 41 text
Methodology for using
Enquire.js
• Register a media query with a handler
• Handler will fire when media query
matches
• Unregister unneeded handlers
Slide 42
Slide 42 text
Registering a query
enquire.register("(max-width: 767px)", {
match : function() {
console.log("enter mobile");
},
});
Slide 43
Slide 43 text
Unregistering a query
enquire.unregister("(max-width: 767px)");
Slide 44
Slide 44 text
Demo
Slide 45
Slide 45 text
Enquire.js Summary
In summary Enquire.js allows you to
• Create listeners for media queries
• Attach match and unmatch methods
to your listeners
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
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
!
Slide 48
Slide 48 text
Thanks
Labtocat Image - https://github.com/
JohnCreek
Any Questions?