How to Build a Responsive Website that Converts

#ResponsiveROI | May 14th, 2013

Igor FaletskiCEO at Mobify

@igorskee Peter McLachlan

Chief Architect at Mobify

@b1tr0t

#ResponsiveROI | @mobify

1. GOING MOBILE IN 2013

2. RESPONSIVE & ADAPTIVE SHOWCASE

3. UX DESIGN FOR CONVERSIONS

4. PERFORMANCE FOR CONVERSIONS

5. WHICH APPROACH IS RIGHT FOR YOU?

6. Q&A

IN TODAY’S WEBINAR

#ResponsiveROI

GOING MOBILEIN 2013

Responsive Web DesignAdaptive Web Design

One Web, One URL

WHAT DOES “GOING MOBILE” MEAN TODAY?

#ResponsiveROI

WHAT IS RESPONSIVE WEB DESIGN?

FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIA

Image Credit: Luke Wroblewski, CSS-Tricks

...are the 3 technical ingredients for responsive web design.- Ethan Marcotte

#ResponsiveROI

Image Credit: Brad Frost

WHAT IS ADAPTIVE WEB DESIGN?

#ResponsiveROI

RESPONSIVE& ADAPTIVESHOWCASE

skinnyties.com

#ResponsiveROI

indochino.com

#ResponsiveROI

aritzia.com

#ResponsiveROI

garmin.com

#ResponsiveROI

time.com

#ResponsiveROI

ReSS | nd.edu

#ResponsiveROI

Adaptive | brides.com

#ResponsiveROI

Adaptive | ctshirts.co.uk

#ResponsiveROI

UX DESIGN FOR CONVERSIONS

Simplify your forms

Image Credit: Smashing Magazine

#ResponsiveROI

Optimize for touch across devices

Image Credit: Luke Wroblewski

#ResponsiveROI

Bigger is (usually) better

Font sizeMinimum: 14px

Buttons & touch targetsMinimum: 45px by 45px

MarginsMinimum: 10px

#ResponsiveROI

Hint and reveal (aka progressive disclosure)

Common Icons

m Menu

s Search

g Settings

u Profile

#ResponsiveROI

Consider the interaction

Hover | Fly out Touch | Accordion

#ResponsiveROI

Create image carouselsthat can be swiped

#ResponsiveROI

Adapt for portrait and landscape viewing

#ResponsiveROI

PERFORMANCE FOR CONVERSIONS

1. BLOCKING JAVASCRIPT

2. BANDWIDTH & LATENCY

3. OVERSIZED OR POORLY COMPRESSED IMAGES

4. JAVASCRIPT EXECUTION

5. BROWSER RENDER OPERATIONS

6. CSS PARSING

Most wanted performanceoffenders

#ResponsiveROI

Blocking JavaScript

#ResponsiveROI

Non-blocking resources

#ResponsiveROI

Bandwidth - seems ok, right?

#ResponsiveROI

Latency

Source: Ilya Grigorik (Google)

#ResponsiveROI

Latency

#ResponsiveROI

What does this mean?

0%#

10%#

20%#

30%#

40%#

50%#

60%#

70%#

80%#

90%#

100%#

100ms# 1s# 2s# 3s# 4s# 5s# 6s# 7s# 8s# 9s# 10s#

eCommerce'sales'lost'due'to'load'.me'

Source: Amazon web team (1% conversion loss per 100ms)

#ResponsiveROI

Oversized images

#ResponsiveROI

Large JavaScript - still slow

#ResponsiveROI

Parsing, tree building, layout & painting

#ResponsiveROI

Layout reflow + Painting

#ResponsiveROI

Repaint (redo layout+paint)

#ResponsiveROI

CSS Complexity

#ResponsiveROI

What can you do about these challenges?

#ResponsiveROI

Remove unneeded resources

#ResponsiveROI

Conditional JS loading

#ResponsiveROI

Compress assets

#ResponsiveROI

Pre-fetching

#ResponsiveROI

Pre-fetching

#ResponsiveROI

Other optimizations

Make use of localStorage and “smart” caching Intelligent radio warmup

CDNReduce number of DNS lookups

Set good caching headersCookie-less domains

#ResponsiveROI

WHICH APPROACHIS RIGHT FOR YOU?

Achieving One Web, One URL

Build from scratchReSS

Adaptive TemplatingGet crafty

#ResponsiveROI

Adapt any website for mobile devices—smartphones, tablets and more—with our open platform, tools, and

services that enable amazingly fast and responsive websites.

WHAT IS MOBIFY?

#ResponsiveROI

#ResponsiveROI

ADAPTIVE TEMPLATING

• Customize your site uniquely for a specific device

• One URL on desktops, smartphones and tablets alike

• All CMS supported - simply paste a Mobify tag into your HTML

• Keep your workflows the same

• Maintain control - build it yourself, engage in co-development or get full service

#ResponsiveROI

FAST, RESPONSIVE IMAGES• Dramatically reduce page load time and

increase user engagement

• Accelerate performance of asset rendering in responsive websites

• Reduce bandwidth costs result in a better bottom line for your business

#ResponsiveROI

PERFORMANCEOPTIMIZATION

JavaScript and CSS Acceleration

• Improve mobile load times by reducing the number of HTTP requests

• Use the Mobify API to specify which resources are optimized

#ResponsiveROI

@mobify | mobify.com | hello@mobify.com

#ResponsiveROI | Any Questions?

On Responsive, Adaptive and One WEbhttp://alistapart.com/article/responsive-web-designhttp://bradfrostweb.com/blog/post/beyond-squishy-the-principles-of-adaptive-design/http://www.w3.org/TR/mobile-bp/#OneWeb

On UX Designhttp://www.mobify.com/blog/mobile-design-tip-hint-reveal/ http://www.lukew.com/ff/entry.asp?1691 http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brandhttp://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design http://www.mobify.com/blog/mobile-web-design-for-content-heavy-websites/

On Performance https://developers.google.com/speed/ http://www.igvita.com/ (Gregorik Ilya, Google Performance team) http://stevesouders.com/ (Author of "High Performance Websites, O'reilly & Associates" ) (author of YSlow)

MOREhttp://www.google.com/think/perspectives/make-website-work-across-multiple-devices.htmlhttp://mobify.com

RESOURCES

#ResponsiveROI

1. How are your visitors using your site?2. What is your current mobile experience like?3. What kind of content are you serving up?4. What resources do you have available?5. How much is not being optimized on mobile costing you?6. What will happen to your SEO and social sharing?7. Is your solution secure?8. What about A/B testing and web tracking?9. How much control do you want over development and

maintenance? 10. Is your solution future-proof?

Top 10 Questions: Going Responsive

#ResponsiveROI