12ntc - easy reading on the go

#12NTCmobileemail

Cameron LefevreM+R Strategic Services

Lindsey TwomblyHuman Rights Campaign

Easy Reading on the Go:How to Optimize Emails for Mobile Phones

Each entry is a chance to win an NTEN engraved iPad!

or Online at www.nten.org/ntc/eval

Evaluate This Session!

Receive a mobile-optimized email from HRC: www.hrc.org/ntc

Sample Mobile Optimized Email

Easy Reading on the Go Slide 3

1. The Rise of the Smartphone

2. How Mobile Devices Affect Email Marketing

3. Tracking Mobile Usage

4. How to Optimize Email for Mobile!

Today


The Rise of the Smartphone


Smartphone Owners in the U.S.


New Phone Purchases


INSERT Chart of the most popular smartphones

U.S. Smartphone Market Share by OS


People Reading Email on Mobile Phones


1 in 5 Americansreads email on their mobile phone

almost every day!


In other words…

How Mobile PhonesAffect Email Marketing


How are mobile phones affecting HRC?

We evaluated the following:

1. Percentage of emails opened on mobile phones

2. Percentage of email clicks from mobile phones

3. Percentage of advocacy and fundraising responses submitted on mobile phones

4. Advocacy and fundraising page completion rates

5. Most popular mobile phones being used

Slide 12Easy Reading on the Go

Emails Opened on Mobile Phones


24% of Opens within 24 hours

17% of Opens

Email Clicks from Mobile Phones


Advocacy Alerts Fundraising Appeals

17% of Opens17% of Opens

9% of Clicks 12% of Clicks

HRC Example


Email Responses from Mobile Phones


Advocacy Alerts Fundraising Appeals

17% of Opens17% of Opens

9% of Clicks 12% of Clicks

7% of Actions 5% of Donations

Advocacy by Mobile Platform


51%

32%

13%2% 2%

57%

31%

9%2% 1%

Email Clicks Email Responses

Fundraising by Mobile Platform


60%21%

14%

3% 2%

74%

15%9%

1% 0%

Email Clicks Email Responses

Page Completion Rates


Advocacy Fundraising

Non-Mobile 90% 31%

iPhone 80% 15%

Android 72% 10%

BlackBerry 47% 8%

WebOS 72% 6%

HRC Optimized Example


The mobile-optimized version of the email outperformed thenon-optimized version:

•6.5% increase in clicks

•7.7% increase in advocacy responses

•6.7% decrease in unsubscribes

The Results


Questions?


Tracking Mobile Usage


• Email opens are tracked by a hidden 1x1 pixel

<img src="http://action.hrc.org/site/PixelServer" height="1" width="1" />

• Use this pixel or insert your own!

<img src="http://www.yoursite.org/tracker.gif" height="1" width="1" />

<img src="http://www.yoursite.org/tracker.gif?email_id=1234" height="1" width="1" />

• Track the pixel downloads in your web server log:

1.1.1.1 - - [22/Feb/2011:00:13:03 -0600] "GET /site/PixelServer HTTP/1.1" 200 55 "-" "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko)" 1460

Tracking Mobile Email Opens


• Use a website analytics tool like Google Analytics

Tracking Mobile Clicks & Engagements


Questions?


Mobile Optimize Email!


• Allows you to define different styles based on screen size

• Supported by:• iOS (iPhone, iPod Touch and iPad)• Android’s default mail client• WebOS

Introducing: CSS @media query


Basic syntax:

@media only screen and (max-device-width: 480px) {

[define your mobile-specific styles here]

}

@media Syntax


<html>

<body>

<table width="600">

<tr>

<td width="600">

<a href="http://www.mywebsite.org/"><img src="logo.jpg”

width="600" height="100" /></a>

[your email copy here]

</td>

</tr>

</table>

</body>

</html>

@media Email Example


<html>

<body>

<table width="600" class="emailtable">

<tr>

<td width="600" class="emailcontent">

<a href="http://www.mywebsite.org/"><img src="logo.jpg"

width="600" height="100" class="logo" /></a>

[your email copy here]

</td>

</tr>

</table>

</body>

</html>

@media Email Example


<head>

<style>


table.emailtable, td.emailcontent {

width: 300px !important;

}

img.logo {


height: 50px !important;

}

}

</style>

</head>

@media Example


iPhone, iPhone 3G, iPhone 3Gs: 320x480

iPhone 4, iPhone 4S: 640x960

iPhone 4 and 4S behave as if they’re 320×480!

iPhone Resolution


Yahoo! Mail ignores the @media query and uses themobile-specific styles for desktop users

Use attribute selectors!

Yahoo! Mail


<head>

<style>


table.emailtable, td.emailcontent {


}

img.logo {



}

}

</style>

</head>

Yahoo! Mail


<head>

<style>


table[class="emailtable"], td[class="emailcontent"] {


}

img[class="logo"] {



}

}

</style>

</head>

Yahoo! Mail


Webkit automatically adjusts font size based on the user’s viewport

Webkit Font Resizing



div, p, a, li, td { -webkit-text-size-adjust: none !important; }

}

The Preheader is the one or two line preview of an email

• About 40-80 characters

iPhone:

NTEN makes great use of the preheader:

Preheaders


Insert the preheader code at the top of the email’s <body> section:

<html>

<body>

<span style="display: none; display: none !important;">

Your short preheader message here!

</span>

..

[the rest of your email content]

Preheaders


Mobile Email Example


BA Example


BA Mobile Example


BA Example


@media screen and (max-device-width: 480px) {

..

table[class=nomob], span[class=nomob], img[class=nomob],

td[class=nomob] { display: none !important; }

..

}

..

<table border="0" cellspacing="0" cellpadding="0" class="nomob">

Hiding elements


BA Example



..

img[id=baemlfullwidthimg], img[class=baemlfullwidthimg]

{ width: 320px !important; height: auto !important; }

..

}

..

<img src="BA_TheClub_Issue3_invitationAnimated_UK%5FBLUE.gif" width="575" class="baemlfullwidthimg" border="0" />

Resizing elements


BA Example



..

td[class=baemailcolsplit] { width: 320px !important;

float: left !important; }

..

}

..

<table>

<tr>

<td class="baemailcolsplit"> [links] </td>

<td class="baemailcolsplit"> [logo] </td>

</tr>

</table>

Repositioning elements


BA Example



a[class=baemailfooternav] {

display: block !important;

font-size: 14px !important;

font-weight: bold !important;

padding: 6px 4px 8px 4px !important;

line-height: 18px !important;

background: #dddddd !important;

border-radius: 5px !important;

margin: 10px auto;

width: 240px;

text-align: center;

}

}

..

<a href="link" class="baemailfooternav" style="color:#9c9e9f; font-size:11px; text-decoration:none;">Home</a>

Restyling elements


BA Example


1. Decide whether you should optimize

2. Decide which mobile phones to optimize for

3. Design the email

• Simplify the layout?

• Hide content from mobile readers?

• Include mobile-only content?

4. Write the code

5. Check in major desktop clients, phones and tablets

6. Test against non-optimized version

7. Roll-out!

Planning Your Optimization


Questions?


www.mrss.com/MobileEmail

Download this Presentation


Each entry is a chance to win an NTEN engraved iPad!

or Online at www.nten.org/ntc/eval

Evaluate This Session!

12ntc - easy reading on the go

Education