Metro - Going Responsive

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

Transcript

1. HTML5 Roundtable for Publishers #doubleclickhtml5 HTML5 PUBLISHER ROUNDTABLE METRO INNOVATIONS: GOING RESPONSIVE DAVID JENSEN HEAD OF DEVELOPMENT @ELGROM
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
3. HTML5 Roundtable for Publishers #doubleclickhtml5 A responsive web design will fluidly change and respond to fit any screen or device size. RESPONSIVE DESIGN
4. HTML5 Roundtable for Publishers #doubleclickhtml5 Consistent experience Consistent URL Growth in mobile User centred-design Social referrals WHY METRO WENT RESPONSIVE
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
6. HTML5 Roundtable for Publishers #doubleclickhtml5 Big bang: completely new platform, CMS and front end. OUR APPROACH
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
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
9. HTML5 Roundtable for Publishers #doubleclickhtml5 58% METRO.CO.UK
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
11. HTML5 Roundtable for Publishers #doubleclickhtml5 HYBRID APP APPROACH