Embed Size (px)
DESCRIPTION
Your subscribers read messages in more apps, devices, programs and platforms than ever before-interacting with emails not only from their desktop, but also from mobile phones and tablets. With half of all emails being opened on a mobile device, it's crucial to account for fat fingers and small screens. How can you ensure a consistent and effective email experience for your subscriber base? In this session, you'll learn: -Implications of various screen sizes and operating systems -Strategies for approaching mobile-friendly emails -Common pitfalls and easy wins to implement right away
Citation preview
Fat Fingers and Small ScreensThree Strategies for Mobile-Optimized Emails
#ASCENDSummit2014
Justine Jordan @meladorri @litmusapp
➡ litmus.com/lp/ascendsummit
#ASCENDSummit2014 // @meladorri
#ASCENDSummit2014 // @meladorri
#ASCENDSummit2014
EMAIL IS NOTJPG
PPC SEO CPC ONE-PAGE WEBSITE
// @meladorri
#ASCENDSummit2014
EMAIL IS NOTJPG
PPC SEO CPC ONE-PAGE WEBSITE
// @meladorri
#ASCENDSummit2014
EMAIL IS<make it rain>
<emotional/happy>
YES,
// @meladorri
#ASCENDSummit2014
EMAIL ISBUT ALSO,
// @meladorri
#ASCENDSummit2014
Lots of emails suck.Especially on mobile.
#ASCENDSummit2014
#ASCENDSummit2014
email receipt requested from an ATM transaction!!!
#ASCENDSummit2014
#ASCENDSummit2014
Let’s unsuck email.
#ASCENDSummit2014
DELIVERINGEXPERIENCES
// @meladorri
#ASCENDSummit2014
‣Register for a webinar!‣Read an article!‣Buy something
WHAT
‣ Triggered vs. mass!‣Drip or automation!‣Behavioral-based!‣Day and time
WHEN
‣Mobile / tablet!‣Web browser / webmail!‣Desktop / at work
WHERE‣Brand awareness!‣Content marketing!‣ Influence behavior!‣Drive purchases
WHY
‣Opens!‣Clicks!‣Conversions
HOW
‣ Internal vs. external!‣ B2B vs. B2C!‣ Demographics!‣ Know your audience!
WHO
‣ bit.ly/email-plan
// @meladorri
#ASCENDSummit2014
‘WHERE’ HAS BECOME A COMPLICATED QUESTION.
// @meladorri
#ASCENDSummit2014
Mobile is big, but how big?
Webmail 32%
Desktop 25%
Mobile 43%
Mobile: !Smartphones (iPhone, Android) and tablets !
Desktop:!Installed email programs (Outlook, Apple Mail) !
Webmail:!Email accessed through a web browser (Gmail, Hotmail, Yahoo!)
Litmus Email Analytics!
// @meladorri
#ASCENDSummit2014
MOBILE EMAIL!+400% since 2011
// @ryanmheap @degdigital
// @meladorri
#ASCENDSummit2014
The unifying characteristic?
TOUCH.
// @meladorri
#ASCENDSummit2014
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
Delete it
Unsubscribe
View on computer
Don't know
Read anyway
0 25 50 75 100
If you get a mobile email that doesn’t look good, what do you do?
80.3%
30.2%
13.5%
3.8%
6.3%
+68%
+15%
// @meladorri
#ASCENDSummit2014
Strongly Negative 24%
Slightly Negative 51%
Neutral 25%
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
How does a poorly designed email affect your perception of the brand?
75%!‘negative’
// @meladorri
#ASCENDSummit2014
31% !of marketers don’t know their
mobile email open rate
source: marketingsherpa.com
// @meladorri
KNOW THY AUDIENCE
#ASCENDSummit2014
70%+ open on mobile <15% open on mobile
// @meladorri
#ASCENDSummit2014
Copy, paste, send!
// @meladorri
#ASCENDSummit2014
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
SUBSCRIBER EXPERIENCE
// @meladorri
#ASCENDSummit2014
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
‣What is recognizable, trustworthy and relevant? ‣Does the subscriber have a relationship with a
person or the brand?
// @meladorri
#ASCENDSummit2014
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
// @meladorri
#ASCENDSummit2014
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
// @meladorri
#ASCENDSummit2014
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
#ASCENDSummit2014
75% of emails are displayed with preview text
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
// @meladorri
#ASCENDSummit2014
✔
✔
✔
✘
✘
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
#ASCENDSummit2014
Preheader text A/B Tests: 30%+ CTR Boost
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
// @meladorri
#ASCENDSummit2014 // @meladorri
iPhone 5 iPhone 6 iPhone 6+Android Gmail
#ASCENDSummit2014
Future proof emails for the Apple Watch
FROM NAME SUBJECT !LINE PREHEADER
// @meladorri
#ASCENDSummit2014#SearchLove @meladorri
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
#ASCENDSummit2014 // @meladorri
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
#EmbraceTheScroll
#ASCENDSummit2014 // @meladorri
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
#ASCENDSummit2014
I LIKE…
BIG BUTTONS
http://bit.ly/bulletproof-buttons
// @meladorri
#ASCENDSummit2014 // @meladorri
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
#ASCENDSummit2014 // @meladorri
FROM NAME SUBJECT !LINE PREHEADER OPEN TAP/CLICK PAGE/SITE
‣ What is your goal?
‣ Can the CTA be achieved on mobile?
‣ Is it tappable?
‣ How many clicks/taps/actions are required?
‣ Is the landing page optimized? Should it
be?
#ASCENDSummit2014
#ASCENDSummit2014
strategy #1
mobile first !
aka agnostic, aware, scalable
// @meladorri
#ASCENDSummit2014
‣ Considers the mobile user a priority
‣ One layout for all screen sizes
‣ Single column design; 320-500px
‣ Large text & buttons
‣ Generous white space
‣ Short, concise body copy
Mobile first
// @meladorri
#ASCENDSummit2014
#ASCENDSummit2014
strategy #2
fluid// @meladorri
#ASCENDSummit2014
Email width changes to fit inside the window
‣ Percentage-based widths
‣ Adapts to fit the screen
‣ Text wraps automatically
Fluid
// @meladorri
#ASCENDSummit2014
‣ Shorter learning curve
‣ Best for text-heavy emails
// @meladorri
#ASCENDSummit2014
strategy #3
responsive
// @meladorri
#ASCENDSummit2014
#ASCENDSummit2014
‣ Resize content: make images fit,
make text larger
‣ Hide content on mobile
‣ Stack columns
‣ Move a two-column design to a one-column design
https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
Responsive
// @meladorri
#ASCENDSummit2014
‣ More than a “line of code”
‣ Set of conditional statement that enables specific styles
‣ If the screen size is x, then display y
‣ If the screen size is x, then increase headline size to y
‣ If screen size is x, then show image at 100%
‣ Detects screen size, not device type
Uses media queries to detect screen size and alter content + layout
Responsive email design
// @meladorri
#ASCENDSummit2014
Email: a unique medium with unique considerations
// @meladorri
#ASCENDSummit2014
Blue links in iOS: http://bit.ly/blue-links
// @meladorri
#ASCENDSummit2014
-webkit-text-size-adjust: none;
// @meladorri
#ASCENDSummit2014
image: webdesignerdepot.com
‣ Body copy 16px+
‣ Headlines: 22px+
‣ Buttons: 44px by 44px
‣ White space: 10px+
‣ Tappable touch targets
// @meladorri
#ASCENDSummit2014 // @meladorri
#ASCENDSummit2014
Dial up the contrast
Bright screen = dead battery
// @meladorri
#ASCENDSummit2014
‣ Mixed media query support
‣ Inconsistent font display
‣ Blocks images
‣ No ALT text
What to know about: Windows Phone
// @meladorri
#ASCENDSummit2014
‣ Media query support
‣ Blocks images
‣ Supports styled ALT text
‣ Does not scale/auto-zoom
‣ No separate app; email joins social,
SMS and voice in the “hub”
#KISSwebinar
What to know about: BlackBerry
// @meladorri
#ASCENDSummit2014
‣ Blocks images by default
‣ Supports ALT text
‣ Mixed support for media queries
‣ Various screen sizes and sometimes
automatic scaling
‣ Primary content focus on left-hand side
What to know about: Android
// @meladorri
#ASCENDSummit2014 // @meladorri
#ASCENDSummit2014
What to know about: iPhone
‣ Automatically scales messages to fit the screen
‣ Excellent support for CSS3 and media queries
‣ Images on by default ‣ Resizes fonts under 13px
// @meladorri
#ASCENDSummit2014
iOS 8 / iPhone 6 Plus‣ No support for <video> ‣ Superscripts aren’t so super ‣ Landscape email view
// @meladorri
#ASCENDSummit2014
History of iPhone Breakpoints
// @meladorri
320px 375px 414px
#ASCENDSummit2014 // @meladorri
#ASCENDSummit2014
Email is an application, not a device
// @meladorri
#ASCENDSummit2014
Testing is crucial
// @meladorri
#ASCENDSummit2014 // @meladorri
#ASCENDSummit2014
https://github.com/rodriguezcommaj/salted
// @meladorri
