Want your email marketing campaigns to be as successful as possible? Follow these email template and content best practices to promote recipient engagement.
Keep your template simple
Your email campaigns should focus more on your message, not the look and feel of your email. Just like it is with your website, content will always be king.
Keep email width under 600 pixels
This ensures that users of email clients such as Outlook can view your email in their vertical preview pane. Within your HubSpot email settings you can set a body width.
Optimize for mobile
It's crucial to consider your mobile audience when utilizing email marketing. Most people are reading their email on-the-go and, keeping that in mind, HubSpot has built in responsiveness to all of its email templates.
Create templates with HubSpot template builder
Coding for consistency across various email client requires understanding the HTML and CSS nuances of each client. To skip all that, use HubSpot's built in tools to create emails and ensure that they look great across major email clients and are responsive in mobile.
Use code-friendly software
When copying and pasting external custom code into rich text modules, use a simple text editor like Notepad or Sublime Text. Copying content from Word and other WYSIWYG editors typically add extra code that will cause your email to display poorly in certain email clients. Alternatively, create your content right in HubSpot's email editor.
Design with tables
While it's no longer best practices to design web pages with tables, they're essential when designing emails. It's the only way to have your design render correctly across multiple email clients. Please be sure to adjust the size of your table, within the source code, to correspond with the responsiveness of your email.
Use inline CSS
Email services that are browser-based, like Gmail or Hotmail, will strip out your DOCTYPE, BODY, and HEAD tags, so use inline CSS instead.
Avoid CSS shorthand
An example of CSS shorthand: <p style="font: italic 14px Verdana; color: #000"></p>
An example of correct CSS: <p style="font-style: italic; font-size: 14px; font-family: Verdana; color: #000000"></p>
Avoid external or internal CSS classes or IDs
Anything that starts with <style> will have mixed results across email clients. Instead, use inline CSS.
Even if a SPAM filter allows your email through, most email clients will not allow these scripts to function.
Use plain text-style bullet points
In addition to images, another element that tends to break in HTML email renderings are HTML-style bullets. To avoid the recipient seeing invisible or wonky bullets, use a plain text alternative such as asterisks (*) or dashes (—) that are more likely to show up no matter what.
Avoid Flash or video embeds
The ability to view rich media in email is turned off by default in most email clients. Instead, include an image of your video player (with a play button) that links to the rich media on a website page.
Avoid using invisible text
This is a common trick that spammers use, so it's now an instant red flag for SPAM filters.
Abide by CAN-SPAM rules
You must include an unsubscribe option in every email, as well as your company name and address. In HubSpot, you cannot save an email template unless it includes this element. For your convenience, please find below helpful documentation on how to set your CAN-SPAM information within HubSpot.
Write a captivating subject line
The majority of people say they open emails based on the subject line . Keep yours to 50 characters or less for maximum impact.
Use clear Calls to Action (CTA)
Just as you want to include CTAs on your website that link to your landing pages, you should do the same in your emails. Make your primary CTA stand out, and make it very clear what the benefit is of clicking through. Once email recipients reconvert on your site, you'll know that they're more qualified leads.
It's also good to display your CTAs early. Display your CTA near the top of your content so recipients can see it without scrolling.
Personalize your content
Using personalization tokens allows you to give the recipients of your email a more custom experience. Personalized emails also improve your click-through and conversion rates! To learn more about personalization tokens in HubSpot, check out this article.
Use absolute paths instead of attachments
If there's something you would like to send your recipients, such as a PDF or a Word doc, don't attach the file to the email. To minimize the chance of being blocked by spam filters, and to decrease the load time of your email, instead upload the attachment to your website and link to the file location in your email using an effective Call to Action. HubSpot's attachment tool in the email editor automatically does this for you; simply highlight a bit of text or an image, and click the attachment icon. HubSpot will then turn that text or image into a link leading to that attachment.
Include "Follow Me" section
Add follow buttons or links for Facebook, Twitter, LinkedIn, or any other social media channel you actively participate in. To learn more about adding a Follow Me module to a "drag and drop" template, check out this article.
Allow recipients to share with their network
HubSpot's email tool allows you to add social sharing options in each of your emails. Take advantage of this feature to help your content go viral.
Avoid background images
Outlook will not recognize background images. Instead, use a background color, and use images in other ways in your email.
Use absolute image paths
If you upload an image to an individual email using the HubSpot image library, this automatically happens for you. If including an image in an email template, host the image on your website. You could upload the image to your HubSpot file manager. Then make your image paths point to the full URL, such as: http://www.yoursite.com/yourimage.jpg.
Correct image HTML: <img src="http://www.yoursite.com/images/yourimage.jpg">
Incorrect image HTML: <img src="/images/yourimage.jpg">
Declare image width and height
This will ensure that your email design will maintain its structure when images are turned off by email clients.
Optimize image size
Make your image file sizes as small as possible without losing their visual integrity. This will prevent long email load times.
Avoid using PNG images
Lotus Notes does not support PNG image formats. Use a format such as JPG or GIF instead.
Avoid using image maps
Hotmail will not recognize image maps.
Have an even balance of text and images
Using one large image as your entire email, or too many images in general, tends to end up in recipients' SPAM folders.
Send from a real person
Avoid impersonal "firstname.lastname@example.org" email addresses where possible and instead send your email from an individual. Emails from generic email addresses are often ignored.
Use preview text
Include a brief description at the very top of each email. This text will appear next to the Subject line in the inbox of some email clients and can be generated in the Preview Text section of your HubSpot email.
Always have a plain-text version of your email
Some browsers, email clients, and mobile devices can't handle HTML. While many email clients allow you to make HTML email the default setting, some also enable users to only view emails in plain text. Not solving for this type of email subscriber puts marketers at risk of alienating a portion of their subscriber base. Additionally, an HTML email without a plain-text email counterpart is a red-flag for SPAM filters. HubSpot makes it easy to pull in the text from the HTML version of your email into a plain-text version.
- Keep the copy the same as your HTML version
- Having no plain text version of your HTML email is a signal to SPAM filters that your email is SPAM. But the same holds true for plain text emails with copy that is much different than its HTML version. Avoid using your plain text copy to simply direct recipients to the web-based version of your email or visit a certain page on your website.
- Use all-caps in headers
- Because formatting elements such as bolded text, italics, headers, etc. that you'd use to emphasize important text in your HTML emails won't display in plain text versions, consider using techniques such as all caps for things like headers to help you highlight important parts of your email or to separate sections from one another.
- Use bullet points
- Another way to separate blocks of text or highlight important points is by using bullet points. Just as with HTML emails, this can be accomplished with asterisks (*) or dashes (—).
Allow recipients to view email in web browser
Always provide this option. Even after every step is taken to assure proper email design, an email client can still display an email poorly. Include a link in every email to view the email as a web page. HubSpot makes this easy for you.
The web page version link would look like this:
Test multiple email clients
Use our Preview in other inboxes feature to send a test email and see how the design of your email looks in each email client.
Our Email Optimizer tool provides further feedback to ensure important aspects of the email message are reviewed and resolved before the actual message is sent out.