Post on 10-Mar-2018
Avoiding the 5 Most Common Mistakes in Responsive Email Design
Ira Horowitz, Cornershop CreativeBlake Groves, Salsa Labs
March 5, 2015
#15NTC#15NTCemaildesign
http://sched.co/1z3h
http://po.st/DurVHr
@ira_horowitz
@salsalabs
Avoiding the 5 Most Common Mistakes in Responsive Email Design
Online services company that provides excellent design, expert web
development, and innovative online strategy for nonprofits and small
businesses
About Cornershop Creative
Software and education for nonprofits all in one place
• Raise funds
• Affect change
• Grow your list
• Engage supporters
About Salsa Labs
ARE YOU WORKING HARD TO GROW YOUR LIST?
We’re working hard to fill a leaky bucket.
Attrition
Change of Address
FatigueUnsubs
Why shoot yourself in the foot?
53
47
Opens
Mobile
Desktop
71%
29%
Deletes
Nonmobile
Desktop
• 50,000 targeted list
• Assume half on mobile – 25,000
• 71% of 25,000 = 17,750
• Net list – 32,250
• BEFORE bounces, opens, etc.
Simple Math
• Yes – from top to bottom
• For most areas, but not all
• Only in a few areas
• Barely
• Not at all
Are you currently “mobile friendly”
WHAT IS RESPONSIVE DESIGN?
• Approach to web design aimed at providing an optimal viewing experience, regardless of screen size or device
• Allowing for easy reading, without pinching, zooming, resizing, panning or scrolling
Responsive Design
• Can be used in coding websites or email
• You can target specific screen widths or devices and have an unlimited number of break points
Responsive Design
WHY RESPONSIVE DESIGN?
DO YOU KNOW HOW YOUR SUPPORTERS OPEN YOUR MAIL?
53% of total email opens occur on mobile devices
Responsive design results in 15% increase in clicks
Mobile email usage is expected to grow by 23% in 2015 and 22%
in 2016
The first link in a responsive email has a 30% higher click rate
than non-responsive emails
USING RESPONSIVE DESIGN IN EMAIL
WHAT IS YOUR BIGGEST CHALLENGE WITH MOBILE?
• Lack of technological approach
• Lack of time/resources
• Not a priority
• Other
What’s holding you back?
Start with a Template
Common Break Points
Screen Size Breakpoints
XL Screen > 1920px
Desktop & Laptops 1024px
Tablets 768px – 1024px
Smartphones 320px – 480px
However, there are an infinite number of possible breakpoints. Here’s a list of more than 30 options:
http://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
The following must be included in the <head> to tell browsers and email clients to size the content to the browser width:
<meta name="viewport" content="width=device-width" />
Responsive Coding
/* Screens Smaller than 640px --------- */ @media only screen and (max-width: 640px) {
img[id=“header”] { max-width: 600px; }table[id=“outer”] { max-width: 600px; width=“100%” }td[class=“content”] { font-size: 16px; }}
Media Queries
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
img { max-width: 320px; width=“100%; }
td[class=“content”] { font-size: 18px; }
}
Media Queries
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Specific ipad styles
}
Media Queries
• Don’t define fixed width
• Use percentages and max-width
• Increase font size for smaller screens
Tips
AVOIDING COMMON MISTAKES
• Once you spend the time working on the template, don’t change it.
• Create a template that works for multiple uses and replicate it
#1. If it isn’t broke, don’t fix it
• If a message didn’t work on standard platform, then it won’t work on mobile
• Use A/B testing to watch performance rates for both desktop and mobile users
#2. No substitute for good content
• Avoid long paragraphs
• Let people skim and understand at the top what they should do next
• Test on all platforms
#3. Short & to the Point
• Images are nemesis of responsive design
• Images can break the layout, if too wide
• Images with text can be unreadable on small devices
#4. Watch Your Images
• If you send an effective email, people will click on your links
• Make sure you landing pages and forms are mobile responsive as well
• Create consistency between your email and the pages you’re directing them to
#5. Think it through to the end
• Code for mobile devices
• Keep it simple
• Avoid text in images
• Avoid long paragraphs
• Make your forms and landing pages responsive too
Conclusion
Notes: http://po.st/DurVHrEvaluation: http://po.st/o81lEw
Ira Horowitz, Cornershop Creativeira@cornershopcreative.com734.707.8381@ira_horowitz
Blake Groves, Salsa Labs866.796.8345bgroves@salsalabs.com@salsalabs
Get In Touch