Post on 04-Dec-2014
description
www.yottaa.com Confidential © 2014 Yottaa, Inc. All Rights Reserved.
Dirty Little (not so) Secrets
Responsive Web Design
www.yottaa.com 2
Agenda
Confidential © All Rights Reserved.
Mobile site challengesResponsive Web Design (RWD)What it doesDifferences highlightedQ&A
www.yottaa.com 3Confidential © All Rights Reserved.
DO YOU HAVE A MOBILE SITE?
www.yottaa.com 4
20% of electronics purchases using mobile
35% of mobile visitors prefer www to m.site
80% of mobile revenue from full site browsing
…so yes, yes you do.Confidential © All Rights Reserved.
Do you need one?
www.yottaa.com 5Confidential © All Rights Reserved.
Mobile is all the RAGE…
64%OF SMARTPHONE USERS EXPECT PAGES TO LOAD IN
UNDER 4s
$1BnAPPAREL &ACCESSORIESPURCHASES
in Q113
71%Of all retail transactions
SMARTPHONEUSERS SHOPVIA MOBILE
48%
Expect mobile to be fasterthan desktop
85%Will go to a competitorto transact
42%Will neverreturn toyour site
29%
www.yottaa.com 6Confidential © All Rights Reserved.
And RAGE the users do…
51% say websites hard to navigate & use
46% say product images are too small
41% are concerned about security
26% feel that checkout is frustrating
www.yottaa.com 7Confidential © All Rights Reserved.
Which is reflected in the conversion rates
Website Visits by Device
Smartphone Revenue / Session
www.yottaa.com 8Confidential © All Rights Reserved.
What it means broadly…and for you?
4.3%in REVENUE
2 secondsslower
Pages that were…
DROP
2.2 secondsimprovement in
landing page speedINCREASED
DOWNLOADS
15.4%by
60% faster
INCREASEDDONATION CONVERSION
MakingBarack Obama’s website
14%
1 seconddelaycauses a
7%in CONVERSIONS
1 seconddelaycauses a
16%in CUSTOMERSATISFACTION
DROP DROP
1 seconddelaycauses an
11%in PAGE VIEWS
DROP
www.yottaa.com 9
Enter Responsive Web Design
Confidential © All Rights Reserved.
Advantages Disadvantages
Most consistent user experience possible Requires additional code re-working
No duplicate content maintains rankings Difficult to differentiate mobile content
Max link value. No risk of split link value Could affect usability/CRO
No redirects = low latency & fewer errors New code may affect rankings
www.yottaa.com 10
Little r – presentation mostly– Fluid, flexible layout– Media queries– Responsive images
Big R– Dynamic serving
BOTH are better than
Confidential © All Rights Reserved.
The difference between little r and big R
www.yottaa.com 11
Cannot impact 3rd party dynamic content like social
media or ads
CONTENT DELIVERY NETWORKS
Confidential © All Rights Reserved.
Mounting pressure to implement big R RWDPA
GE L
OA
D T
IME IT
EFFO
RT &
TIM
E
SITE LAUNCH ONGOING MAINTENANCE AND USER ENGAGEMENT EFFORTS
UPDATE CONTENT & IMAGES
ADD SOCIAL MEDIA WIDGETS
ADD REAL TIME PERSONALIZATION
A/B TEST PAGE CONTENT
Hiding components cannot keep pace with ongoing User & Marketing needs
Cannot control page load behavior, content
priority
FRONTEND OPTIMIZATION
Manual effort for every content change
DO IT YOURSELF
www.yottaa.com 12
Hidden content on most (eCommerce) sites
Confidential © All Rights Reserved.
Trust Icons
High-Res Images
Long-scrolling pages
Social Media
Dynamic Content
In Addition:• A/B Tests• Analytic tracking• Beacons• Chat• Personalization• Pixels• RWD w/out RESS
Visitors expect fast, flawless
experiences on any device
Marketing needs social media and other tags to engage visitors
IT needs control to ensure speed, scalability and security
www.yottaa.com 13Confidential © All Rights Reserved.
Where hiding content breaks down
www.yottaa.com 14
Time to Display 2.942sec
Time to Interact 8.436sec
Page Weight 831KB
Round Trips 76
3rd Party Domains 17
Confidential © All Rights Reserved.
Example: Desktop site
www.yottaa.com 15
Time to Display 1.495sec
Time to Interact 3.294sec
Page Weight 356KB
Round Trips 50
3rd Party Domains 14
Confidential © All Rights Reserved.
Example: Mobile site
www.yottaa.com 16
Time to Display 0.940sec
Time to Interact 2.246sec
Page Weight 344KB
Round Trips 42
3rd Party Domains 14
Confidential © All Rights Reserved.
Example: Mobile site w/RESS
www.yottaa.com 17Confidential © All Rights Reserved.
Visualize the difference (focus on 2.5sec)
www.yottaa.com 18
Reviews load on-demand– Hidden behind a tab– Only visible in 3rd scroll viewport– Requires 3rd party domain
Trust badges in footer deferred– Only visible in 4th scroll viewport– Requires 3rd party domain
Confidential © All Rights Reserved.
What is different?
www.yottaa.com 19
Dynamically serve images– Adaptive-images.com– Blueberry.com– Retina-images.complexcompulsions.com
Optimize fonts/typography– Fittextjs.com– Lettering.js.com
Confidential © All Rights Reserved.
Other common optimizations in the wild
THANK YOU
Confidential © All Rights Reserved. www.yottaa.com 20