Building Better
Experiences with
Responsive JavaScript
Jonathan Fielding
@jonthanfielding
Slide 2
Slide 2 text
About me
• Full stack developer
• Been building responsively for
over 3 years
• Creator of SimpleStateManager
Slide 3
Slide 3 text
I asked some developers
about what responsive design
meant to them
Slide 4
Slide 4 text
targeting different devices
Slide 5
Slide 5 text
@media screen and (max-width: 767px){
media queries
Slide 6
Slide 6 text
responsive grids
Slide 7
Slide 7 text
fluid layouts
Slide 8
Slide 8 text
These all focus on one thing
Slide 9
Slide 9 text
How the site looks
Slide 10
Slide 10 text
There is more to building a
great responsive site than
simply how it looks
Slide 11
Slide 11 text
We also need to consider
how the site functions
Slide 12
Slide 12 text
Why change functionality
• Devices come in all shapes
and sizes
• Input methods vary between
devices
• Device functionality ranges
Slide 13
Slide 13 text
Examples
Slide 14
Slide 14 text
accordion on mobile
open content on desktop
Slide 15
Slide 15 text
single col on mobile
equal columns on desktop
Slide 16
Slide 16 text
simple scrollable
content on mobile
parallax on desktop
Slide 17
Slide 17 text
new page on mobile
lightbox on desktop
Slide 18
Slide 18 text
stacked content
on mobile
swappable panels
on desktop
Slide 19
Slide 19 text
What do these
examples tell us
Slide 20
Slide 20 text
It’s ok to have different
journeys for different
devices on a responsive
site
Slide 21
Slide 21 text
Desktop journey
Slide 22
Slide 22 text
Mobile journey
Slide 23
Slide 23 text
Two ways to change
functionality
• Based on viewport size
• Based on the features the
device supports
Slide 24
Slide 24 text
x
How to change
functionality based
on the viewport
Slide 25
Slide 25 text
Two key browser API’s
• window.onresize
• window.matchMedia
Slide 26
Slide 26 text
window.resize
Slide 27
Slide 27 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 28
Slide 28 text
The code
//debounce missing to keep example short
$(window).on('resize', function(){
if ($('body').width() < 768) {
console.log('mobile');
}
});
Slide 29
Slide 29 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 30
Slide 30 text
How to achieve the
logical separation
if ($('body').width() < 768) {
isMobile();
}
!
if ($('body').width() >= 768) {
isDesktop();
}
Slide 31
Slide 31 text
Browser Support
IE
Chrome
Firefox Safari Android
Slide 32
Slide 32 text
window.matchMedia
Slide 33
Slide 33 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 34
Slide 34 text
The code
var mql = window.matchMedia("(max-width:768px)");
mql.addListener(function(e){
if(e.matches){
console.log('enter mobile');
}
});
Using the config option
ssm.addState({
maxHeight: 480,
onEnter: function(){
console.log(‘enter mobile’);
}
}).ready();
Slide 51
Slide 51 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 52
Slide 52 text
No content
Slide 53
Slide 53 text
What is enquire.js
• Awesome Media Queries in
JavaScript
• Uses matchMedia API
• Manages registering and
unregistering
Slide 54
Slide 54 text
Setting up enquire.js
Two methods to setup enquire.js
• Download from Github
• bower install enquire
Slide 55
Slide 55 text
The API
• register - registers a media
query attaching it to a handler
• unregister - unregisters a
media query
Slide 56
Slide 56 text
Methodology
• Register a media query with a
handler
• Handler will fire when media
query matches
• Unregister unneeded handlers
Slide 57
Slide 57 text
Registering a query
enquire.register("(max-width: 767px)", {
match : function() {
console.log("enter mobile");
},
});
Slide 58
Slide 58 text
Unregistering a query
enquire.unregister("(max-width: 767px)");
Slide 59
Slide 59 text
Demo
Slide 60
Slide 60 text
Summary
In summary Enquire.js allows you to
• Create listeners for media queries
• Attach match and unmatch
methods to your listeners
Slide 61
Slide 61 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 62
Slide 62 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 63
Slide 63 text
x
How to change
functionality based
device features
Slide 64
Slide 64 text
x
Slide 65
Slide 65 text
Methodology
• Detect the features that a browser
supports
• Progressively enhance your site
based on the features it supports
Slide 66
Slide 66 text
Using Modernizr
if(Modernizr.geolocation){
console.log('Supports GeoLocation');
}
Slide 67
Slide 67 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 70
Slide 70 text
So how do we build better
experiences using
Responsive JavaScript?
Slide 71
Slide 71 text
By targeting functionality
based on the characteristics
of a device
Slide 72
Slide 72 text
Optimising the journey our
user follows to best suit the
device
Slide 73
Slide 73 text
Demo code from this talk at
!
https://github.com/jonathan-fielding/
ResponsiveJavaScriptTalkExamples
Slide 74
Slide 74 text
• 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
Slide 75
Slide 75 text
Any Questions
Slide 76
Slide 76 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