Responsibly Responsive JavaScript

How you can use JavaScript to help (not hinder) your shiny new responsive websites.

Transcript

1. Responsibly Responsive JavaScript How you can use JavaScript to help (not hinder) your shiny new Responsive™ websites Mark Perkins 11th October, 2012
2. Once upon a time... When we were young it all seemed so simple.
3. 800 x 600 or 1024 x 768
13. We need to think about JS a li le differently now. Don’t assume what worked before is still best practice. Reevaluate, reconsider, rework.
14. tl;dl Just give me the summary so I can go to the pub.
15. • 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.
16. Cu ing the mustard* Not everyone really wants JavaScript in their life. * Catchy title not invented by me
17. Some devices and browsers really suck at JavaScript • Poor standards support • Proxy browsers • Low memory, slow JS engines
18. 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! }
19. Proxy (poxy) browsers if(Object.prototype.toString.call( window.operamini)/!==/'[object/OperaMini]')/{ ///*not*/feature/detection/:C( }
20. Low memory, slow JS engines
21. A higher bar is be"er than a lower one. Don’t be afraid to cut the mustard.
22. Progressive enhancement Because cu"ing the mustard ain’t gonna work without it.
23. ProJSsive enhancement (Sorry)
24. — 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.”
25. “Make sure your sh*t works with JavaScript turned off” — Me, just now
26. “All users are ‘no JavaScript’ users until the JavaScript downloads” — Jake Archibald (I think)
27. HTML Don’t let a JavaScript dependency ruin a beautiful thing.
30. Custom builds FTW!
31. Custom builds FTW! No Modernizr FTW!
32. To polyfill, or not to polyfill? That is the question. • Respond.js • MatchMedia • PictureFill • Many others...
33. Think mobile-first, polyfill as much as needed but as li"le as possible. Treat all JS as progressive enhancement.
34. Re-thinking interactions Put that custom select dropdown back in it’s box.
35. Harvest/Chosen
36. Harvest/Chosen
37. Datepickers
38. Datepickers
39. Maps
40. Use interactions appropriate to the context. On mobile native almost always beats non-native, JavaScript implementations. Snazzy on desktop often means painful on mobile.
41. Using JavaScript for great good Improving the mobile experience with the power of JavaScript.
42. Conditional loading • JavaScript, CSS, HTML, Maps, images, everything! • Leave the core experience as minimal as possible, upgrade as necessary
43. Conditional loading • Yepnope • RequireJS • AjaxInclude • eCSSential • Many more...
44. Responsive Images • AdaptiveImages • Sencha.io • PictureFill • Responsive Enhance • Blah blah blah...
45. 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)
46. With conditional loading and responsive images we can deliver a lightweight, mobile-first site that scales up to desktop sizes. JS can help.
47. Look beyond jQuery One size does not fit all, and skinny is the new black.
48. 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
49. 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.
50. But it’s kinda complicated between us right now.
51. Don’t just use what’s comfortable and easy. Pick the right tool for the job.
52. Back where we started Now can we go to the pub?
53. • 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.
54. mark@clearle!.com @allmarkedup h"p://clearle!.com/testlab Thank you!