How to Find Your Ideal Technical Responsive Design Approach

1,148 views
1,083 views

Published on

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.

Published in: Mobile, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,148
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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 ?
  • How to Find Your Ideal Technical Responsive Design Approach

    1. 1. 0 Steen Andersson Vice President steen.andersson@5thfinger.com © 2013 5th Finger How to Find Your Ideal Technical Responsive Design Approach
    2. 2. 1 1. Demystifying the Types of Responsive Design 2. Matching the Approach to the Scenario 3. Delivering ROI Agenda
    3. 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
    4. 4. 3 We consider our clients to be partners in innovation…
    5. 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.
    6. 6. 5 Demystifying the types of Responsive Design
    7. 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. 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.
    9. 9. 8 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
    10. 10. 9 Transformative Responsive A responsive design approach that uses CSS and Javascript only to make an existing site responsive.
    11. 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
    12. 12. 11 What is RESS? RESS = REsponsive Server Side
    13. 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. 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. 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
    16. 16. 15 Which is the Best Approach for You?
    17. 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. 18. 17 Scenario 1: Old Website, With Budget And Support Typical Solution: Ground-up Responsive (or Transformative followed by Ground-up Responsive)
    19. 19. 18 Typical Solution: Transformative Responsive Scenario 2: Old Website, Limited Budget And Support
    20. 20. 19 Scenario 3: Old Website, Limited Budget And Support Typical Solution: Transformative Responsive
    21. 21. 20 Scenario 4: Well Maintained Website and mDot, Just Need Tablet Typical Solution: Transformative Responsive (Tablet breakpoint only)
    22. 22. 21 What’s the ROI for RWD?
    23. 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. 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. 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
    26. 26. 25 Some Key Learnings
    27. 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. 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. 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. 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. 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. 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

    ×