Slide 1

Slide 1 text

CHANGING THE PARADIGM WITH SWIPE

Slide 2

Slide 2 text

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?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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?

Slide 5

Slide 5 text

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?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Metro.co.uk Swipe Editions 12 THANKS FOR LISTENING