Find the Perfect Fit: Tricks of the Trade for Responsive Design
-
Upload
austin-caldwell -
Category
Marketing
-
view
167 -
download
0
Transcript of Find the Perfect Fit: Tricks of the Trade for Responsive Design
![Page 1: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/1.jpg)
FIND THE PERFECT FIT: TRICKS OF THE TRADE FOR RESPONSIVE DESIGNAustin Caldwell, Professional Services Manager at Bronto
![Page 2: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/2.jpg)
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
![Page 3: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/3.jpg)
How Many Bronto Customers Are
In The Mobile 500?Internet Retailers ranked by mobile sales
![Page 4: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/4.jpg)
HIGHEST RANKED:#135 - JUSTFAB
$68MM MOBILE SALES (~24% OF TOTAL SALES)
39HOW MANY
BRONTO CUSTOMERSARE IN THE IR MOBILE 500?
![Page 5: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/5.jpg)
THE RISE & REIGN OF MOBILE
Mobile > Desktop
![Page 6: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/6.jpg)
JAN 2015 – MOBILE DEVICES GENERATED 53% OF ALL ONLINE VISITS
![Page 7: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/7.jpg)
JAN 2015 – MOBILE DEVICES GENERATED 24% OF ALL ONLINE REVENUE
![Page 8: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/8.jpg)
JAN 2015 – AVERAGE MOBILE CONVERSION RATE IS 1.62%
![Page 9: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/9.jpg)
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
![Page 10: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/10.jpg)
66% OF EMAILS WERE OPENED ON A SMARTPHONE OR TABLET
![Page 11: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/11.jpg)
EMAIL CLIENT MARKET SHARE
![Page 12: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/12.jpg)
EMAIL OPENS BY TIME OF DAY
![Page 13: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/13.jpg)
OPENS BY TIME OF DAY: BLACK FRIDAY AND CYBER MONDAY 2014
![Page 14: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/14.jpg)
WHY YOU SHOULD MAKE THE SWITCH TO
RESPONSIVE DESIGN
![Page 15: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/15.jpg)
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
![Page 16: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/16.jpg)
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
![Page 17: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/17.jpg)
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
![Page 18: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/18.jpg)
RESPONSIVE DESIGN BEST PRACTICES
![Page 19: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/19.jpg)
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
![Page 20: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/20.jpg)
![Page 21: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/21.jpg)
![Page 22: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/22.jpg)
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
![Page 23: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/23.jpg)
![Page 24: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/24.jpg)
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
![Page 25: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/25.jpg)
![Page 26: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/26.jpg)
![Page 27: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/27.jpg)
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
![Page 28: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/28.jpg)
![Page 29: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/29.jpg)
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
![Page 30: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/30.jpg)
![Page 31: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/31.jpg)
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
![Page 32: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/32.jpg)
![Page 33: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/33.jpg)
![Page 34: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/34.jpg)
TRICKS OF THE TRADE
![Page 35: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/35.jpg)
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
![Page 36: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/36.jpg)
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
![Page 37: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/37.jpg)
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
![Page 38: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/38.jpg)
![Page 39: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/39.jpg)
MEDIA QUERY - ENLARGE FONTS• Font sizes inside table cells with
class name ‘embiggen’ are increased 130%
![Page 40: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/40.jpg)
MEDIA QUERY - SCALE IMAGES• Images with class name ‘third’
scale up to 100% on mobile
![Page 41: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/41.jpg)
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
![Page 42: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/42.jpg)
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
![Page 43: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/43.jpg)
COMMON PITFALLS
![Page 44: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/44.jpg)
ALWAYS BE TESTING
![Page 45: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/45.jpg)
TROUBLESHOOTING COMMON RENDERING ERRORS
![Page 46: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/46.jpg)
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
![Page 47: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/47.jpg)
– Bob Ross
“That’ll be our little secret”
![Page 48: Find the Perfect Fit: Tricks of the Trade for Responsive Design](https://reader036.fdocuments.us/reader036/viewer/2022070515/5877c1761a28ab39588b4a4d/html5/thumbnails/48.jpg)
ANY QUESTIONS ???Austin Caldwell, Professional Services Manager at Bronto