How do subscribers interact with emails on mobile devices? Is a mobile tap worth as much as a desktop click? What type of content doesn’t make sense on mobile devices? Learn the importance of mobile optimization as we reinvent email.
7. The mobile barrier still exists
13%
25%
0%
5%
10%
15%
20%
25%
30%
Mobile clickthrough rate Desktop clickthrough rate
Mobile
openers still
tap less than
desktop
openers.
Click-to-openrate
Click-to-open rates for a B2C customer
16. 1. Pull click overlays for a variety of
sends from the same template
2. Analyze each static section, cut
content that has historically
performed low
3. Trace “required” content back to
the source to understand rationale.
4. Prioritize content into top three
clicks
Ensure all clicks tie back to overall email goals. Something’s gotta go…
Mobile Success Requires Tough Choices
19. [sm]All Screens Require Focus:
3 Questions to Ask For Your Next Email…
What
Why
How
is the point of this email?
should they care?
do they take action?
20. What?
Why?
How?
Optimize each modular
section of an email for fast
comprehension, not just
real estate.
Users might jump straight
from What to How, with the
general content and
imagery of the inner
triangle acting as the Why.
How it WorksAnswer All 3 in One Glance
25. Branding on Mobile
• Don’t design yourself into
a box, give yourself
visual flexibility
• Consistent Type, CTA’s
and Styles will hold your
brand together across
screens
• The message, tone, and
feel is your brand, not
pixel perfect rendering of
your layout across 50
email clients
26. UI: Use Mobile Conventions
“The most beautiful toilet sign is
useless if men constantly walk into
the ladies’ room” -Oliver Reichenstein
27. UI: Make calls to action stand out
with color, whitespace, placement
Source: HubSpot
Protip: Whatever stands out gets clicked.
winner
30. • Use them. Don’t hide them on mobile
• Accommodate retina now
Images
Fuzzy
image-
based
button
31. • Use them. Don’t hide them on mobile
• Accommodate retina now
• CSS > image-based elements
Images
32. • Use them. Don’t hide them on mobile
• Accommodate retina now
• CSS > image-based elements
• Rethink borders: the device is the container
Images
Border-
mania!
36. All data points are not created equal.
• Open
• Click
• Unsubscribe
• In store conversion
• Online conversion
• Website visits
• Engagement
• Logins/Registrations
• POS conversion
• Coupon Redemption
• Social sharing
How are they trending over time?
38. Analysis Then…
Avs. BOpen
Click Through
Click to Open a
Conversion a
Unsubscribe
Open a
Click Through a
Click to Open
Conversion
Unsubscribe a
Winner
39. Analysis Now…
Desktop
Open Rate
Click Through a
Click to Open
Conversion
Conversion Avg. $$
Unsubscribea
Tablet
Open Rate
Click Through
Click to Opena
Conversion
Conversion Avg. $$
Unsubscribe
Smartphone
Open Rate a
Click Through
Click to Open
Conversion
Conversion Avg. $$
Unsubscribe
Multi-Open Combo
Open Rate
Click Through
Click to Open
Conversion
Conversion Avg. $$ a
Unsubscribe
40. Version B, the Responsive design email
saw a double digit increase in sales of
items that start at over $1,700 at a 94%
confidence level.
(A- Fixed Width) (B - Responsive)
http://whichtestwon.com/bowflexs-responsive-design-test-results
A- Fixed Width
Open Rate a
Click Through a
Click to Open a
Conversion
Conversion Avg. $$
B - Responsive
Open Rate
Click Through
Click to Open
Conversion a
Conversion Avg. $$ a
Case Study
41. Failing in Testing is OK,
as long as you learn something.
Don’t test until you win/lose,
test until you understand why.
42. Testing to Understand
• Gradually introduce mobile
optimization techniques
• Keep as much similar
creatively as possible
until you have solid data
• Stay focused on key data points, don’t get distracted by spikes in open/click
• Test multiple emails over a an extended period of time in lieu of one off A/B tests.
43. Define goals
• Branding
• Performance
• Production Efficiencies
Download code samples
• http://pages.exacttarget.com/ETDesign
Identify a small team to pilot
1.Design
2.Code
3.Launch
4.Repeat repeat repeat
Launch
Do what’s best.
Start now.
Iterative testing
We know that for any given campaign, 40% of opens are mobile, but look at the customers, not the campaign, we’ve found that 75% of the CUSTOMER BASE have opened email on mobile at any given point. These stats are always AFTER sends – let’s think about the NEXT send. How many subscribers got a new phone between your last send? They have expections.
REDO IN PSWe know that for any given campaign, 40% of opens are mobile, but look at the customers, not the campaign, we’ve found that 75% of the CUSTOMER BASE have opened email on mobile at any given point. These stats are always AFTER sends – let’s think about the NEXT send. How many subscribers got a new phone between your last send? They have expections.
REDO IN PSWe know that for any given campaign, 40% of opens are mobile, but look at the customers, not the campaign, we’ve found that 75% of the CUSTOMER BASE have opened email on mobile at any given point. These stats are always AFTER sends – let’s think about the NEXT send. How many subscribers got a new phone between your last send? They have expections.
KThis doesn’t work on mobile. Barrier to click is higher. On average, Mobile opens usually have lower engagement but it’s not all your fault. That’s natural for the evolutionary state we’re in – Forget about the industry numbers of % opens on mobile, and think about the user and how the user is changing their behavior to decide how they are going to use these devices.
The real question is not ‘what % of opens were on mobile on last week’s send?’ but ‘How many people have the potential to open on mobile next time? Next week? Next month?’ Am I ready?
We have one chance to make an impression - you think you will read it later? you won’t.3-5% of opens are repeats
We have one chance to make an impression - you think you will read it later? you won’t.3-5% of opens are repeats
We have one chance to make an impression - you think you will read it later? you won’t.3-5% of opens are repeats
Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
KThis doesn’t work on mobile. Barrier to click is higher. On average, Mobile opens usually have lower engagement but it’s not all your fault. That’s natural for the evolutionary state we’re in – Forget about the industry numbers of % opens on mobile, and think about the user and how the user is changing their behavior to decide how they are going to use these devices.
Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
Video content is extremely popular on mobile devices:Vine, instagram video, youtube (3rd most popular app), etc.Video content may lower barrier to click because video was made for mobile. it's a very familiar experience: no small text to read, headphones/audio is handy/familiar, engages two senses: sight and sound, very legible: content takes up whole screen, consistent/system UI for playback controls.In recent data gathered from video content on exacttarget.com, users watched video longer on tablets and phones than desktops. Host on landing page, closer to conversion opportunitiesSimilar results have been found throughout the web. Tablets love video.
DefineWHY we’re doing this. It can be purely a brand decision to show innovation, also can be to prevent decrease in clicks, or maybe even increase clickthrough rate if you have a particularly bad mobile experience. You can’t prove value in a one-off AB test - responsive email is a long term investment in user experience. Don’t get stuck in concepting phase. Launch, test, watch over time. 1. make simple mobile aware/shrink wrap email with new content strategy 2. track engagement over time, iterate. I’d highly recommend a small pilot with a small agile team to flesh out process, tracking, etc. before rolling out to other BUs and email types.Emails can go from ideation to implementation in a matter of weeks - your web team can learn from your process, content strategy, testing approach, and success. Email is forgiving due to its high frequency, short shelf life, and endless segmentation/analytics possibilities. We know you need to show off metrics for internal buy-in. sometimes the inherent usability isn’t enough.We’re talking mostly to teams who design and code their own emails and paste code into the app, but you can start using responsive templates inside the ET editor now - xyz to enable, pick a format (show formats, tell how to turn on)