Responsive Guardian

The Guardian recently released a new site on m.guardian.co.uk. It's a mobile site with a big future. Here's what we're doing with client-side technology to set the foundations of that future.

I presented this at http://www.frontendlondon.co.uk in January 2013.

Transcript

1. GUARDIAN Andy Hume M.GUARDIAN.CO.UK Front-end London, January 2013 RESPONSIVE Friday, 18 January 13
2. Improve mobile web site Responsive future New www via the back door? WHAT ARE WE DOING? Friday, 18 January 13
3. Builds on Guardian APIs - http://www.guardian.co.uk/open-platform Amazon hosted - EC2, S3, Cloudformation Code in public Github repo - http://github.com/guardian/frontend HOW ARE WE DOING IT? Friday, 18 January 13
4. Metrics and monitoring - Omniture, Ganglia, Graphite, custom tools Automation - Tests, build, sprites, cloudformation Continous deployment - merge to master, Team City, test, deploy AGILE? (or something) Friday, 18 January 13
5. LESS STUFF requirejs nodejs web fonts AMD bower style guide PhantomJS Jasmine Selenium localStorage responsive images curljs jshint grunt Friday, 18 January 13
6. JAVASCRIPT Friday, 18 January 13
7. ‘CUTTING THE MUSTARD’ (thanks Tom Maslen) var guardian = { isModernBrowser: ( ‘querySelector’ in document && ‘addEventListener’ in window && ‘localStorage’ in window ) }; Friday, 18 January 13
8. MICRO LIBRARIES EventEmitter reqwest bonzo qwery bean Friday, 18 January 13
9. JS BOOTSTRAPS var r = new Router(); // Init all common modules first Common.init(config); r.get(‘/sport’, function(req) { SportFront.init(req, config); }); r.get(‘/football/:action/:day’, function(req) { Football.init(req, config); }); Friday, 18 January 13
10. REQUIREJS OPTIMIZER Uglify One app file Splitting up app file Bower Friday, 18 January 13
11. AMD define(['common', 'modules/detect', 'bonzo'], function (common, detect, bonzo) { var theModule = { method: function() { if (detect.touch) { common.doSomething(); } } }; }; return theModule; }); Friday, 18 January 13
12. CURLJS Asynchronous AMD loader 2.5Kb compressed Supports non AMD via plugin (Less jQuery compatible) Friday, 18 January 13
13. REQUIREJS PATHS paths: { “bower”: “components/bonzo/bonzo.min.js”, } BOWER > bower update bonzo Friday, 18 January 13
14. LESS BUILD @import “components/clearless/mixins/ helpers.less” BOWER > bower update clearless Friday, 18 January 13
15. CSS Friday, 18 January 13
16. SMACSS base, layout, module, state optimise for change not ‘pretend semantics’ Friday, 18 January 13
17. HELPERS .pull-left { float: left; } .margin-bottom { margin-bottom: @baseline*2; } .gutter-right { padding-right: @gridGutter; } .border-top { border-top: 1px solid #BEBEBE; } Friday, 18 January 13
18. STYLE GUIDE Ensures you’ve built a system Modules decoupled Type decoupled Friday, 18 January 13
19. LESS CSS pre-processor Mainly use variables and mixins No nesting (except @media) Friday, 18 January 13
20. NODEJS Friday, 18 January 13
21. BUILD PROCESS sbt calls out to nodejs JavaScript: requirejs, jshint CSS: Less (CSS lint?) Spriting: SVG PNG Fonts: base64 encoded WOFF Friday, 18 January 13
22. ICON SPRITES Receive SVGs from design team We decide on format grunticon from Filament group Ouputs CSS with SVG data URIs Outputs CSS / sprited PNG file Friday, 18 January 13
23. WEB FONTS Only support WOFF (nearly) 5(!) fonts totalling 97Kb Base64 encoded Cached in localStorage Friday, 18 January 13
24. PERFORMANCE Friday, 18 January 13
25. THE USUAL STUFF Everything compressed Static assets with 10 year expiry One CSS file (so far?) One JS file (so far?) Friday, 18 January 13
26. CUTTING THE MUSTARD No JavaScript All low res images No web fonts Friday, 18 January 13
27. CRITICAL PATH Friday, 18 January 13
28. CRITICAL PATH Friday, 18 January 13
29. IMAGES More to do Remove from html Demand load more Optimise better Friday, 18 January 13
30. RESPONSIVE IMAGES? Not responding to viewport Responding to size of image Responding to network speed (sort of) Friday, 18 January 13
31. var endTime, startTime, perf = window.performance; if (perf && perf.timing) { startTime = perf.timing.requestStart; endTime = perf.timing.responseStart; } return endTime - startTime; DETECT.JS var loadTime = getPageSpeed(); var speed = ‘low’; if (loadTime < 1000) { speed = 'high'; } return speed; Friday, 18 January 13
32. MONITORING SPEED Friday, 18 January 13
33. OTHER TOOLS WebPagetest Google Critical Path Explorer PhantomJS Friday, 18 January 13
34. THIRD PARTIES? Removing SPOFs document.write() Ads Friday, 18 January 13
35. Thank-you! http://lanyrd.com/ckwqy @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc Friday, 18 January 13