FIND THE PERFECT FIT: TRICKS OF THE TRADE FOR RESPONSIVE DESIGNAustin Caldwell, Professional Services Manager at Bronto

Why You Should Make the Switch to Responsive Design

The Rise & Reign of Mobile

Responsive DesignBest Practices Common Pitfalls

Tricks of the Trade Q & A

TODAY’S AGENDA

How Many Bronto Customers Are

In The Mobile 500?Internet Retailers ranked by mobile sales

HIGHEST RANKED:#135 - JUSTFAB

$68MM MOBILE SALES (~24% OF TOTAL SALES)

39HOW MANY

BRONTO CUSTOMERSARE IN THE IR MOBILE 500?

THE RISE & REIGN OF MOBILE

Mobile > Desktop

JAN 2015 – MOBILE DEVICES GENERATED 53% OF ALL ONLINE VISITS

JAN 2015 – MOBILE DEVICES GENERATED 24% OF ALL ONLINE REVENUE

JAN 2015 – AVERAGE MOBILE CONVERSION RATE IS 1.62%

Desktop’s share of Total Visits decreased

15%

Smartphone’s share INCREASED 41%

Smartphone Conversion Rate INCREASED 30%

Desktop’s share of Total Revenue decreased 6%

Smartphone’s share INCREASED 50%

Daily Smartphone & Tablet Visits peaked at

9:00pm EST

2015-2014 YEAR OVER YEAR TRENDS

66% OF EMAILS WERE OPENED ON A SMARTPHONE OR TABLET

EMAIL CLIENT MARKET SHARE

EMAIL OPENS BY TIME OF DAY

OPENS BY TIME OF DAY: BLACK FRIDAY AND CYBER MONDAY 2014

WHY YOU SHOULD MAKE THE SWITCH TO

RESPONSIVE DESIGN

RESPONSIVE DESIGNFor Responsive Design, think sweat pants. Nice and comfy with an elastic waistband that expands & contracts based on how often you’ve missed the gym & indulged in dessert. Emails that are designed to be responsive will expand, contract & rearrange based on the space available to them.

ADAPTIVE DESIGNAdaptive designs are like a closet full of pants. Whether you are going on a business meeting or to the pool, there is a pair of pants for every occasion. Adaptive design uses a series of static layouts based on screen resolution breakpoints; it detects the device and calls up the properly sized layout to view.

RESPONSIVE DESIGN VERSUS ADAPTIVE DESIGN

Enhanced User Experience Higher Click-to-Open Rate Higher Conversion Rate

& Bigger SalesReduced Unsubscribe

& SPAM Complaint Rates

WHY YOU SHOULD MAKE THE SWITCH TO RESPONSIVE EMAIL DESIGN

If an email isn’t optimized for mobile, 80% DELETE it &30% UNSUBSCRIBE it

Americans CHECK their Smartphones an average of 150x a day

Responsive Emails have a 21% HIGHER click-to-open rate than non-responsive ones

63% of consumers are INTERESTED to make a purchase if they find an email LOOKS GOOD on their mobile device

85% of consumers will START shopping on one device & FINISH one another

56% of US mobile PURCHASERS state that they made it AFTER receiving an email

WHY YOU SHOULD MAKE THE SWITCH TO RESPONSIVE EMAIL DESIGN

RESPONSIVE DESIGN BEST PRACTICES

LAYOUT• Mobile first approach• 500-650 pixel width• Stacking columns

• Desktop 2-4 columns• Mobile 1 column

• Distinguish content sections with spacing or borders

• Left aligned text• Embrace white space

PRE-HEADER AND HEADER

• Simplify navigation• Hide unnecessary info• Include preview snippet text and link to

online version• Johnson Box (preview pane above the

fold)• Top 400 pixels - most engaging part of your email• Hero section highlighting primary call to action• Header shouldn’t exceed 150 pixel height

Desktop Johnson Box

Mobile Johnson Box

STYLE

• Simplistic, flat design• Make feature headers and product offers

readily clickable• Avoid background images layered with text• Readable font

• Headline – minimum 22 pixels

• Body Copy – minimum 16 pixels

• Custom fonts must be embedded in the HTML and should fallback to a standard, web-safe font

COPY AND CONTENT• Might be read on the go – must be impactful

and quickly recognizable• Use short sentences and clear call to actions• Merchandising should be in stacking

columns• Images should be retina pixel density

• Create and save images at 2x aspect ratio of original

• Make sure media queries aren’t set to a fixed size that conflicts with scaling

• Limit file size by saving images for web at 80% quality

Save 600x370 Hero at 1200x740 pixels

CALL TO ACTION• Make it bigger!

• Buttons should be a minimum of 44x44 pixels

• Must be proximal to content with large tap targets

• Embrace white space• Optimize for images off• Click to call functionality• Auto-apply coupon codes or style them with

HTML for easy copy/paste

Hero CTA – 215 x 60 pix-els

FOOTER• Highlight your most popular website

categories or value propositions

• Don’t hide the unsubscribe

• Include organization’s complete contact details

• Explain why recipients are receiving your email

• Add social sharing and forward to a friend

TRICKS OF THE TRADE

MEDIA QUERIES

• Detect the screen size of a device and turn on different sets of rules based on that screen size• If the viewport size is within the media

query constraints, apply that style

• !important property ensures that any inline style is overridden

ALWAYS FALL BACK TO INLINE CSS• Code as though Media Queries

don’t exist• Media Query swaps Header image

with ‘headerswap’ class• Inline CSS adjusts width and

height scaling if media queries don’t override styling

MEDIA QUERY - CHANGE LAYOUT• Header Navigation displays on

Desktop, but hides on mobile with ‘mobhide’ class

• If on Mobile, display Navigation in Footer with ‘mobshow’ class

MEDIA QUERY - ENLARGE FONTS• Font sizes inside table cells with

class name ‘embiggen’ are increased 130%

MEDIA QUERY - SCALE IMAGES• Images with class name ‘third’

scale up to 100% on mobile

CSS TRICK - BULLETPROOF BUTTONS• Style declarations will transform

tags with a class of “cta” into large buttons that span the width of the content area

CSS TRICK - IMPORT CUSTOM FONTS• @import CSS custom font styling

• Doesn’t work for Outlook• Fallback to Inline CSS web safe fonts

• Link fonts through <style> tag in header

COMMON PITFALLS

ALWAYS BE TESTING

TROUBLESHOOTING COMMON RENDERING ERRORS

Gmail App doesn’t adhere to CSS media queries

Android OS will not scale to fit screen

AOL, Outlook and Yahoo block images by default

Outlook doesn’t render background images

Outlook only displays the first frame of animated gifs

Rich media, like Flash or AJAX, doesn’t work

OTHER KNOWN ISSUES

– Bob Ross

“That’ll be our little secret”

ANY QUESTIONS ???Austin Caldwell, Professional Services Manager at Bronto