who's winning the mobile web?

Who’s winning the Mobile Web?

By DetectRight Limited., in conjunction with Herdl.comAll research ©DetectRight Limited except where stated

Major brands head-to-headResponsive/Adaptive under the spotlight

Adaptation strategies dissected

* warning: contains LOLCats *

Presented @ Online Information 2013, 19th November 2013

About me

• Chris Abbott• We improve online experiences

using our device detection systems• Herdl = preferred deployment

partners

Join in

• Tweet your questions using #DetectRight

• We’re all mobile here!• Fails. Want.

Why are we here?

Why are we here?

• There is only one web.• We use many devices to view it.• It’s the Internet of Things

Why are we here?

• Who uses a smartphone?• Hands up!

Why are we here?

• Who uses a tablet? Hands up!

Why are we here?

• How do we all feel when we can’t find what we need, when we need it?

Why are we here?

• Online, information is available to users at any time and on any device.

Why are we here?

• John Lewis - “mobile traffic will overtake desktop at 5pm on Christmas Day 2013”

• What’s your tipping point? • Why not let us help you find out?

Who’s mobile aware?

Who’s mobile aware?

• Consumers are aware that mobile is important – but are you?

Who supports mobile? Which Magazine top 10 online retailers 2013

Cool cats Makes ceiling cat cryClose, but no lolz1

1. “Pure Responsive” means website is still bloated and zoomed out despite supporting touch

(Responsive Design)

Who’s mobile aware?

• Of the top 10 retailers 80% attempted mobile.

They’ve seen the light.

Who supports mobile? Which Magazine bottom 10 online retailers 2013

Smart Cookiez Oh noez!Close, but no cheezburger1

1. “Pure Responsive” means website is bloated, glitchy and unresponsive, and not at all optimized for mobile.

(Responsive Design)

Who’s mobile aware?

• Of the bottom 10 retailers, only 60% have attempted mobile

That’s not good.

Who supports mobile (generally?)

52.41%47.59%

Mobile Aware Sites

AwareUnaware

The long tail would almost certainly be worse.

How are sites doing it?

3.01%

39.16%

43.98%

10.84%

3.01%

Nothing

Responsive

Specific Mobile

Responsive Design

1) send a full page to the device2) ask the device how big the

screen is3) get the page to rearrange itself

for the screen

Who is aware?

Bank

Charity

e-Commerc

e

Enter

tainmen

t

Govern

mental

Informati

onMed

iaNew

s

Publisher

Socia

l Med

ia

Tech

nologyTra

vel TV

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

50.00% 53.33%

72.73%85.71%

8.33%

22.22%

42.86%

89.47%

18.75%

100.00%

70.00%78.57%

63.64%

Mobile Aware Sites (by sector, top sites)

UnawareAware

100% Mobile Aware

22% Mobile Aware

Social Media Sector Information Sector

Who’s mobile aware?

• More than you might have expected – but not enough.

• Is being “aware” enough?

Let’s talk about speed…

The need for speed.

• After 10 seconds of waiting your users are bored and stressed.

Source: http://www.strangeloopnetworks.com/resources/research/our-need-for-web-speed/

The need for speed

Source: http://www.strangeloopnetworks.com/resources/research/our-need-for-web-speed/

The need for speed

• 57% of users will abandon a slow loading page after 3 seconds

Source: http://www.strangeloopnetworks.com/resources/research/our-need-for-web-speed/

The need for speed

• 78% of users have felt stress or anger while using a slow website

Source: http://www.strangeloopnetworks.com/resources/research/our-need-for-web-speed/

The need for speed

• 4% of users have thrown their mobile phone while using a slow website

Source: http://www.strangeloopnetworks.com/resources/research/our-need-for-web-speed/

Clash of the Titans

Clash of the Titans – Round 1EasyJet vs RyanAir

Friendly and considerateSnappy and App’y

User-hostile9 times slower than EasyJet Mobile Site

Clash of the Titans – Round 1EasyJet vs RyanAir

Verdict: A supersonic knockout for the Orange corner

The need for speed

• Mobile page load time needs to be considered during website design and construction

The need for speed

• “Responsive design” can look cool, but does not help page load time – in fact, it hinders it.

The need for speed

• You’re loading assets when you don’t need them

• Full responsive sites on mobile devices are too heavy

Mobile Data

Mobile data

• Mobile data is a big money business

Mobile data

• Mobile networks are cashing in on increased mobile activity with mobile data limited tariffs

Mobile data

• Serving a desktop website or “pure responsive” version is costing your customers real money

Roaming Price ListSingle Visit

• Apple - £21.80• Pintrest - £27.39• Scholastic - £20.55• Google News – £0.05• Yahoo News - £0.07• Time - £18.49• Reuters - £1.48• BBC - £1.00

Based on O2 roaming charges @ £6 per mb outside Europe

Usability

Usability - Accessibility

• Small screens demand different designs

• Accessibility matters• Between 10% and 20% people with

disabilities*

* Source :W3C

• Touch-swipe enhancements

Usability – Look and feel

Usability – Look and Feel

• Bigger buttons and links for small screens

Usability – Look and Feel

• Remote Control Friendly for Smart TV and Blu-Ray

Usability – Look and Feel

• Target the Internet of Things.• Go that extra mile!• Customers will reward you, wherever

they’re from.

Usability - Functionality• Offer unique attractions to the

coolest tech• How will you serve wearables?• Give sophisticated devices

something sexy.

BBC case study - “Stacking”

Desktop Mobile

Much content is preserved:1) As-is, or with less detail2) Behind dynamic menusAccess to all sections is preserved.

Enhanced BBC Desktop Design

CompleteUI Rewrite

Desktop site directs to Mobile-firstResponsiveWebsite.

Designed by UsableNet, in common with BA, M&S, LizEarle, Dell and Tesco.

Better device detection needed on long tail, but that’s another story!

DEC – getting to the point

Priority

Usability

• How is everyone else doing out there?

• Let’s look at the Good, the Bad and the Ugly

I need information about Cancer…

Cancer Research(mobile friendly)

Prostate Cancer UK(mobile friendly)

Macmillan(mobile friendly)

WRCF(not mobile friendly)

I need a 3D TV right now!

Amazon(mobile friendly)

Argos(mobile friendly)

John Lewis(mobile friendly)

Play.com(spot the TV)

What’s the latest?

BBC News(mobile friendly)

Google News(mobile friendly)

Yahoo News(mobile friendly)

Sky News(cram it all in)

Feeling Referential?

British Library(mobile friendly)

CIA(logo is mobile friendly,Since it’s the only thing

visible on small phones!)

Wiley Online Library(not mobile friendly)

Library of Congress(I’m glad the library is

bigger than this)

Feeling encyclopaedic??

Wikipedia(mobile friendly,

responsive)

Encyclopedia.com(mobile friendly)

Britannica(mobile friendly with

glitches caused by responsiveness)

Encyclo(“Value” encyclopedia)

Quick, there’s been a disaster! DONATE NOW!

DEC(mobile friendly)

Oxfam(mobile friendly)

International Red Cross(not mobile friendly)

American Red Cross(mobile friendly)

Clash of the Titans – round 2!

Clash of the TitansThomas Cook vs Thomson

An app-like experienceOK load speed

More unreadable than a Travel Agent’s small print

Slow to load

Clash of the TitansThomas Cook vs Thomson

Verdict: Thomas Cook takes home the

breakfast buffet bacon

Basic device detection

On the mobile web, errors like thishappen all the time.

?

Basic Device Detection

• To Detect and To Serve

Basic Device Detection

• You need to know what your customer is using to serve content in the right way with the right controls.

Ryanair’s revenge

What is this, 1996?

Keep taking the Tablets…

(Wide browser does not mean tablet!)This is why you need proper Device Detection…

Recap

Recap

Consumers want a good experience on all devices in the Internet of Things

Recap

• Some websites have grasped mobile.• Some sites are still getting around to

it• Some sites hate users.

Recap

• Speed is crucial. Mobile data is still slow.

Recap

• Usability is key• Full desktop

websites on small screens does not work.

Recap

• Data transfer– less is more!• Don’t abuse the user!• Customer first: developer second!

How to address this puzzle?

Weak 3G ConnectionPage Loading Time Averages

Adaptive Mobile redirect None Responsive0

5

10

15

20

25

Average first view page loading times (seconds) across 166 popular websites

Total

Seconds

Above 10s, the visitor will probably give up.

Irony alert!

The need for speed

Bank

Charity

e-Commerc

e

Enter

tainmen

t

Govern

mental

Media

News

Socia

l Med

ia

Tech

nologyTra

vel TV

0.0%

50.0%

100.0%

150.0%

200.0%

250.0%

300.0%

Percentage load time improvements (Mobile Sites)

Big performance increases for all sectors(between 25-300%) over their competitors

Mobile data

• A faster website means a better user experience with less crashes

Mobile data

• Device detection means you can serve optimised content to all sorts of devices…

Mobile data

• Device detection means you can serve optimised content to all sorts of devices… including Windows!

Mobile data

• Mobile optimised data = visitors browse without fear of huge data charges.

Usability

• Device detection is at the heart of Adaptive WebDesign (“AWD”).

• AWD is in the sweet spot between pure mobile andpure responsive.

• “Mobile First Responsive” is the best of both worlds.

Usability

Detect > Adapt > Publish > RespondNOT JUST:Publish > Respond

Clash of the Titans – Round 3Expedia vs Opodo

Simple, and extremely usable.Twice as long to load as

Opodo, but less navigating.

Attractive and simpleFaster than Expedia but with

less functionality

Verdict: ?

Clash of the Titans – Round 3Expedia vs Opodo

Aha! A tie-break! Alas, Opodo is a bit ‘Appless.

Verdict: A technical last-round knockout for Expedia

Basic Device Detection

• Know the device accessing your website and serve the right version to your guests – every time!

More Social than you thought?

• Social Media interaction encourages mobile traffic

• If you have these icons, you’re inviting mobile traffic!

• Sixty percent of Twitter’s 200 million active users log in via a mobile device at least once every month. 

Mobile is not optional

Summary

Summary

Engagement needs:• Speed – no one wants to wait• Style – no one wants ugly, but less

can be more• Substance – no one wants

restrictions• Size – don’t abuse your user

Summary

• All sites need proper device detection

• Free solutions – you get what you pay for

• Don’t DIY it• Ask an expert!

Summary

• Why not support Wearables, Tablets and Superphones?– Get way ahead of your competition– Get good PR– Accessibility brownie points

Summary

• Testing is crucial• Lots of tools available• How’s your site? Test it @

http://www.webpagetest.org• What’s your tipping point? Why not

ask us?

Clash of the Titans – Cage Match!

Clash of the Titans – supermatch!

Apple

Tiny menus

Clash of the Titans – supermatch!

Microsoft

For Android

and iOS…

For other mobiles…

Flawed, but valiant

attempt!

Clash of the Titans – supermatch!

Apple vs Microsoft

Verdict: Surprise win for Microsoft.(C’mon Apple! Give the mobile web some love!)

?

Questions?

• #DetectRight

Contact Points

• #DetectRight• Gareth Morgans (Herdl) - + 44 116

3400 442gareth@herdl.com

• Chris Abbott (DetectRight) - +44 208 464 2295chris@detectright.com