20 Tips for High Performance Responsive Design that the Pros Won’t Tell You

1

Patrick CollinsPresident, Merkle | 5th [email protected] © 2014 Merkle 5th Finger

20 Jaw Dropping Tips for High Performance Responsive Design that the Pros Won’t Tell You…

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

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 ToolDeliver a faster

responsive design experience

HIGH PERFORMANCE TECHNOLOGY SUITE

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%

4%

19%

3%

74%

THE PROBLEM… 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

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


3 Enhance touch operations

Touchable JavaScript Libraries

• jQuery doubletap

• Touchy

• jGuestures

• Thumbs.js

• Fastbuttons


4 Use Lazy Loading



5 Optimizing OpenSocial Gadgets

0.9s and 5 requests0.55s and 5 requests

6 Use Local Caching and Pre-Fetching


7 Use a Content Delivery Network (CDN)


8 Validate JS and CSS Code through automated tools jsHint, cssLint


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.


10 Make a list of supported browsers and breakpointsTest performance and layouts for browsers rather than devices



.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.


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


14 Balance Branding, Speed and Content


• 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

15 Get Experts or Train WellDesigner and Developer skill sets will need to change. The devil is in the details.


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.


17 Change How You Do Design ReviewsReview mobile layouts with desktop layouts to understand the implications of changes across all screens


18 Expand Your Design ToolsetLook to tools that will help you create efficiency in iterating and reviewing, like Axure and InVision


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 Setup Analytics by BreakpointA/B Testing, Personalization and Responsive Design is like walking and chewing gum. Plan it early. It’s hard.


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


Thank you

[email protected], Merkle 5th Finger

http://5thfinger.com/

mailto:[email protected]

20 Tips for High Performance Responsive Design that the Pros Won’t Tell You

Mobile

Transcript of 20 Tips for High Performance Responsive Design that the Pros Won’t Tell You