Date post: | 19-Jun-2015 |
Category: |
Mobile |
Upload: | 5th-finger |
View: | 1,065 times |
Download: | 0 times |
1
Patrick CollinsPresident, Merkle | 5th [email protected] © 2014 Merkle | 5th Finger
20 Tips for High Performance Responsive Design
• About Merkle | 5th Finger
• The State of Mobile and Responsive Design
• 20 Tips for High Performance Responsive Design
• Q & A
CONTENTS
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
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
MOBILE & TABLET IS NOW 21% OF ONLINE REVENUES
Desktop Web; 79%
Tablet; 13%
Smartphone; 8%
SIGNIFICANT GROWTH OF MOBILE & TABLET REVENUES IN THE PAST 12 MONTHS
Source: “The State of Retailing Online 2014” - Forrester Research
RESPONSIVE DESIGN IS A 2014 PRIORITY
Source: e-tailing group 2014 Merchant Survey
MANY MID AND LARGE ORGANIZATIONS ARE ALREADY THERE
SITE SPEED IS A CONCERN AMONG CONSUMERS
4%
19%
3%
74%
.. AND YET PAGES CONTINUE TO GET LARGER
20 Tips for High Performance Responsive Design
1 Prefer CSS & Fonts over ImagesUse 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
Performance is a Loaded Term
Page Size – total data to deliver the pagePage Load Time – how fast it feelsUser Experience Speed – the ability to provide a user the information they need, and your ability to efficiently deliver that experience
2 Put Your Energy Into Image OptimizationThis 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
3 Enhance touch operations
Touchable JavaScript Libraries
• jQuery doubletap
• Touchy
• jGuestures
• Thumbs.js
• Fastbuttons
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
4 Use Lazy Loading
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
5 Optimizing OpenSocial Gadgets
0.9s and 5 requests0.55s and 5 requests
6 Use Local Caching and Pre-Fetching
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
7 Use a Content Delivery Network (CDN)
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
8 Validate JS and CSS Code through automated tools jsHint, cssLint
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
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
10 Make a list of supported browsers and breakpointsTest performance and layouts for browsers rather than devices
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
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.
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 ContentUse 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.
13 Plan Your Technology ApproachTechnology will play a key role in speed, ease of implementation, maintenance and website experience ownership.
Responsive Design
Adaptive RESS0
2
4
6
8
10
FlexibilityEase of Implementa-tionSpeed
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
14 Balance Branding, Speed and Content
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
15 Get Experts or Train WellDesigner and Developer skill sets will need to change. The devil is in the details.
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
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
17 Change How You Do Design ReviewsReview mobile layouts with desktop layouts to understand the implications of changes across all screens
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
18 Expand Your Design ToolsetLook to tools that will help you create efficiency in iterating and reviewing, like Axure and InVision
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
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
20 TIPS FOR HIGH PERFORMANCE RESPONSIVE DESIGN
20 Setup Analytics by BreakpointA/B Testing, Personalization and Responsive Design is like walking and chewing gum. Plan it early. It’s hard.
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%
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