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.

20 Tips for High Performance Responsive Design

1,870 views

Published on

Patrick Collins, President of Merkle | 5th Finger, gave this great presentation on 20 Tips for High Performance Responsive Design at eTail East 2014 in Philadelphia, PA.

Learn the tips and tricks Responsive Design experts use to achieve fast page load times and elegant user experiences. Dive a little deeper and understand what organizational considerations and processes will help you build the necessary structure to create and support an effective Responsive Design experience. In these 30 minutes, you will glimpse into the trenches of the Responsive Design experts, and see what lessons their numerous Responsive Design site builds have yielded.

For any questions, please contact Patrick Collins at patrick.collins@5thfinger.com

Published in: Mobile
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

20 Tips for High Performance Responsive Design

  1. 1. 1 Patrick Collins President, Merkle | 5th Finger patrick.collins@5thfinger.com © 2014 Merkle | 5th Finger 20 Tips for High Performance Responsive Design
  2. 2. • About Merkle | 5th Finger • The State of Mobile and Responsive Design • 20 Tips for High Performance Responsive Design • Q & A CONTENTS
  3. 3. EXPERTS IN HIGH PERFORMANCE RESPONSIVE DESIGN Our digital experience agency contains 233 Creatives, UX Specialists, Technologists, and Marketing Analysts. We personalize, optimize & mobilize brand experiences to maximize customer conversion informed by data, technology & analytics
  4. 4. HIGH PERFORMANCE RESPONSIVE DESIGN TECHNOLOGY ResponsiveJS is our highspeed, easy-to-implement JavaScript framework that transforms your existing desktop website into a Responsive Design website, optimized across screen sizes for mobile and tablet. See us in: The Forrester WaveTM: Mobile Commerce Solution Providers, Q4'13
  5. 5. MOBILE & TABLET IS NOW 21% OF ONLINE REVENUES Desktop Web, 79% Tablet, 13% Smartphone, 8%
  6. 6. SIGNIFICANT GROWTH OF MOBILE & TABLET REVENUES IN THE PAST 12 MONTHS Source: “The State of Retailing Online 2014” - Forrester Research
  7. 7. RESPONSIVE DESIGN IS A 2014 PRIORITY Source: e-tailing group 2014 Merchant Survey
  8. 8. MANY MID AND LARGE ORGANIZATIONS ARE ALREADY THERE
  9. 9. SITE SPEED IS A CONCERN AMONG CONSUMERS
  10. 10. 4% 19% 3% 74% .. AND YET PAGES CONTINUE TO GET LARGER
  11. 11. 20 Tips for High Performance Responsive Design
  12. 12. 1 Prefer CSS & Fonts over Images Use fonts for icons and make graphic elements through CSS rather than images as much as possible. Only photos should remain image files. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  13. 13. Performance is a Loaded Term Page Size – total data to deliver the page Page Load Time – how fast it feels User Experience Speed – the ability to provide a user the information they need, and your ability to efficiently deliver that experience
  14. 14. 2 Put Your Energy Into Image Optimization This includes serving properly scaled and compressed images. This will often reduce a page size down by more than 50% Desktop Image : 70kb PNG Compression : 19.1kb Mobile Optimized : 6.8kb 73% smaller 90% smaller 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  15. 15. 3 Enhance touch operations Touchable JavaScript Libraries • jQuery doubletap • Touchy • jGuestures • Thumbs.js • Fastbuttons 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  16. 16. 4 Use Lazy Loading 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  17. 17. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN 5 Optimizing OpenSocial Gadgets 0.9s and 5 requests0.55s and 5 requests
  18. 18. 6 Use Local Caching and Pre-Fetching 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  19. 19. 7 Use a Content Delivery Network (CDN) 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  20. 20. 8 Validate JS and CSS Code through automated tools jsHint, cssLint 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  21. 21. 9 Provide Feedback to Users When Processing Request Provide loading animations while your server is working on loading the next screen. This lets the impatient mobile user know something is happening. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  22. 22. 10 Make a list of supported browsers and breakpoints Test performance and layouts for browsers rather than devices 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  23. 23. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN . 11 Specify your page load speed goals E.g. LTS on iPad 2 < 4 seconds. Goals make team happy.
  24. 24. Available in HTML in footer Same message/CTA is repeated in two places on desktop. It is available under the “Shop” menu in mobile. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN 12 Be Selective With Content Use mobile real estate wisely and focus on the conversion flow. Improve page load speed by removing the extra fat of content and graphics or other unnecessary widgets.
  25. 25. 13 Plan Your Technology Approach Technology will play a key role in speed, ease of implementation, maintenance and website experience ownership. 0 2 4 6 8 10 Responsive Design Adaptive RESS Flexibility Ease of Implementation Speed 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  26. 26. 14 Balance Branding, Speed and Content 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  27. 27. 15 Get Experts or Train Well Designer and Developer skill sets will need to change. The devil is in the details. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  28. 28. 16 Design and build Mobile First or “At the same time” Mobile first doesn’t work for everyone, but failure to account for mobile while designing for desktop can lead to a slow site and redesigns. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  29. 29. 17 Change How You Do Design Reviews Review mobile layouts with desktop layouts to understand the implications of changes across all screens 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  30. 30. 18 Expand Your Design Toolset Look to tools that will help you create efficiency in iterating and reviewing, like Axure and InVision 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  31. 31. 19 Mobile Always Wins If you have a feature planned that conflicts between Mobile and Desktop, pick the version that works best with Mobile (examples: modal popups, custom fields like drop downs, nested scroll, date validation and masks) 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  32. 32. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN 20 Setup Analytics by Breakpoint A/B Testing, Personalization and Responsive Design is like walking and chewing gum. Plan it early. It’s hard.
  33. 33. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN AOV Conversion Rate Test 1: Add-ons Test (device agnostic results) +5.6% +2% AOV Conversion Rate Test 2: Add-ons on Smartphone +5.3% -28% Test 3: Add-ons on Tablet +5.7% +8% Test 4: Add-ons on Desktop +5.6% +15%
  34. 34. 1. Prefer CSS & Fonts over Images 2. Put your energy into image optimization 3. Enhance touch operations 4. Use lazy loading 5. Optimizing open social gadgets 6. Use local caching 7. Use a Content Delivery Network 8. Validate JS and CSS Code through automated tools 9. Provide feedback to users when processing request 10. Make a list of supported browsers and breakpoints 11. Specify your page load speed goals 12. Be selective with content 13. Plan your technology approach 14. Balance branding, speed and content 15. Get experts or train well 16. Expand your design toolset 17. Design and build Mobile First or “At the same time” 18. Mobile Always Wins 19. Change How You Do Design Reviews 20. Setup Analytics by Breakpoint 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
  35. 35. Thank you Questions? Contact us: 5thfinger.com patrick.collins@5thfinger.com President, Merkle | 5th Finger and SVP Experience Design

×