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

Metro - Going Responsive

elgrom
October 13, 2014

Metro - Going Responsive

Presentation given at Google for their HTML5 roundtable about Metro's responsive journey.

elgrom

October 13, 2014
Tweet

More Decks by elgrom

Other Decks in Business

Transcript

  1. HTML5 Roundtable for Publishers #doubleclickhtml5
    HTML5 PUBLISHER ROUNDTABLE
    METRO INNOVATIONS:
    GOING RESPONSIVE
    DAVID JENSEN
    HEAD OF DEVELOPMENT
    @ELGROM

    View Slide

  2. HTML5 Roundtable for Publishers #doubleclickhtml5
    Metro.co.uk now provides
    an optimised experience
    for every one of the 3,638
    devices that visited in the
    June 2014.
    Organisation of content,
    navigation and images
    scale to reflect the device
    being used.
    METRO.CO.UK

    View Slide

  3. HTML5 Roundtable for Publishers #doubleclickhtml5
    A responsive web design will
    fluidly change and respond to
    fit any screen or device size.
    RESPONSIVE DESIGN

    View Slide

  4. HTML5 Roundtable for Publishers #doubleclickhtml5
    Consistent experience
    Consistent URL
    Growth in mobile
    User centred-design
    Social referrals
    WHY METRO WENT RESPONSIVE

    View Slide

  5. HTML5 Roundtable for Publishers #doubleclickhtml5
    Key takeaway: if you give
    people a great experience
    on all devices they are
    much more likely to read,
    share and return to your
    content.
    KEY TAKEAWAY

    View Slide

  6. HTML5 Roundtable for Publishers #doubleclickhtml5
    Big bang: completely
    new platform, CMS
    and front end.
    OUR APPROACH

    View Slide

  7. HTML5 Roundtable for Publishers #doubleclickhtml5
    Keep it simple: three breakpoints
    Not just CSS responsive, speed critical
    Device detection
    Dropping whole sidebar on mobile
    Dropping custom font on mobile
    Resize images
    Article preview in three versions
    OUR APPROACH

    View Slide

  8. HTML5 Roundtable for Publishers #doubleclickhtml5
    Small, medium and large ad units
    Only relevant size is requested from DFP
    Inactive units hidden with CSS
    Re-request ads if window crosses breakpoint
    Added complexity
    MANAGING ADS RESPONSIVELY

    View Slide

  9. HTML5 Roundtable for Publishers #doubleclickhtml5
    58%
    METRO.CO.UK

    View Slide

  10. HTML5 Roundtable for Publishers #doubleclickhtml5
    Nov 2012
    7,715,838 UVs
    35% mobile and tablet
    June 2014
    29,155,878 UVs
    60% mobile and tablet
    OUTCOME

    View Slide

  11. HTML5 Roundtable for Publishers #doubleclickhtml5
    HYBRID APP APPROACH

    View Slide