Post on 24-Apr-2015
description
10 Tips for Mobile-Friendly Email#mobileemail
*2013 MailChimp Study, 49% of all mail opened on Mobile Devices
@joekneale#mobileemail
@joekneale#mobileemail
Tip #1: Optimize for Addresses, Phone Numbers, and Dates
@joekneale#mobileemail
Mobile inboxes create links from text content:
• Addresses: Launch Map Application
• Phone Numbers: Launch Phone
• Dates: Launch Calendar Application
@joekneale#mobileemail
Possible Issues:
• Default link styling harming readability/rendering
• Accidental clicks and distractions
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
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
Tip #2: Optimize Subject
Lines and From Addresses for
Mobile
From Line: 23 Characters or less
Subject Line: 31 Characters or less.
@joekneale#mobileemail
Tip #3: Utilize the Preview Pane with Great Pre-Header Text
@joekneale#mobileemail
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.
5 Rules for great pre-header text:1. Keep it less than 50 Characters2. Tease the content of the email3. Provide a strong call to action4. Always test, every audience is different5. Elaborate on, don’t repeat, the subject line
@joekneale#mobileemail
Adding pre-header text:Displayed Pre-header
Simply add a line of text before the rest of the
message.
Hidden Pre-HeaderUse 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
Tip #4: Reducing Email
File Size
@joekneale#mobileemail
Average residential Wireless can be 25-30x faster than 3g from a major carrier.
@joekneale#mobileemail
High Resolution “Retina” Displays are becoming the norm on mobile devices
@joekneale#mobileemail
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
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
Tip #5: Follow Best Practices for Minimum Button and Font Sizes
@joekneale#mobileemail
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
“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
Place “clickable” content in hot spots
Tip #6:Design for
Screen Width
@joekneale#mobileemail
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.
Tip #7: Use a Mobile-Friendly Landing Page
@joekneale#mobileemail
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
What if my landing pages are not mobile-friendly?
• Fix most offensive elements of the current site
• Create temporary, mobile-responsive pages
• Redesign
Tip #8:Plan Each
Message with a Clear Objective
@joekneale#mobileemail
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
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 actiono Removing unnecessary stepso Limiting data entryo Using auto-fill for information already obtainedo Allowing the student to complete on the phoneo Allowing the student to come resume progress at a later
time/on another device @joekneale#mobileemail
Tip #9: Move to a Responsive Template
@joekneale#mobileemail
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
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
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
Tip #10:Test Messages for Rendering
@joekneale#mobileemail
@joekneale#mobileemail