Email Creative for Mobile - Adapting your email to be mobile responsive
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
Why should emails be adapted for mobile?
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]
Mobile rendering is important because...
72% of UK tablet owners typically use this device for email.
[Source: Velti, June 2013]
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
Reading marketing emails on mobile
Almost 40% of those who read emails on mobile said they did so if the subject line sounded interesting.
...so emails need to work
on both large screen PCs...
...AND small
screen mobiles
• Mobile open rates have grown 300% since 2010.
• Now is the time to start seriously optimising for mobile.
Different Ways to Approach the Problem
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
“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
Responsive Design
Client/Device Media Queries Support
Amazon Kindle Fire (HD and non-HD) Yes
Android 2.1 NoAndroid 2.2 (and above) YesApple iPad, Iphone and Ipod Touch Yes
BlackBerry OS 5 NoBlackBerry OS 6 (and above), Playbook YesGmail mobile app (all platforms) NoMicrosoft Surface NoMicrosoft Windows Mobile 6.1 NoMicrosoft Windows Phone 7 and 8 NoMicrosoft Windows Phone 7.5 YesPalm Web OS 4.5 NoYahoo! 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.
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
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
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.
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
Templates to Note
• Animated gifs• Responsive design
• Mobile aware• Header/menu optimised
for mobile
• Infographics…
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
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.
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.
Mobile Rendering Examples
GOOD - Large buttons for ease of ‘touch clicks’- One column of text wraps to screenBAD - Large header image with no pre-header text
GOOD - Quick links wrap to screenBAD - 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 screenBAD - Large header image with no pre-header text
GOOD - Quick links wrap around so customer can quickly jump to a relevant pageBAD -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 messageBAD - 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
Other considerations
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
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
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.
Other Considerations – Customer Segment
• 63% of mobile email users are aged 18-24. [Source: e-Dialog, via Econsultancy blog, July 2011]
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
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)
Stream:20 Digital Marketing Consultants [email protected]