lastcallmedia.com

allaboard@lastcallmedia.com

@lastcallmedia

RESPONSIVE JAVASCRIPT

Rob Bayliss CTO

A BRIEF HISTORY OF JAVASCRIPTCreated in 10 Days Massively Divergent Standards Libraries allow for cross-platform development "Web 2.0" Standards got better It is now ubiquitous

WHAT IS RESPONSIVENESS?Serve the same content to everyone, but optimize the appearance based on characteristics of the device that is viewing it.

HTML is the meal CSS/JS are the condiments

WHAT IS RESPONSIVENESS?Some things we can respond to: !• Media (print, screen) • Screen (size and orientation) • Capabilities (touch, feature compatibility)

THE SIZE PROBLEM

RESPONSIVE JAVASCRIPT - TECHNIQUES

WINDOW.RESIZE()Trigger a handler ever time the window is resized Performance can be an issue Useful when you have to respond to every single resize Example

WINDOW.MATCHMEDIAFire a handler when a specific breakpoint is matched or unmatched. Example

WINDOW.MATCHMEDIA

PERFORMANCE COMPARISON

http://jsperf.com/matchmedia-vs-resize/2

"Move sidebar content inline Call or destroy a jQuery plugin Slideshows (or use Cycle2!)

FEATURE DETECTIONDetermine what features a browser supports Feature Detection > Browser Detection Modernizr is king Beware the undetectables Progressive Enhancement

A WORD ON POLYFILLSPolyfills are like back ported functionality for older/less functional browsers. The best ones work with no extra calls or interactions needed. Load them conditionally whenever possible Polyfills are not as performant as real browser support Polyfills

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

RESPONSIVE JS IN DRUPALWatch out for attachment issues. This is one situation where you probably shouldn’t use Drupal.behaviors. Example

QUESTIONS?

http://lastcallmedia.com rob@lastcallmedia.com

@rbayliss