who's winning the mobile web?
DESCRIPTION
This presentation from the Online Information 2013 conference in London, uses the medium of Lolcat to present an overview of the various adaptation methods mobile websites use. Brand head-to-head comparisons include EasyJet vs Ryanair, and Apple vs Microsoft, and four way competitions in the news, charity, and retail sectors. The presentation makes a data-driven case that pure Responsive Design, while marketed as a silver bullet and undeniably attractive enough as a development method to get its own textbooks, slows sites down and results in a poor user experience. It also presents evidence that detection of a user's hardware type presents useful actionable intelligence about the user before a byte is served.TRANSCRIPT
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 [email protected]
• Chris Abbott (DetectRight) - +44 208 464 [email protected]