Slide 1
Slide 1 text
Responsibly Responsive
JavaScript
How you can use JavaScript to help (not hinder)
your shiny new Responsive™ websites
Mark Perkins
11th October, 2012
Slide 2
Slide 2 text
Once upon a time...
When we were young it all seemed so simple.
Slide 3
Slide 3 text
800 x 600 or 1024 x 768
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
We need to think about
JS a li le differently now.
Don’t assume what worked before is still best practice.
Reevaluate, reconsider, rework.
Slide 14
Slide 14 text
tl;dl
Just give me the summary so I can go to the pub.
Slide 15
Slide 15 text
• Take time to reconsider the way you currently implement your
JavaScript.
• Don’t be afraid to cut the mustard (but not the cheese).
• Treat all JavaScript as progressive enhancement and no-one
will get hurt.
• Re-think your interactions. Snazzy on desktop o!en means
painful on mobile.
• Polyfills, feature detection and conditional loaders can all be
valuable tools when used sensibly.
• Look beyond jQuery. Every bit of JS should have to justify it’s
existence and size.
• And never forget: With great power comes great responsivility.
Slide 16
Slide 16 text
Cu ing the mustard*
Not everyone really wants JavaScript in their life.
* Catchy title not invented by me
Slide 17
Slide 17 text
Some devices and
browsers really
suck at JavaScript
• Poor standards support
• Proxy browsers
• Low memory, slow JS engines
Slide 18
Slide 18 text
Cut that mustard!
if('querySelector'/in/document
&&/'localStorage'/in/window
&&/'addEventListener'/in/window)/{
///This/is/how/BBC/News/do/it/C/you/may/
need/your/own/test!
}
Slide 19
Slide 19 text
Proxy (poxy) browsers
if(Object.prototype.toString.call(
window.operamini)/!==/'[object/OperaMini]')/{
///*not*/feature/detection/:C(
}
Slide 20
Slide 20 text
Low memory, slow
JS engines
Slide 21
Slide 21 text
A higher bar is be"er than a lower one.
Don’t be afraid to cut
the mustard.
Slide 22
Slide 22 text
Progressive
enhancement
Because cu"ing the mustard ain’t gonna work without it.
Slide 23
Slide 23 text
ProJSsive
enhancement
(Sorry)
Slide 24
Slide 24 text
— Wikipedia, October 2012
“Progressive enhancement uses web technologies in a
layered fashion that allows everyone to access the basic
content and functionality of a web page [...] while also
providing an enhanced version of the page to those with
more advanced browser so ware or greater bandwidth.”
Slide 25
Slide 25 text
“Make sure your sh*t works
with JavaScript turned off”
— Me, just now
Slide 26
Slide 26 text
“All users are ‘no JavaScript’ users until
the JavaScript downloads”
— Jake Archibald (I think)
Slide 27
Slide 27 text
HTML
Don’t let a JavaScript dependency
ruin a beautiful thing.
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Custom builds FTW!
Slide 31
Slide 31 text
Custom builds FTW!
No Modernizr FTW!
Slide 32
Slide 32 text
To polyfill, or
not to polyfill?
That is the question.
• Respond.js
• MatchMedia
• PictureFill
• Many others...
Slide 33
Slide 33 text
Think mobile-first, polyfill as much as needed but
as li"le as possible.
Treat all JS as progressive
enhancement.
Slide 34
Slide 34 text
Re-thinking
interactions
Put that custom select dropdown back in it’s box.
Slide 35
Slide 35 text
Harvest/Chosen
Slide 36
Slide 36 text
Harvest/Chosen
Slide 37
Slide 37 text
Datepickers
Slide 38
Slide 38 text
Datepickers
Slide 39
Slide 39 text
Maps
Slide 40
Slide 40 text
Use interactions appropriate to the context.
On mobile native almost always beats non-native, JavaScript
implementations.
Snazzy on desktop often
means painful on mobile.
Slide 41
Slide 41 text
Using JavaScript
for great good
Improving the mobile experience with the power of JavaScript.
Slide 42
Slide 42 text
Conditional loading
• JavaScript, CSS, HTML, Maps, images, everything!
• Leave the core experience as minimal as possible, upgrade
as necessary
Slide 43
Slide 43 text
Conditional loading
• Yepnope
• RequireJS
• AjaxInclude
• eCSSential
• Many more...
Slide 44
Slide 44 text
Responsive Images
• AdaptiveImages
• Sencha.io
• PictureFill
• Responsive Enhance
• Blah blah blah...
Slide 45
Slide 45 text
Other goodness
• Polyfill media query support
• Progressively enhance interactions
• Be"er media queries (e.g. Selector Queries)
• Improving server-side device detection (e.g. Detector)
Slide 46
Slide 46 text
With conditional loading and responsive images we can
deliver a lightweight, mobile-first site that scales up to
desktop sizes.
JS can help.
Slide 47
Slide 47 text
Look beyond jQuery
One size does not fit all, and skinny is the new black.
Slide 48
Slide 48 text
Go micro!
• Lots of great standalone
micro libraries
• Can stitch together with
tools like RequireJS if
needed
• Can significantly
improve filesize and also
opens the door for more
conditional loading
Slide 49
Slide 49 text
Go custom!
• Lots of plugins are pre"y
bloated and not aimed at
mobile as well as desktop
• Writing your own can be
very beneficial... but can
take time and a lot of
debugging.
Slide 50
Slide 50 text
But it’s kinda complicated
between us right now.
Slide 51
Slide 51 text
Don’t just use what’s comfortable and easy.
Pick the right tool
for the job.
Slide 52
Slide 52 text
Back where we started
Now can we go to the pub?
Slide 53
Slide 53 text
• Take time to reconsider the way you currently implement your
JavaScript.
• Don’t be afraid to cut the mustard (but not the cheese).
• Treat all JavaScript as progressive enhancement and no-one
will get hurt.
• Re-think your interactions. Snazzy on desktop o!en means
painful on mobile.
• Polyfills, feature detection and conditional loaders can all be
valuable tools when used sensibly.
• Look beyond jQuery. Every bit of JS should have to justify it’s
existence and size.
• And never forget: With great power comes great responsivility.
Slide 54
Slide 54 text
mark@clearle!.com
@allmarkedup
h"p://clearle!.com/testlab
Thank you!