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
   

   View Slide

2. Improve mobile web site
   Responsive future
   New www via the back door?
   WHAT ARE WE DOING?
   Friday, 18 January 13
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. LESS
   STUFF
   requirejs
   nodejs
   web fonts
   AMD
   bower
   style guide
   PhantomJS
   Jasmine
   Selenium
   localStorage
   responsive images
   curljs
   jshint
   grunt
   Friday, 18 January 13
   

   View Slide

6. JAVASCRIPT
   Friday, 18 January 13
   

   View Slide

7. ‘CUTTING THE
   MUSTARD’ (thanks Tom Maslen)
   var guardian = {
   isModernBrowser: (
   ‘querySelector’ in document &&
   ‘addEventListener’ in window &&
   ‘localStorage’ in window
   )
   };
   Friday, 18 January 13
   

   View Slide

8. MICRO LIBRARIES
   EventEmitter
   reqwest
   bonzo
   qwery
   bean
   Friday, 18 January 13
   

   View Slide

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
   

   View Slide

10. REQUIREJS OPTIMIZER
    Uglify
    One app file
    Splitting up app file
    Bower
    Friday, 18 January 13
    

    View Slide

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
    

    View Slide

12. CURLJS
    Asynchronous AMD loader
    2.5Kb compressed
    Supports non AMD via plugin
    (Less jQuery compatible)
    Friday, 18 January 13
    

    View Slide

13. REQUIREJS PATHS
    paths: {
    “bower”: “components/bonzo/bonzo.min.js”,
    }
    BOWER
    > bower update bonzo
    Friday, 18 January 13
    

    View Slide

14. LESS BUILD
    @import “components/clearless/mixins/
    helpers.less”
    BOWER
    > bower update clearless
    Friday, 18 January 13
    

    View Slide

15. CSS
    Friday, 18 January 13
    

    View Slide

16. SMACSS
    base, layout, module, state
    optimise for change
    not ‘pretend semantics’
    Friday, 18 January 13
    

    View Slide

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
    

    View Slide

18. STYLE GUIDE
    Ensures you’ve built a system
    Modules decoupled
    Type decoupled
    Friday, 18 January 13
    

    View Slide

19. LESS
    CSS pre-processor
    Mainly use variables and mixins
    No nesting (except @media)
    Friday, 18 January 13
    

    View Slide

20. NODEJS
    Friday, 18 January 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. WEB FONTS
    Only support WOFF (nearly)
    5(!) fonts totalling 97Kb
    Base64 encoded
    Cached in localStorage
    Friday, 18 January 13
    

    View Slide

24. PERFORMANCE
    Friday, 18 January 13
    

    View Slide

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
    

    View Slide

26. CUTTING THE MUSTARD
    No JavaScript
    All low res images
    No web fonts
    Friday, 18 January 13
    

    View Slide

27. CRITICAL PATH
    Friday, 18 January 13
    

    View Slide

28. CRITICAL PATH
    Friday, 18 January 13
    

    View Slide

29. IMAGES
    More to do
    Remove from html
    Demand load more
    Optimise better
    Friday, 18 January 13
    

    View Slide

30. RESPONSIVE IMAGES?
    Not responding to viewport
    Responding to size of image
    Responding to network speed
    (sort of)
    Friday, 18 January 13
    

    View Slide

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
    

    View Slide

32. MONITORING SPEED
    Friday, 18 January 13
    

    View Slide

33. OTHER TOOLS
    WebPagetest
    Google Critical Path Explorer
    PhantomJS
    Friday, 18 January 13
    

    View Slide

34. THIRD PARTIES?
    Removing SPOFs
    document.write()
    Ads
    Friday, 18 January 13
    

    View Slide

35. Thank-you!
    http://lanyrd.com/ckwqy
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    Friday, 18 January 13
    

    View Slide