![Page 1: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/1.jpg)
1
Steen AnderssonVice President
© 2013 5th Finger
How to Find Your Ideal Technical
Responsive Design Approach
![Page 2: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/2.jpg)
2
1. Demystifying the Types of Responsive Design
2. Matching the Approach to the Scenario
3. Delivering ROI
Agenda
![Page 3: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/3.jpg)
3
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 WinnerBest Mobile Campaign
![Page 4: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/4.jpg)
4
We consider our clients to be partners in innovation…
![Page 5: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/5.jpg)
5
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 2Responsive completely unifies silo’ed teams (mobile vs desktop), silo’ed code, silo’ed content, and silo’ed analytics.
REASON 3One Web with a single URL. Greatly improved SEO benefits, much easier URL sharing in email and social.
![Page 6: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/6.jpg)
6
Demystifying the types of Responsive Design
![Page 7: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/7.jpg)
7
Demystifying the types of Responsive Design
Technologies and approaches are being combined into a single equation. It can be confusing.
Com
ple
xit
y o
f Exe
cuti
on
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
![Page 8: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/8.jpg)
8
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.
![Page 9: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/9.jpg)
9
Ground-up Responsive Design
Considerations
Do you have 6-12 months to rebuild?
How long ago did you rebuild your site?
Benefits
Fresh codebase
Downsides
Have to rebuild your website
![Page 10: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/10.jpg)
10
Transformative Responsive
A responsive design approach that uses CSS and Javascript only to make an existing site responsive.
![Page 11: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/11.jpg)
11
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
![Page 12: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/12.jpg)
12
What is RESS?
RESS = REsponsive Server Side
![Page 13: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/13.jpg)
13
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 files2x source files
![Page 14: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/14.jpg)
14
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
![Page 15: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/15.jpg)
15
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
![Page 16: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/16.jpg)
16
Which is the Best Approach for You?
![Page 17: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/17.jpg)
17
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
![Page 18: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/18.jpg)
18
Scenario 1: Old Website, With Budget And Support
Typical Solution:
Ground-up Responsive
(or Transformative followed by Ground-up Responsive)
![Page 19: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/19.jpg)
19
Typical Solution:
Transformative Responsive
Scenario 2: Old Website, Limited Budget And Support
![Page 20: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/20.jpg)
20
Scenario 3: Old Website, Limited Budget And Support
Typical Solution:
Transformative Responsive
![Page 21: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/21.jpg)
21
Scenario 4: Well Maintained Website and mDot, Just Need Tablet
Typical Solution:
Transformative Responsive (Tablet breakpoint only)
![Page 22: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/22.jpg)
22
What’s the ROI for RWD?
![Page 23: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/23.jpg)
23
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%
![Page 24: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/24.jpg)
24
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
![Page 25: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/25.jpg)
25
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
![Page 26: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/26.jpg)
26
Some KeyLearnings
![Page 27: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/27.jpg)
27
1Your users want the full site
mDot siteLoad Time : 6.8sContent : LimitedConversion Rate : 10.6%
ResponsiveLoad Time: 7.2s (5.5% slower)Content : CompleteConversion Rate : 11.5% (10% higher conversion rate)
20% of people use their mobile device as their primary internet device.- 2013 Pew Research
![Page 28: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/28.jpg)
28
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
![Page 29: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/29.jpg)
29
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
![Page 30: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/30.jpg)
30
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
![Page 31: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/31.jpg)
31
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
![Page 32: How to Find Your Ideal Technical Responsive Design Approach](https://reader033.vdocument.in/reader033/viewer/2022061223/54c401424a79596d158b4612/html5/thumbnails/32.jpg)
32
For more information on responsive, download our free whitepaper online at:
5thfinger.com/whitepaper/featured
Contact us:[email protected]