10 Tips for Mobile Email

10 Tips for Mobile-Friendly Email#mobileemail

Joe Kneale

@[email protected]

mailto:[email protected]

*2013 MailChimp Study, 49% of all mail opened on Mobile Devices

@joekneale#mobileemail

Tip #1: Optimize for Addresses, Phone Numbers, and Dates


Mobile inboxes create links from text content:

• Addresses: Launch Map Application

• Phone Numbers: Launch Phone

• Dates: Launch Calendar Application


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


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 – [email protected]@joekneale

#mobileemail

Tip #2: Optimize Subject

Lines and From Addresses for

Mobile

From Line: 23 Characters or less

Subject Line: 31 Characters or less.


Tip #3: Utilize the Preview Pane with Great Pre-Header Text


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


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 – [email protected]@joekneale

#mobileemail

Tip #4: Reducing Email

File Size


Average residential Wireless can be 25-30x faster than 3g from a major carrier.


High Resolution “Retina” Displays are becoming the norm on mobile devices


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


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


Tip #5: Follow Best Practices for Minimum Button and Font Sizes


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.


Place “clickable” content in hot spots

Tip #6:Design for

Screen Width


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


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


http://validator.w3.org/mobile/

http://validator.w3.org/mobile/

http://mashable.com/2014/02/26/browser-testing-tools/

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


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


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


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


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


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


https://www.campaignmonitor.com/guides/mobile/

http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic

Tip #10:Test Messages for Rendering


10 Tips for Mobile Email

Education

Transcript of 10 Tips for Mobile Email