7 Best Practices for Creating a Mobile Email Template

1. Design for Mobile Usability First

• Design the template for scalability on smaller mobile screens
• Use a one-column layout, larger fonts, smaller marketing images, and larger CTA buttons
• Design content blocks with tables and nested tables
• The email width should be 600 pixels or less. Litmus recommends between 320–550 pixels.
• Plan for smaller file sizes (JPG or GIF instead of PNG)
• Many designers recommend a 14+ pixel font for body text and 22+ pixel font for headlines
• CTA buttons should be design for the minimum finger size of 44 pixels in height and/or width or more
• Utilize the “Click to Call” feature as a CTA (if applicable) when a phone number is included

Best Practices for your Mobile Email Template

2. Design to Lead the Reader’s Eye to the CTA (Call-To-Action) for Higher Conversions

• Balance text and images (60/40 is a good ratio)
• Place your first instance of the primary CTA above the fold
• Ideally use 1 CTA goal per email (or up to 3), but for each goal try to include more than one CTA (top & bottom) to avoid scrolling for the reader

3. Create an Attention-Grabbing, Action-Inducing Subject

• Make the reader want to read more or take action with creative, short (<35 char) and clear message
• Use actionable language while maintaining clarity of the purpose
• Personalize if possible
• Align your Subject copy with the Body copy
• Test against spam scoring. Avoid “spammy” words like: free, limited-time, act now, cash, win, test
• For tips and examples, refer to StrongMail’s advice on how to write subject lines

4. Use One-Line Preheader Text

• Preheaders are usually 1–2 lines of HTML text at the very top of the email
• They are ideal for mobile devices to highlight an enticing offer, making it the first thing prospects read before they even consider downloading images
• The first 20–40 characters of the preheader text are also visible in most preview panes, so put keywords to the front of the line
• You can opt to include a mobile-friendly URL link in the preheader text as a CTA
• In addition to the preview lines that appear in web clients, many email clients have a 300-pixel preview pane. Therefore, ideally plan for your primary CTA and most important content to appear within the top 300 pixels.

5. Intelligently Write Email Body Copy

• Be short, concise and to the point
• Talk about benefits, not features
• Keep the main message and its CTA above the fold
• Use actionable language in each CTA
• The copy in the first paragraph is critical and must be appealing to read more
• One important thing to keep in mind if you use small font size in your layout: webkit email clients (iPhone, Pre, and Android) will increase font size on text smaller than 13px, which could potentially break your layout. To avoid your text being resized, define in the CSS.

Mobile Email Template designed by ADM

6. Strategically Use Email Images

• Use images carefully and strategically, since many email clients block images unless manually allowed
• Don’t use images for your primary headline or your only CTA, since they might not appear
• It’s recommended that your first full-width image appears after the headline, so if images are blocked there’s not blank space before your headline
• Use ALT text for each image, due to the high number of email clients that block images
• Plan for smaller file sizes (JPG or GIF instead of PNG)
• Add padding (10–15 pixels) between CTAs or links since the average finger size is 44 pixels