Metro - Changing the Paradigm with Swipe

CHANGING THE PARADIGM WITH SWIPE

Presenter

Presentation Notes

Lightening talk on how and why we decided to enhance the browsing experience on metro.co.uk by allowing users to horizontally swipe through posts Hopefully I can give you an overview of how we approached tackling this problem Some learning from our experiences How our users have taken to it How it has impacted on our traffic volumes.

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?


CSS transition that mimics the horizontal browsing animation commonly seen in apps.

WHAT IS SWIPE


53% of readers of our tablet app that read past the 3rd page go on to complete the whole edition

WHY SWIPE?

Presenter

Presentation Notes

About half way through building our theme we came across this interesting piece of insight from the analytics of our tablet edition. One Friday afternoon we thought it would be a good idea to try to see if we could achieve a similar effect on our theme After a bit of hacking over the weekend my front ender came back in on Monday with a very rough first cut.


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?

Presenter

Presentation Notes

Cron job runs every 300 seconds First five editorially ordered from our top zone Next five are selected from our trending algorithm based on rate of change Finally last twenty are date ordered and de-duplicated from the category Initially


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

Presenter

Presentation Notes

We use a custom jQuery plugin called Responsive Swipe This is based on a library called Pjax to populate the divs with content Browser will support if it supports the history API. If it does, it'll also support CSS transitions. As part of the swipe functionality, we load the page currently being viewed into the centre pane of a three-pane strip. The next and previous pages are preloaded into the other panes. Browsers like IE8 and the stock Android browser get neither swipe nor ajax loading of content - pages load in the traditional way.


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

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.


CHALLENGES CONTINUED

Presenter

Presentation Notes

If you also have to provide graceful degradation and ensure that your site can be properly indexed by Google then this task is exponentially more difficult. We think this has been worthwhile for the learning that it has provided but don’t underestimate the lack of support.

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


CHANGING THE PARADIGM

Presenter

Presentation Notes

We have been constantly iterating since launch to try and get more people to swipe. Doing our best to reinforce the notion of swipe across all devices and types The only option we have tried is an overlay with fade out on mobile Biggest surprise was when we added the clear signposting of swipe at the bottom we got a 200% increase in the side arrows


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


Swipe or scroll?

THE FUTURE?

Presenter

Presentation Notes

We are also currently experimenting with utilising Backbone to deliver an infinite scroll experience We have had roughly 8000 additional content loads per day in the last week Seems to be a more natural experience, but only time will tell


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, 2

011

Mar

21,

201

1A

pr 1

1, 2

011

May

2, 2

011

May

23,

201

1Ju

n 13

, 201

1Ju

l 4, 2

011

Jul 2

5, 2

011

Aug

15,

201

1S

ep 5

, 201

1S

ep 2

6, 2

011

Oct

17,

201

1N

ov 7

, 201

1N

ov 2

8, 2

011

Dec

19,

201

1Ja

n 9,

201

2Ja

n 30

, 201

2Fe

b 20

, 201

2M

ar 1

2, 2

012

Apr

2, 2

012

Apr

23,

201

2M

ay 1

4, 2

012

Jun

4, 2

012

Jun

25, 2

012

Jul 1

6, 2

012

Aug

6, 2

012

Aug

27,

201

2S

ep 1

7, 2

012

Oct

8, 2

012

Oct

29,

201

2N

ov 1

9, 2

012

Dec

10,

201

2D

ec 3

1, 2

012

Jan

21, 2

013

Feb

11, 2

013

Mar

4, 2

013

Mar

25,

201

3A

pr 1

5, 2

013

Responsive Theme Launched


THANKS FOR LISTENING

Metro - Changing the Paradigm with Swipe

Technology

swipe editions

swipe actionalmost

todisable swipe

swipe usersroughly

editionwhy swipe

form of swipe actionstatistics

web page

page views arenow