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

Metro - Going Responsive

October 13, 2014

Metro - Going Responsive

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


October 13, 2014

More Decks by elgrom

Other Decks in Business


  1. 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
  2. HTML5 Roundtable for Publishers #doubleclickhtml5 A responsive web design will

    fluidly change and respond to fit any screen or device size. RESPONSIVE DESIGN
  3. HTML5 Roundtable for Publishers #doubleclickhtml5 Consistent experience Consistent URL Growth

    in mobile User centred-design Social referrals WHY METRO WENT RESPONSIVE
  4. 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
  5. 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
  6. 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
  7. 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