Responsive Guardian

Ded01cdab114abe4ec13511e4c25b9bb?s=47 Andy Hume
January 17, 2013

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.

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

January 17, 2013
Tweet

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