Metro - Changing the Paradigm with Swipe

Lightening talk given at the WordPress VIP Developer Conference in Napa Valley May 2013.

Transcript

1. CHANGING THE PARADIGM WITH SWIPE
   

   View Slide

2. Metro.co.uk Swipe Editions 1
   David Jensen (@elgrom)
   Head of Development
   Metro (metro.co.uk)
   UK’s third largest daily newspaper
   Migrated to VIP last December
   WHO AM I?
   

   View Slide

3. Metro.co.uk Swipe Editions 2
   CSS transition that mimics the horizontal
   browsing animation commonly seen in apps.
   WHAT IS SWIPE
   

   View Slide

4. Metro.co.uk Swipe Editions 3
   53% of readers of our tablet app that read past
   the 3rd page go on to complete the whole edition
   WHY SWIPE?
   

   View Slide

5. Metro.co.uk Swipe Editions 4
   A set of posts that have been generated from the content
   we have on our category pages
   We saw much higher engagement when we moved from
   homepage only to one per category
   WHAT DO YOU SWIPE THROUGH?
   

   View Slide

6. Metro.co.uk Swipe Editions 5
   HOW WE BUILT SWIPE
   Check browsers support for History API
   Initial content loads into the centre of three divs
   Next and previous pages are loaded via ajax into divs either side
   Older browsers gracefully degrade to work like a traditional site
   https://github.com/stephanfowler/responsive-swipe
   

   View Slide

7. Metro.co.uk Swipe Editions 6
   As there is only one page we need to constantly adjust the height of adjacent
   divs to allow the swipe action to come in at the top of the next page
   CHALLENGES
   

   View Slide

8. Creating a single page Web App is exponentially more
   difficult than a traditional website
   Some third party JavaScript libraries don’t support
   refreshing due to Document Ready having already fired e.g.
   DFP Ad Words
   Cross browser support is patchy, Firefox has given us a lot
   of issues as has the stock Android Browser so we have had to
   disable swipe for both.
   Metro.co.uk Swipe Editions 7
   CHALLENGES CONTINUED
   

   View Slide

9. Getting people to understand that you can swipe on a web page has been an
   ongoing challenge.
   Relevant content either side is key to this
   Metro.co.uk Swipe Editions 8
   CHANGING THE PARADIGM
   

   View Slide

10. Metro.co.uk Swipe Editions 9
    Average Page Views / Visit are 200%
    higher for swipe users
    Roughly 13% of our Page Views are
    now delivered by a swipe action
    Almost 7% of unique users are now
    engaging in some form of swipe action
    STATISTICS
    

    View Slide

11. Metro.co.uk Swipe Editions 10
    Swipe or scroll?
    THE FUTURE?
    

    View Slide

12. Metro.co.uk Swipe Editions 11
    Metro’s weekly unique mobile traffic growth since 2011
    THE FUTURE IS RESPONSIVE
    0
    200,000
    400,000
    600,000
    800,000
    1,000,000
    1,200,000
    1,400,000
    Feb 28, 2011
    Mar 21, 2011
    Apr 11, 2011
    May 2, 2011
    May 23, 2011
    Jun 13, 2011
    Jul 4, 2011
    Jul 25, 2011
    Aug 15, 2011
    Sep 5, 2011
    Sep 26, 2011
    Oct 17, 2011
    Nov 7, 2011
    Nov 28, 2011
    Dec 19, 2011
    Jan 9, 2012
    Jan 30, 2012
    Feb 20, 2012
    Mar 12, 2012
    Apr 2, 2012
    Apr 23, 2012
    May 14, 2012
    Jun 4, 2012
    Jun 25, 2012
    Jul 16, 2012
    Aug 6, 2012
    Aug 27, 2012
    Sep 17, 2012
    Oct 8, 2012
    Oct 29, 2012
    Nov 19, 2012
    Dec 10, 2012
    Dec 31, 2012
    Jan 21, 2013
    Feb 11, 2013
    Mar 4, 2013
    Mar 25, 2013
    Apr 15, 2013
    Responsive Theme Launched
    

    View Slide

13. Metro.co.uk Swipe Editions 12
    THANKS FOR LISTENING
    

    View Slide