Blog
April 21, 2016
Using email templates makes sense in so many ways. They help your organization to maintain brand consistency, control the look and feel of outgoing emails and reduce production time, especially for non-technical users. Many email platforms, including Marketing Cloud and Pardot, have ready-made templates, and some that are mobile-responsive. However, there are times when out-of-the-box templates won’t suffice. In that case, creating a custom email template is the way to go.
When developing a custom email template, you must take into consideration the idiosyncrasies of HTML email and the quirks of the various email clients (Gmail, Outlook, etc.). The challenge is to design and develop that email template so it looks good in most of the email clients used by your recipients. To help you in that effort, we’ve put together 8 best practices for email template custom design. These best practices are platform-agnostic so whether you use Marketing Cloud, Pardot, MailChimp or another email marketing platform, these practices still apply.
- Know your email audience You could spend hours in designing and testing your email to account for every email client out there. That’s neither practical nor scaleable. Instead, determine the top 3 to 5 email clients used by members of your email list and mind those quirks!
- Build in tables Use the HTML table structure to layout your email. Do not use CSS (cascading style sheets) to place images or text (or more!) as most email clients will not recognize it and/or strip it out.
- Make it mobile-friendly If you’re a code-slinger, you can use media queries to adjust the sizes of images, buttons and fonts for greater readability on a mobile device (but not all email clients support this). For everyone else, you can achieve some degree of mobile readiness by using a single column no greater than 600 pixels wide or by using side-by-side nested tables in larger container table for a 2-column format. In either instance, limit the number of links and use buttons instead (buttons are easier to click than links on tiny screens). Also, consider defining space for teaser text above your header graphic as it shows up in some mobile email clients and provides you another opportunity with which to draw in a reader.
- Use inline CSS to control elements While external and internal CSS is not supported by many email clients, you can use inline CSS in your template’s table structure to define font family, size, colors, styles, line-height and more. Example: <td valign=”top” align=”left” style=”color:#626568;”><table><tr><td style=”font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#0033cc; font-weight:bold; line-height: 22px;”>Speaking of fonts, use web safe fonts for design consistency. While typekit fonts provide greater choice, they are not yet reliable in HTML email.
- Avoid background colors Outlook will strip background colors and images from your design. If you still want to use a background color, keep that color light and use a darker font color. In that way, if the email client does remove the background color, your text is still legible.
- Use graphics optimallyLots of do’s and don’ts related to graphics use and coding:
- DO save your images as GIFs or JPGs. PNGs are not widely supported yet.
- DO declare your images’ height & width within the code. DON’T rely on the email client to know your intention.
- DO include “alt” tags in your tags for disabled recipients.
- DO use HTML attributes like “hspace” or “vspace” or the table structure itself to add padding around your images.
- DON’T embed videos or Flash. Most email clients cannot support them. Use a still image and then link to a landing page with the video or Flash.
- DON’T use image mapping; some email clients do not support. Instead, slice your image and link each slice respectively.
- DO add the in-line CSS “display: block” to each image to counter some email clients, notably Gmail, adding spaces between sliced images.
- Socialize Your Email Incorporate paths to your preferred social channels as part of your template design. Best practice is to place them on the bottom of the template, below the footer. Putting them up top may divert your recipient away from your email before they’ve even had a chance to read it. If they are part of your graphical footer, don’t use image mapping (see above) to link your social networks.
- Test, Test & Test Some More Make sure your email template works, particularly in those email clients you identified as one of the top email clients (see #1 above)! Create test email accounts across those clients if your email software doesn’t provide in-box reviews.
As a final note, while these best practices are platform-agnostic, email marketing platforms will differ on the template set-up process and will make use of certain proprietary coding, for example, to define content areas within your template. Once you’ve mastered the first template, you’ll are well on your way to becoming a template guru!
