20 tips for high performance responsive design

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


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


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

Questions?

Contact us:

[email protected], Merkle | 5th Finger and SVP Experience Design

http://5thfinger.com/

mailto:[email protected]

20 tips for high performance responsive design

Mobile

responsive design website

design reviews

design toolset

mobile layouts

breakpoints test performance

state of mobile

time mobile

mobile examples