10 Tips for Mobile Email
- 1. 10 Tips for Mobile-Friendly Email #mobileemail
- 4.
- 5. *2013 MailChimp Study, 49% of all mail opened on Mobile Devices @joekneale #mobileemail
- 9. Tip #1: Optimize for Addresses, Phone Numbers, and Dates @joekneale #mobileemail
- 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
- 14. Tip #2: Optimize Subject Lines and From Addresses for Mobile
- 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
- 20. Tip #4: Reducing Email File Size @joekneale #mobileemail
- 21. Average residential Wireless can be 25- 30x faster than 3g from a major carrier. @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
- 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
- 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
- 30. Place “clickable” content in hot spots
- 31. Tip #6: Design for Screen Width @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
- 37. What if my landing pages are not mobile-friendly? • Fix most offensive elements of the current site • Create temporary, mobile-responsive pages • Redesign
- 38. Tip #8: Plan Each Message with a Clear Objective @joekneale #mobileemail
- 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
- 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
- 46. Tip #10: Test Messages for Rendering @joekneale #mobileemail
- 50.
Editor's Notes
- #6: 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!
- #14: <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>
- #16: 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
- #20: <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>
- #22: 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
- #24: (assuming a .5mbps 3g connection, this takes 4 seconds to load)
- #35: http://validator.w3.org/mobile/ http://mashable.com/2014/02/26/browser-testing-tools/
- #48: Litmus.com
- #49: Emailonacid.com