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