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

Planting the responsive seed

Planting the responsive seed

The Guardian recently released a new mobile site on m.guardian.co.uk, but in fact it is the planting of a seed of a more ambitious project to replace the desktop website with a future-friendly, single domain responsive product. We will learn how we are using mobile-first responsive techniques and client-side technology to set the foundations of that future, what have we learnt along the way and how it will scale.

Patrick Hamann

June 26, 2013
Tweet

More Decks by Patrick Hamann

Other Decks in Programming

Transcript

  1. Planting the
    responsive seed
    Patrick Hamann
    Breaking Borders - June 2013
    g

    View Slide

  2. Who am I?
    • @patrickhamann
    • Client-side developer
    • CSS and performance geek
    g

    View Slide

  3. Who I work for
    g

    View Slide

  4. Making the next generation of the Guardian
    g

    View Slide

  5. What I’m going to cover today
    • Why we needed to go responsive
    • How we are doing it
    • What we have learnt along the way
    • Questions
    g

    View Slide

  6. The problem g

    View Slide

  7. Latest news, sport and comment from the Guardian | The Guardian
    Search
    http://www.guardian.co.uk
    g

    View Slide

  8. g
    Code smells

    View Slide

  9. 15-30% of the Guardian traffic is mobile
    g
    Tablet
    11%
    Mobile
    21%
    Dektop
    68%
    Dektop
    Mobile
    Tablet

    View Slide

  10. A new device landscape
    http://www.flickr.com/photos/brad_frost/7387823392

    View Slide

  11. g
    Creating a separate mobile experience can actually be a blessing in
    disguise. It gives you time to re-evaluate, prioritize, strip down and
    focus on what’s really important. [...] this process eventually
    changes the way you think about your content, infrastructure, user
    experience and approach.
    Brad Frost
    Planting the seed for a responsive future - 2012
    http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/

    View Slide

  12. Benefits of Planting the seed
    g
    • Start with a clean slate
    • Content strategy
    • Mobile first
    • Future-friendly platform
    • Buy one get 4 free!

    View Slide

  13. The solution g

    View Slide

  14. What are we doing?
    g
    m. www.

    View Slide

  15. How are we doing it?
    g
    • Build upon open software and API’s
    • Progressive enhancement
    • Detect features not devices
    • Modular decoupled systems
    • Performance by design
    • Build upon open software and API’s
    • Progressive enhancement
    • Detect features not devices
    • Modular decoupled systems
    • Performance by design

    View Slide

  16. Some tech
    g
    Scala
    Play!
    RequireJS
    Sass
    AWS
    PhantomJS
    Selenium
    localStorage
    CORS
    Grunt NodeJS
    Web Fonts
    Bower
    Jasmine

    View Slide

  17. Some tech
    g
    Content API
    http://www.guardian.co.uk/open-platform

    View Slide

  18. How are we doing it?
    g
    • Build upon open software and API’s
    • Progressive enhancement
    • Detect features not devices
    • Modular decoupled systems
    • Performance by design

    View Slide

  19. g
    As a web developer “cutting the mustard” provides me with an
    opportunity to wipe the client-side development slate clean and start
    afresh.. [...] The increasing popularity of mobile web browsing, and
    the availability of responsive web design has forced my team to
    refactor how we think a modern webpage should be built.
    Tom Maslen
    BBC News - 2012
    http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

    View Slide

  20. Cutting the mustard - modern browser test
    g

    View Slide

  21. It’s about browsers not devices

    View Slide

  22. HTML4 vs HTML5
    g

    View Slide

  23. How are we doing it?
    g
    • Build upon open software and API’s
    • Progressive enhancement
    • Detect features not devices
    • Modular decoupled systems
    • Performance by design

    View Slide

  24. Your doing it wrong
    http://www.flickr.com/photos/wickedboy007/8999289788

    View Slide

  25. Web fonts
    g
    • Detect support
    • Fetch async
    • Base64 encoded
    • Batch all fonts as strings in one request
    • Cache in localStorage
    • Reduces HTTP requests
    • Mobile HTTP cache is unreliable

    View Slide

  26. Responsive images
    g
    • Assume everyone is on a low connection
    • Remove from DOM
    • Detect connection
    • Assuming connection may be bad...
    • Demand load based on features

    View Slide

  27. Responsive images
    g
    WTF?! No SRC attribute?

    View Slide

  28. g
    https://speakerdeck.com/paulrobertlloyd/the-edge-of-the-web-redux

    View Slide

  29. How are we doing it?
    g
    • Build upon open software and API’s
    • Progressive enhancement
    • Detect features not devices
    • Modular decoupled systems
    • Performance by design

    View Slide

  30. Swimlaning
    g
    • Each section of the website is its own application and server
    • (fronts, articles, video, galleries, tag e.t.c)
    • Deploy individually
    • If one application fails, the rest continue unharmed
    • Enforce one blocking request for “core content” per page

    View Slide

  31. Lazy load secondary content
    g
    Sharing
    Related content
    Comments
    Popular content

    View Slide

  32. Anatomy of a module
    g
    .js .html
    + .scss
    +

    View Slide

  33. AMD
    g

    View Slide

  34. OOCSS - BEM flavored
    g
    http://bem.info/

    View Slide

  35. How are we doing it?
    g
    • Build upon open software and API’s
    • Progressive enhancement
    • Detect features not devices
    • Modular decoupled systems
    • Performance by design

    View Slide

  36. User load time expectations
    g
    http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were-last-year/

    View Slide

  37. Performance first
    g
    • Compress everything, even HTML (whitespace & gzip)
    • Caching
    • Far -future headers, max-age, invalidation
    • Latency is a big problem on mobile
    • CDN’s are one solution to this
    • Load only bare minimum (Images, CSS & JS)
    • R.U.M

    View Slide

  38. Navigation timing API
    g

    View Slide

  39. R.U.M - Desktop
    g

    View Slide

  40. R.U.M - Mobile
    g

    View Slide

  41. What we have learnt g

    View Slide

  42. g
    Design is not a service,
    designers must sit in the team.

    View Slide

  43. g
    When you can, design in the browser.
    At the least, decide in the browser.

    View Slide

  44. g
    Testing is hard.
    • It is impossible to test on every device
    • Build up small core library (Android 2.3, iOS 4, Blackberry 9)
    • Focus on browsers

    View Slide

  45. g
    Every new feature must be justified.
    • Optimize an existing feature
    • Remove an existing feature
    • Don’t add the new feature

    View Slide

  46. Thank you!
    @patrickhamann
    http://github.com/guardian/frontend
    Breaking Borders - June 2013
    g
    We’re hiring!

    View Slide