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 www.stream20.cominfo@stream20.com