20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
•Download as PPTX, PDF•
1 like•271 views
This document provides 20 tips for achieving high performance responsive design. Some of the key tips include preferring CSS and fonts over images to reduce file sizes, optimizing images, enhancing touch operations, using lazy loading, employing a content delivery network, validating code, and setting page load speed goals. It also recommends being selective with content, planning the technology approach, getting expert training, designing mobile first or simultaneously across devices, and setting up analytics by breakpoint. The tips are aimed at improving page loading speeds, reducing file sizes, and creating an optimized experience across devices.
Recommended
More Related Content
What's hot
What's hot (19)
Similar to 20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
Similar to 20 Tips for High Performance Responsive Design that the Pros Won’t Tell You (20)
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
- 1. 1 Patrick Collins President, Merkle | 5th Finger pcollins@merkleinc.com © 2014 Merkle 5th Finger 20 Jaw Dropping Tips for High Performance Responsive Design that the Pros Won’t Tell You…
- 2. 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
- 3. ResponsiveJS is a Responsive Design solution suite that turns your existing website into a high performance responsive site. ResponsiveJS Lightweight JavaScript Library Responsive Studio (IDE) Tool allows developers to change code and preview layouts Image Optimization Tool Deliver a faster responsive design experience HIGH PERFORMANCE TECHNOLOGY SUITE
- 4. MUNCHKIN.COM Mobile Visits up 23% Mobile UPT (Units Per Transaction) up 71% Daily Mobile Revenue up 53% Mobile AOV (Average Order Value) up 80%
- 5. 4% 19% 3% 74% THE PROBLEM… PAGES CONTINUE TO GET LARGER
- 6. 20 Tips for High Performance Responsive Design
- 7. 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
- 8. 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
- 9. 3 Enhance touch operations Touchable JavaScript Libraries • jQuery doubletap • Touchy • jGuestures • Thumbs.js • Fastbuttons 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
- 10. 4 Use Lazy Loading 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
- 11. 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN 5 Optimizing OpenSocial Gadgets 0.9s and 5 requests0.55s and 5 requests
- 12. 6 Use Local Caching and Pre-Fetching 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
- 13. 7 Use a Content Delivery Network (CDN) 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
- 14. 8 Validate JS and CSS Code through automated tools jsHint, cssLint 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
- 15. 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
- 16. 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
- 17. 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.
- 18. 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.
- 19. 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
- 20. 14 Balance Branding, Speed and Content 20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN • A site that is too light leaves a consumer looking for the full-site button • A site with too much content is slow • A consumer will engage more on a mobile site when the site experience is consistent across all channels
- 21. 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
- 22. 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
- 23. 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
- 24. 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
- 25. 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
- 26. 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.
- 27. 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%
- 28. 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
Editor's Notes
- Along the way to building ground-up responsive design experiences, we have developed an amazing product, ResponsiveJS. ResponsiveJS is a high speed, easy-to-implement JavaScript framework that transforms your desktop website into a Responsive Design website, optimized across screen sizes for mobile and tablet.
- CHALLENGE: Midway through the implementation of their new desktop site Munchkin, Inc. realized that they wanted to expand the site to include optimization for mobile devices as well. They decided to implement ResponsiveJS as they needed to create a great mobile experience without making modifications to the desktop code base which was already in progress. They chose Merkle | 5th Finger as they wanted a mobile specialist to create the best experience possible.
- Since the end of the 2010 the average web page size has grown from 600kb all in, to a massive 1.6 megabytes, nearly a 300% increase and as we can see from the trend on the graph this rate of growth is not slowing. Images comprise 75% of the download size of a webpage. Focussing on image optimization is a smart first choice.
- So Let me share some of the lessons from years of responsive site development in the trenches. Some of these lessons are performance related, and some are just about how to run a successful implementation.
- Here I’m showing you an example of optimization work we did for a client. Notice the small amount of effort, but significant gain Image Compression will get you. Also notice, there are a number of things you can do to address speed. Today we are really focusing on the biggest impact items that many teams don’t think about when it comes to responsive design. Things like using a CDN and caching will also make a measurable difference, but these are things that most of your teams are hopefully already thinking about from working with a desktop site. Take advantage of device based caching, I.e tell the phone to download and cache your logo, make every subsequent page view that much faster But be practical – don’t over optimize before knowing the capabilities of your team and tools. For example, do not force your content editors to create 6 versions of every graphic (mobile, tablet, desktop in both regular and retina versions) Process: • Dynamic server-side scaling: scale images server-side based on target container size • Design for production scale: plan each breakpoint carefully and ensure your team can deliver assets in multiple sizes • Detect HD/Retina screens and only serve retina images to high pixel density screens • Implement responsive images with Merkle | 5th Finger Image Optimizer at http://studio.5thfinger.com/imageOptimizer/ or libraries like Scott Jehl’s Picturefill (http://scottjehl.github.io/picturefill/) • Caching: server and browser caching can dramatically improve performance Do it all as part of deployment or use an image server such as Scene7
- Due to several questionable design decisions, the client-side speed of the mobile web was crippled. No matter how skilled, developers could never hope to achieve the same speed as native mobile apps - Simulating "clicks“ and other touchable operations were artificially and purposefully delayed, much to the annoyance of the user. "The Google Paper" mostly solved this problem. Mostly. By using a standard Javascript library that implements the common touch events at high speed you can give your users the experience and flexibility that we have all come to expect on touchable devices, plus immediately boosting the performance and responsiveness of your site, so that it feels more similar to an mobile app than a traditional mobile website.
- Bad CSS and JS will slow down your site.
- Provide loading animations while your server is working on loading the next screen. This lets the impatient mobile user know something is happening.
- Specifying page load goals are some of the simplest ways to get your high performance responsive design project off to a running start.
- When you are selective with content and utilizing approaches like capturing or RESS, you don’t have to load all the desktop content on a page so you are decreasing page weight and calls to the server. Which will decrease your page load time.
- Speak to advantages and disadvantages of each. Responsive Design provides you the ultimate in ownership and flexibility, but requires a complete site rebuild. As more and more tools come out and the development and design community becomes more familiar with it, speed will increase. Transformative with ResponsiveJS gets you there in under 10 weeks. Proxy is the old way the industry has mostly moved away from due to its lack of flexibility. There are still some solutions out there that use this method.