$30 off During Our Annual Pro Sale. View Details »

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. Improve mobile web site Responsive future New www via the

    back door? WHAT ARE WE DOING? Friday, 18 January 13
  2. 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
  3. 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
  4. LESS STUFF requirejs nodejs web fonts AMD bower style guide

    PhantomJS Jasmine Selenium localStorage responsive images curljs jshint grunt Friday, 18 January 13
  5. ‘CUTTING THE MUSTARD’ (thanks Tom Maslen) var guardian = {

    isModernBrowser: ( ‘querySelector’ in document && ‘addEventListener’ in window && ‘localStorage’ in window ) }; Friday, 18 January 13
  6. 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
  7. 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
  8. CURLJS Asynchronous AMD loader 2.5Kb compressed Supports non AMD via

    plugin (Less jQuery compatible) Friday, 18 January 13
  9. 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
  10. 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
  11. 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
  12. WEB FONTS Only support WOFF (nearly) 5(!) fonts totalling 97Kb

    Base64 encoded Cached in localStorage Friday, 18 January 13
  13. 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
  14. IMAGES More to do Remove from html Demand load more

    Optimise better Friday, 18 January 13
  15. RESPONSIVE IMAGES? Not responding to viewport Responding to size of

    image Responding to network speed (sort of) Friday, 18 January 13
  16. 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