Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Guardian

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.

Andy Hume

January 17, 2013
Tweet

More Decks by Andy Hume

Other Decks in Technology

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