10. Mobile inboxes create links from text content:
• Addresses: Launch Map Application
• Phone Numbers: Launch Phone
• Dates: Launch Calendar Application
@joekneale
#mobileemail
11. Possible Issues:
• Default link styling harming readability/rendering
• Accidental clicks and distractions
12. Taking control of links:
• Pre-empt linking by putting an href tag around
offending addresses, numbers, and dates
• Use inline style to control the presentation
• Consider strategically using images
• Consider “living with” automatic links and their
default styling by designing messages around them
@joekneale
#mobileemail
13. Advanced track:
• Place a single cell table around the offending
address, number, or date. Place the table inside
the <a href…> link tag. Give the table a unique
CSS class.
• Use <head> CSS to disable this class of links, use
a media query to enable it for mobile devices
only.
Sample Code in Notes for Slide – Jkneale@fathomdelivers.com
@joekneale
#mobileemail
15. From Line: 23 Characters or less
Subject Line: 31 Characters or less.
@joekneale
#mobileemail
16. Tip #3: Utilize
the Preview Pane
with Great Pre-
Header Text
@joekneale
#mobileemail
17. Most mobile inboxes
show the first few lines of
text from a message.
This is an opportunity to
be strategic with copy to
increase open rates.
18. 5 Rules for great pre-header text:
1. Keep it less than 50 Characters
2. Tease the content of the email
3. Provide a strong call to action
4. Always test, every audience is different
5. Elaborate on, don’t repeat, the subject line
@joekneale
#mobileemail
19. Adding pre-header text:
Displayed Pre-header
Simply add a line of text
before the rest of the
message.
Hidden Pre-Header
Use a 1x1 pixel image and
enter the pre-header text
into the alt=“” field.*
-or-
Put the text in a div and
hide it with clever styling.*
*Add PH text as first line of text version
of message for outlook.com
Sample Code in Notes for Slide – Jkneale@fathomdelivers.com
@joekneale
#mobileemail
22. High Resolution “Retina” Displays are
becoming the norm on mobile devices
@joekneale
#mobileemail
23. 4 Guidelines for message size:
• No individual images larger than 100kb
• Keep overall file size below 250kb
• Replace images with text/html when possible
• Build emails to degrade gracefully
@joekneale
#mobileemail
24.
25. Balance limited bandwidth and image quality:
• Design images 2x larger than they will appear
• ‘Save for Web’ in PS at 30% image quality at 2x size
• Set image to display at 50% by sizing in image tag
File or image size still too large?
• Slice large images and combine them in a table
@joekneale
#mobileemail
26.
27. Tip #5: Follow
Best Practices for
Minimum Button
and Font Sizes
@joekneale
#mobileemail
28. Font size
Apple Recommends
font size 17-22pt.
Google Recommends
font size 18-22pt.
16pt+ seems to work great for most font families.
Fonts smaller than 12pt will be resized by many
devices, causing rendering issues! @joekneale
#mobileemail
29. “Clickable” button size
Apple Recommends
button size 44x44 px.
Google Recommends
button size 48x48 px.
46x46 px seems to work great on all devices
tested.
@joekneale
#mobileemail
32. The Good News:
If your emails are 550-600px wide (a long standing best
practice)…
And you are using size 16 fonts and 46x46 buttons…
Your fixed width emails should work pretty well for most
mobile users!
Test a smaller format:
For a super mobile-friendly experience that isn’t responsive,
consider testing a skinny 1-column design that is 320px wide.
33. Tip #7: Use a
Mobile-Friendly
Landing Page
@joekneale
#mobileemail
34. Evaluate how mobile-friendly your pages are:
• Open the site from a few mobile devices
• Use the mobileOK checker by W3C
• Use Google Analytics to find which devices matter
• Use one of these 13 tools to test compatibility
@joekneale
#mobileemail
35.
36.
37. What if my landing pages are not mobile-friendly?
• Fix most offensive elements of the current site
• Create temporary, mobile-responsive pages
• Redesign
39. For 5 Universities in a 2013 study:
• Mobile conversion rates were 45% of desktop
• Mobile time on page was 60% of desktop
• Mobile pageviews were 38% of desktop
@joekneale
#mobileemail
40. Simplifying the user experience for mobile:
• Know exactly what you want a student to do with
each message and build around it
• Remove friction:
o Having consistent calls to action
o Removing unnecessary steps
o Limiting data entry
o Using auto-fill for information already obtained
o Allowing the student to complete on the phone
o Allowing the student to come resume progress at a later
time/on another device
@joekneale
#mobileemail
41. Tip #9: Move to
a Responsive
Template
@joekneale
#mobileemail
42. What is responsive design?
A method for building an email message that
allows the message to “respond” to the screen
size of the device viewing it. Messages re-size
themselves in two ways:
1. Swapping in large and small versions of images
and block elements
2. Scaling images and block elements to fit and fill
varying screen widths
@joekneale
#mobileemail
43.
44. Challenges of responsive design for email:
• All inboxes (Outlook, Lotus Notes, Yahoo!, Gmail,
etc) have their own quirks that have to be designed
around
• Designers need to also consider the implication and
interaction of different devices, device versions,
web browsers and web browser versions
@joekneale
#mobileemail
45. Resources for getting started:
• Campaign Monitor has an excellent guide
• This walk-through from tutsplus is great
• Litmus also published a world-class guide
• Many ESP’s have templates available to help
@joekneale
#mobileemail
According to Mail Chimp, as many as 49% of emails are opened on mobile devices. In the education world, this average has been between 37 and 70% for institutions that work with Fathom. No matter how you slice it, mobile device usage is changing the way many prospective student’s use the web – and it is leaving many email marketers behind!
<head>
@media only screen and (max-device-width: 480px) {
a[class="disable-link"] {
pointer-events: auto !important;
cursor: auto !important;
}
}
</head>
<body>
<a href="tel:1800ABCPIZZA" class="disable-link" cm_dontconvertlink>
<table>
<tr>
<td> Call: +1800-ABC-PIZZA </td>
</tr>
</table>
</a>
</body>
Some devices/orientations cut-off at 15 characters.
Great infographic here: http://masstransmit.com/wp-content/uploads/2013/07/mobile-email_from-name_subject-line_infographic_mass-transmit.jpg
<head>
</head>
<body>
<div style=”display: none !important; mso-hide:all;”>Your Pre-Header Text Goes Here!</div>
<!– Enter the rest of your message here-->
</body>
Test your wireless speed: http://www.speedtest.net/
Actual 3g and 4g speeds by carrier: http://www.techhive.com/article/254888/3g_4g_performance_map_data_speeds_for_atandt_sprint_t_mobile_and_verizon.html
(assuming a .5mbps 3g connection, this takes 4 seconds to load)
