What is a mobile responsive email? Stream:20 take a look at the considerations when optimising your email templates to be mobile responsive. Statistics show percentage of increased users viewing emails on a mobile device. Have you optimised your email template to suit your demographic audience? Contact <info@stream20.com> for more informartion www.stream20.com

1. Email Creative for Mobile
- Adapting your email to be mobile responsive

2. Introduction
• Why should emails be adapted for mobile?
• Different ways to approach this problem
– What is adaptive creative?
– Important design alterations
– How should they be adapted?
• Good and bad examples of email creative for mobile
• Other considerations
– Customer segment
– Landing pages

3. Why should emails be adapted for
mobile?

4. Why should emails be adapted for mobile?
Mobile rendering is important
because:
• The use of mobile devices to
check, read and respond to
emails is significantly
increasing
• 79% of UK smartphone owners
typically use this device for
email.
[Source: Velti, June 2013]

5. Mobile rendering is important because...
72% of UK tablet
owners typically use
this device for email.
[Source: Velti, June 2013]

6. Mobile rendering is important because...
Traditional creative
best practices do
not mean an email
will also be
optimised for
mobile devices
Smartphone users now
estimated to account for
half of the UK population
There are potentially
over 26m mobile email
users

7. Reading marketing emails on mobile
Almost 40% of
those who read
emails on mobile
said they did so
if the subject
line sounded
interesting.

8. ...so emails need to work
on both large screen
PCs...
...AND
small
screen
mobiles

9. • Mobile open
rates have
grown 300%
since 2010.
• Now is the time
to start seriously
optimising for
mobile.

10. Different Ways to Approach the Problem

11. Adaptive Creative
• Many emails do not display
well on mobile devices.
• Some templates are too
wide
– Makes the text tiny
– Requires pinching and
zooming.
– This kind of user
experience kills
engagement
• Could have a significant
negative impact on your
results

12. “Does it Render on Mobile?”
Text does
not resize
Call to Action
buttons are too
small
Good use of
animated graphics
Preheader text is important
for inbox preview

13. Responsive Design
Client/Device Media
Queries
Support
Amazon Kindle Fire (HD and non-HD) Yes
Android 2.1 No
Android 2.2 (and above) Yes
Apple iPad, Iphone and Ipod Touch Yes
BlackBerry OS 5 No
BlackBerry OS 6 (and above), Playbook Yes
Gmail mobile app (all platforms) No
Microsoft Surface No
Microsoft Windows Mobile 6.1 No
Microsoft Windows Phone 7 and 8 No
Microsoft Windows Phone 7.5 Yes
Palm Web OS 4.5 No
Yahoo! Mail mobile app (all platforms) No
Adaptive creative is the process of
tailoring email to render cleanly on
different mobile devices
• Media query tags renders the
email creative differently
depending on the platform being
used.
• Not all platforms support media
queries (see table).
• Using the breakdown of device
and OS types from your email
database can determine whether
using media queries is
appropriate.

14. Adaptive Creative
• Desktop vs Mobile emails – same
template, but adapts to smaller width
without losing text size.
• Ensure your email looks good on a small
screen and a reader doesn’t have to
scroll too far to get the main message
• CTA buttons and links need to be big
enough to be touched as opposed to
clicked
• Keep email design clean & simple, avoid
too many columns of content which
won’t show on a mobile
• Best practices don’t stop at the email –
ensure your landing pages are also
mobile friendly

15. Mobile Segmentation
• Designing different email creative for specific device categorisation is a
beneficial option, executed by maximising the data knowledge
• Device categorisation is seen in the following forms;
– The target device the email is likely to being opened
– The device being upsold in the creative
• Use the data to segment and create target
lists based on a combination of one or more
of the following:
– Device Type
– OS
– Device Upsell
• Play to the strengths of each medium by having template variants of emails by
device type, reducing the time involved in creating multiple variants for each
new campaign

16. Mobile Segmentation
Example of iPhone Native Client targeting - existing iPhone customers being
upsold the new iPhone or an iPhone upgrade will have more relaxed email
rendering considerations due to the iOS experience;
• iOS images are ‘always on’, so a stronger
aesthetic (less reliance on ‘real’ text’) can
be applied to create a richer email
experience
• Larger CTA ‘buttons’ and messaging give a
more immediate approach
• Email template ‘grid’ guidelines can be
relaxed so shapes are placed in otherwise
non conventional places, increasing visible
impact and likelihood to interact.

17. Considerations for Mobile Segmentation Design
• Device Type
– Mobile
– Tablet
• OS version
– Android
– Apple
– Windows Mobile
• Time lapsed since
original purchase
– Incorporating market
knowledge of device OS
i.e. Apple users high
change of upgrades to
latest version increasing
compatibility
• Native Mail client users
• App Mail client users
– Gmail
– Good

18. Templates to Note
• Animated gifs
• Responsive design
• Mobile aware
• Header/menu optimised
for mobile
• Infographics…

19. Easy design alterations
1. SIMPLIFY your emails:
– reduce the number of categories,
sub-headings, links and images.
2. 1 column
3. Design for touch:
– Limit your CTAs
– Make them OBVIOUS: ensure
clickable areas are no bigger than a
fingertip (44x44 pixels).
– Avoid too many links close together

20. Easy design alterations
4. Front load key words:
– in subject lines to ensure the
message isn’t lost
– iPhone subject lines cut off at
35 characters
5. More contrast (dark
background, low iPhone battery
life)
6. Reserve the top for CTAs:
– Put mastheads, banners,
and (if necessary) social
media links out of the way of
more important CTAs.

21. Easy design alterations
10. Use CAPITALS in titles: to distinguish text and
content areas.
11. Use a methodical hierarchy and keep it
short: create a clear headline followed by brief,
secondary messaging.
12. Make sure to include a plain text version with
every HTML email you send, you offer an
alternative. This is crucial for old mobile phones
and makes life easier for disabled users.
9. Go easy on images –
and don’t use them for
critical links or content as
they can fail to load.
10. Alt-texts are vital –
prevent confusion and
support disabled users.

22. Mobile Rendering Examples
GOOD
- Large buttons for ease of ‘touch clicks’
- One column of text wraps to screen
BAD
- Large header image with no pre-header text
GOOD
- Quick links wrap to screen
BAD
- Large amount of intro copy which isn’t
easy to scan read
- Text links to features are small and
difficult to ‘touch click’
GOOD
- Large, clear call to action buttons for ease of
‘touch clicks’
- One column of text wraps to screen
BAD
- Large header image with no pre-header text

23. GOOD
- Quick links wrap around so customer
can quickly jump to a relevant page
BAD
-Alt text for header image not being
used
BAD
-Safe sender & mirror
link copy takes up whole
first screen, a lot of
scrolling down is needed
to view full email
GOOD
- Clear alt text with
main message
BAD
- Quick links are
overlapping and can’t
be read
BAD
- Content not
wrapping and all
quick links are on
the right hand
side of the screen
so don’t appear
without scrolling.
Mobile rendering examples

24. Other considerations

25. Get the device open stats for your campaigns
• Research is needed to decide how big an issue mobile is for you
• Ask subscribers about their attitudes and preferences for mobile
email
• Use web analytics e.g. Google Analytics for mobile
Track mobile users when
they visit your site or landing
page, so that you can
• find bottlenecks,
• spot pitfalls,
• and make
improvements to
increase conversions

26. Test, test, test!
• Litmus Email Testing shows what
your email looks like in all popular mail
clients, both mobile and desktop.
• If you can afford it (both in time and
budget), it’s worth testing every big
campaign.
• Running one good test every few
months or when you change your
template, should ensure all emails look
great on mobile.
• Alternative: PreviewMyEmail.com

27. Have a plan B
• Offer a preference for
plain text emails in the
customer
communications
preference centre.
• A repurposed plain
text version should
always be produced
where copy is
reduced to highlight
the main offers and to
encourage action.
• A "view email in
browser" link should
be included in the pre-
header.

28. Other Considerations – Customer Segment
• 63% of mobile email users are aged 18-24. [Source: e-
Dialog, via Econsultancy blog, July 2011]

29. Other Considerations - Landing Pages
Are your landing pages optimised for mobile?
• Best practices don’t stop at the email – ensure your
landing pages are also mobile friendly
• Directing customers to a landing page that is not
optimised makes for a very poor user experience.
• Calls to action: Use the page to detail a special offer,
provide more information and display a strong CTA.
• The associated landing pages should form a clear and
logical user journey

30. Finally
Mobile rendering is important because:
• The use of mobile devices to check emails is significantly increasing,
• 55% of mobile email users are aged 18 – 34; this rises to 63% among
those aged 18-24
• Brands need to optimise their email marketing for mobile devices.
• Adaptive creative will adapt templates to automatically render the
email for mobile
• Easy design changes can be made
1. Concise content
2. 1 column
3. Design for touch
4. iPhone subject lines cut off at 35 characters
5. More contrast (dark background, low iPhone battery life)

31. Stream:20 Digital Marketing Consultants
www.stream20.com
info@stream20.com