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
   

   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