Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

5 Simple Actions to Make a Measurable Impact on Your Responsive Site

1,173 views

Published on

Our President, Patrick Collins, presented at eTail East 2013 in Philadelphia, PA, on 5 Simple Actions to Make a Measurable Impact on Your Responsive Site. Listen to what he had to say, and contact him with any questions or comments at patrick.collins@5thfinger.com.

Published in: Mobile, Technology, Design
  • Be the first to comment

5 Simple Actions to Make a Measurable Impact on Your Responsive Site

  1. 1. 0 President patrick.collins@5thfinger.com 415.578.8929 © 2013 5th Finger 5 Simple Actions to Make a Measurable Impact on Your Responsive Site
  2. 2. 1 • About 5th Finger • Responsive is a Game Changer • 5 Simple Actions to Make a Measureable Impact • Transformative Responsive Design • Questions Contents
  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 Simple Actions for ROI5
  7. 7. 6 Consumers will transact more on a fully featured responsive site, than a high speed dumbed down experience with less content and functionality. 1Your users want the full site
  8. 8. 7 1Your users want the full site… proof 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)
  9. 9. 8 Prioritize your content on each page. How? Use your analytics package and build a heat map of where people click from your home page. Prioritize those elements first and optimize. 1Your users want the full site.. but prioritize carefully
  10. 10. 9 Brands still should include a “full- site link” to satisfy user skepticism created from past minimal mobile experiences. 1Your users want the full site..
  11. 11. 10 2 Speed is Critical to ROI Increased speed means: • Increased ROI • Page load speed • User experience speed
  12. 12. 11 • Specify your page load speed goals, e.g. LTS on iPad2 < 8 seconds • Expert developers know: 1. Image Selection and Optimization (50-75% page download is here). 2. Careful use of Javascript and lazy loading to make it “feel faster”. 3. Minify and gzip all CSS 2 Speed is Critical to ROI … Page Load Speed
  13. 13. 12 Experience Speed Reduce form input. Make this a priority! (Learn from the master at lukew.com) 2 Speed is Critical to ROI … Experience Speed
  14. 14. 13 Experience Speed Specify input type to make keyboard adapt to expected data type (i.e. email or number). 2 Speed is Critical to ROI … Experience Speed
  15. 15. 14 3 Adopt a Mobile First Design Process Keep the design in a flexible grid to maintain the fluidity of the content. Scale up from 1 column on mobile to 3-5 columns on the desktop.
  16. 16. 15 3 Adopt a Mobile First Design Process Designers need to understand HTML and CSS. Since designers will be focusing on the percentages of the sites instead of the pixels, use design tools like Axure to create rapid prototypes and try to avoid tools that are too pixel perfect like Photoshop.
  17. 17. 16 3 Adopt a Mobile First Design Process 670 px 1024 px0 px small and large tablets smartphones desktop 480 px 768px high end smartphones and portrait iPads Nice to have first generation smartphones in portrait mode Must have 1600 px+
  18. 18. 17 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
  19. 19. 18 Transformative Design is a responsive design approach which doesn‟t require you to rebuild your existing website. You are essentially transforming your current site to be responsive. 5 Consider responsive a journey, not a big rebuild
  20. 20. 19
  21. 21. 20
  22. 22. 21 5th Finger Responsive Technology 5thFinger.js Step 2 – 5thFinger.js tags are added into the existing website‟s HTML code. Step 1 – Define „layout flows‟ for device breakpoint. Step 3 – When the site is loaded, 5thFinger.js re-flows pages dynamically, hiding or expanding any content. On Any Existing eCommerce Platform
  23. 23. 22 Summary 1. Users want the full site 2. Speed means skilled developers 3. Adopt a mobile first design process 4. Adjust your analytics and A/B testing strategies immediately 5. Consider responsive a journey, not a rebuild
  24. 24. 23 patrick.collins@5thfinger.com

×