For most retailers, it's no longer if they should do responsive design, it's how. Learn the many different approaches that are now available, and how to determine which is best for you. A critical yet simple analysis of priorities for strategy and execution will be shared, helping you assure responsive success.
2. 1
1. Demystifying the Types of Responsive
Design
2. Matching the Approach to the
Scenario
3. Delivering ROI
Agenda
3. 2
About 5th Finger
We are a team of 50 5th Finger
employees based in San
Francisco and backed by over
1,400 Merkle employees.
About 5th Finger
We are a team of 50
5th Finger employees backed by
over 1,600 big data professionals at
Merkle.
Our acquisition by Merkle adds
multi-channel capabilities that allow
us to optimize and expand our
client services.
2013 DMA Mobile Innovation
Award Finalist
2012 Smarties Winner
Best Mobile Campaign
5. 4
Responsive Web Design is a Game Changer
REASON 1
For the first time, Responsive is
enabling the practical realization of
omni-channel marketing and e-
commerce. Prior solutions were not
maintainable.
REASON 2
Responsive completely unifies silo’ed
teams (mobile vs desktop), silo’ed
code, silo’ed content, and silo’ed
analytics.
REASON 3
One Web with a single URL.
Greatly improved SEO benefits,
much easier URL sharing in email
and social.
7. 6
Demystifying the types of Responsive Design
Technologies and
approaches are being
combined into a single
equation. It can be
confusing. ComplexityofExecution
Site Loading Time
Ground-up RWD
Transformative
+ RESS
Ground-up RWD
+ RESS
Transformative
Larger is More Expensive
*All single site approaches provide SEO
and omni-channel benefits
8. 7
Ground-up Responsive Design
A single website that displays an optimized layout based on
screen width.
It will fluidly change and respond to fit any screen or device
size.
11. 10
Transformative Responsive
Considerations
How soon do you plan
on rebuilding your site?
Is it difficult to get large
site upgrades
approved?
Benefits
Responsive in 7-
14 weeks
Downsides
Dependent upon
stability of existing
site
13. 12
No RESS vs RESS
NO RESS RESS
All HTML, CSS & JS
loaded by phone
Only Select HTML, CSS & JS
loaded by phone
On Device On Device
On Server On Server
4x source files4x source files
4x source files
2x source files
14. 13
Why RESS
Speed
Specific experiences are
possible based on device
Requires more maintenance
Requires a device DB on server. If
device database falls out of date, you
may end up serving the Desktop
page to a brand new phone.
May be dependence upon vendor for
site functionality
Positives Negatives
15. 14
What is Adaptive Web Design?
• Delivers the same outcomes as responsive
(mobile,tablet & Desktop from one URL), however,
the technology approach is different.
• Similar to RESS, the server is determining the
device type and selecting the right page layout.
Downside of this approach is that if your device
database falls out of date, you may end up serving
the Desktop page to a brand new phone.
Heard of Progressive enhancement?
A term for an approach, or process that
means you design with the least common
denominator and add more content as you
expand. Much like – Mobile First Design
17. 16
Considerations
The state of your current site
Lifespan of current site
Do you have an mDot site
Budget
How important is internal ownership
Site Speed
18. 17
Scenario 1: Old Website, With Budget And Support
Typical Solution:
Ground-up Responsive
(or Transformative followed by Ground-up
Responsive)
23. 22
Common E-Commerce Conversion Rates
mDot
Mobile Site
Conversion
Rate: .93%
Accessed on…
Desktop
Tablet
Mobile
Responsive DesignDesktop Site
2.51%
2.6%
.79%
2.51%
3.9%
1.02%
24. 23
I have an mDot, but I want Responsive Design
Assumptions
Current conversion rates: Desktop 2.51%,
Tablet 2.61%, Mobile .93%
New conversion rates: Desktop: 2.51%,
Tablet: 3.92%, Mobile: 1.02%
Average order value: $100
Total Monthly Visitors: 500,000
Costs: Full responsive site rebuild $600,000,
and $2,000 hosting, Transformative
Responsive $130,000
2 Year ROI with
Transformative$1,643,429
2 Year ROI with Ground-
up$1,173,429
mDotDesktop Responsive
25. 24
I’m keeping my mDot, just need a tablet breakpoint
Assumptions
Current conversion rates: Desktop 2.51%,
Tablet 2.61%, Mobile 0.93%
New conversion rates: Desktop: 2.51%,
Tablet: 3.92%, Mobile: 0.93%
Average order value: $100
Total Monthly Visitors: 500,000
Costs: tDot site $100,000 and $2,000 hosting,
Transformative Responsive $100,000
2 Year ROI with
Transformative$1,558,710
2 Year ROI with a tDot
site$939,957
mDotDesktop Responsive mDot
27. 26
1Your users want the full site
mDot site
Load Time : 6.8s
Content : Limited
Conversion Rate : 10.6%
Responsive
Load Time: 7.2s
(5.5% slower)
Content : Complete
Conversion Rate : 11.5%
(10% higher conversion rate)
20% of people use their mobile device as their primary internet device.
- 2013 Pew Research
28. 27
Speed matters
• Have page load speed goals, e.g. < X seconds
over LTE on iphone 4.
• Address experience speed. ie – use the
appropriate keyboard for the input type.
• Expert developers know:
1. Image Selection and Optimization (50-
75% speed improvement).
2. Careful use of Javascript and lazy
loading to make it “feel faster”.
3. Minify and compress all CSS
2
29. 28
Internal Processes
Designers need to understand
HTML and CSS.
• Use design tools like Axure to
create rapid prototypes and try to
avoid tools that are too pixel
perfect like Photoshop.
• Never look at just the desktop
layout, you should be reviewing
all layouts simultaneously.
3
30. 29
4 Consider your Analytics and AB testing strategies.
Requires a complete rethink
of A/B testing and analytics
strategy. Adds a per
breakpoint flavor.
Plan early
31. 30
Is my site old?
Yes
NoYes
NoDo I have a budget?
Do I have time?
Is internal ownership important?
Yes No
NoYes
Consider
RESS
If you answered “No” to any of them, then transformative could be the best approach.
If you answered “Yes” to any of the above factors, ground-up could be the best approach.
Ask Yourself These Questions
32. 31
For more information on responsive,
download our free whitepaper online at:
5thfinger.com/whitepaper/featured
Contact us:
415-294-2058
newbiz@5thfinger.com
THE TRUTHS OF
RESPONSIVE
WEB DESIGN
Notas do Editor
We are a mobile and tablet commerce solutions provider. <pause>We have a product designed to bring responsive design to legacy platforms which cannot be rebuilt.
Add M&MsWe build digital executions and responsive sites for a range of retailers. Wehave 8 responsive design implementations in market which we believe is the highest number of responsive design implementations in the US.
Chart needs work. Info is there.
Speak to staging site considerations and complications if internal team is not prepared for extensive testing.
Positive: With RESS, you can deliver very special experiences on specific devices. iPhone5 can have a different experience. Biggest reason people use it, is images. Downside:you can make that call on the server side. If a new device comes on the market, someone will have to add the device to the master list of devices, figure out what the rules are and adjust. You can have a fallback option, a basic experience but it may not be rendered optimally for device. Data for RESS, sometimes data may not be correct. You are dependent upon the data provided to you. We used to see this with mDot sites.
Why are these so much higher than the prior page of assumptions? Tablet is typically less than PC conversion rates – can we change this? To be 4% compared to Desktop 5%?I may get asked what is annual ecom rev for this company – I calc it as around 60M – is that right? If I get asked, what’s the visitor split between different devices ?