Creating email templates for your company's email marketing sends can make your life a whole lot easier. Think about it: Every time you send an email, all you need to do is input some copy, an image or two, and a call-to-action. Then BAM, you've got yourself an email ready and raring to go.
Some companies opt to use their ESP's templates -- we certainly have a bevy to offer in HubSpot's email marketing tool that are inbox- and reader-friendly and optimized. But some email marketers are looking for something a little more aligned with their particular brand, and we get that, too. The only trouble that comes with creating your own email marketing templates is that you run the risk of ending up with something you think looks great in your email tool, but actually looks like a hot mess in certain recipients' inboxes. Whoops.
To help mitigate that consistency issue, we've compiled a list of tips and tricks to help ward off much of that danger. Of course, you should also run your emails through testing software like Litmus to get a second set of "eyes" on just how well-optimized your design is. But if you reference this list during the design process, you should find you have little (or nothing!) to fix after your first email template design attempt.
17 Tips & Tricks to Reference When Creating Email Marketing Templates
1) K.I.S.S
First and foremost, the design of your email templates should be simple. Design should enhance your message, not distract from it! And frankly, emails with a lot of design hoopla bring the reader's attention away from your actual message, and as a result may harm conversions. Plus, the fewer elements you have bouncing around in your email, the less likely it is to render improperly or trigger a SPAM filter.
2) Use the Right Coding Software
That is to say, don't use Microsoft Word to write your email template code. WYSIWYG editors typically add "bonus" code that makes your emails display unexpectedly wonky. If you're using Dreamweaver, Notepad (free on your PC!), or HubSpot's email template creator -- just to name a few options -- you'll be a-okay.
3) Keep the Width of Emails Under 650 Pixels
This ensures that they always display in Outlook's vertical preview pane -- can't forget about your Outlook readers! If you're a HubSpot customer, you can duplicate our email templates to get started if you like; all of our templates are fewer than 650 pixels in width.
4) Tables Are Your Best Friend
If you've been coding for a while, you may think that sounds insane, but it's actually important to use tables in email template design to ensure your email renders the same way across every email client.
5) Avoid Body Attributes
You may encounter email clients that don't pay attention to body attributes, which means all your hard work is for naught. So if you wanted to, say, create a light gray email background, you should simply use a 100% width light gray table, and then nest the content of your email within that table.
6) Don't Use HTML Bullet Points
Those pretty HTML bullets you're used to don't work too well when rendered in email. Use a plain text alternative, like dashes (-) or asterisks (*) to ensure readers don't see broken or missing bullets in their email message.
7) Tread Lightly With Video
Video in email is still in its infancy; as such, it doesn't render well in most email clients. In fact, most email clients don't let you view rich media by default, which means your video might not get seen. Instead, take a screen capture of your video and put in that little white "Play" triangle we're used to seeing at the beginning of a video. You can then include that image in your email, and link it to a web page with the video embedded
8) Inline CSS Is Your Best Friend
Gmail, Yahoo!, Hotmail ... what do they all have in common? They're browser-based email! What else? They (and other browser-based email clients) will strip out things like BODY, DOCTYPE, and HEAD tags. You won't encounter this problem if you use inline CSS.
9) Write Out Your Inline CSS
It's tempting to use shorthand, but you should write out your CSS in full. That means, for example, that your font isn't just:
font: italic 12px Arial
You give it the whole shebang, like this:
font-style: italic; font-size: 12px; font-family: Arial
10) Use Absolute Image Paths
That means any images in your email templates should be hosted on your website. Then, make the image path point to the URL of the page on which the image is hosted. You can always find the image URL by right-clicking on an image and selecting "View Image Info." It should end with a file extension like .jpg or .gif, not .com.
11) Steer Clear of PNGs
Speaking of that image URL, I used ".jpeg" and ".gif" as examples for a reason. PNGs should be avoided in email templates, because they're not supported in Lotus Notes.
12) Input an Image Width and Height
This may seem minor, but declaring the image width and height helps ensure your email template maintains its structural integrity across all email clients in the instance that images are turned off when recipients view your email.
13) Use the Right Number of Images at the Right Size
The smaller you can make your image files, the better. You certainly don't want to make the images grainy, but large image files increase email load time, and that impacts the success of your campaigns. You should also take care not to include too many images throughout your email, and maintain an even balance of images and text. This will help you stay out of SPAM folders and increase reader engagement.
14) Don't Forget About Image Alt Text
Nope, alt text isn't just to help search engines read images on your website. Alt text in emails helps readers determine what images were supposed to be had they rendered in the inbox. Including clear, descriptive Alt text helps fill in the blanks for recipients if images are blocked, turned off, or rendering improperly.
15) Create an Accompanying Plain-Text Email Template
We all know not everyone renders their emails in HTM. Some people, in fact, can't do it at all depending on their email client or the device they're reading it on. That's where plain text comes in handy. Plus, not having a plain-text option sometimes signals SPAM filters. Make sure the copy in your plain-text email stays mostly the same as the copy in your HTML email. If you're using HubSpot, you can make your plain-text email template version with just the click of a button.
16) Use a Link Shortener for URLs
This may not seem like a big deal in your beautiful HTML email where URLs are hidden behind anchor text, but think of your plain-text version for a minute. In plain-text emails, the URL appears in parentheses ... and if your URL is long, that can start to look pretty unwieldy, particularly if you're including a ton of URLs in your email. Use a link shortening service -- there are plenty of free ones like bit.ly and ow.ly -- to shorten up those links.
17) Include an Unsubscribe Link, Physical Address, and Company Name.
Including these three elements in your email template will help ensure you're always CAN-SPAM compliant. Because including these three components is ... well, the law. And it's way easier to just build it into your template than add it to every single email you send out! If you're using HubSpot to build out your templates, don't worry -- this is included for you.
I'm sure there are plenty of other email design best practices and tips you can share for those creating their first email templates -- share your advice in the comments!
Image credit: samnasim


Gonzalo Cervelló 4:57 PM on September 12, 2012
Thank you Hubspot for all your post, info and free stuff! This one is a great post and really helpful for our company. Greetings from Spain!
CaseyB 6:56 PM on September 12, 2012
These are great recommendations.
These days we also run into the issue of making sure your emails render well in mobile devices.
One online tool that we have fallen in love with that really helps us out is 'Email on Acid'. Check it out - It gives you examples of how your email code with display in a number of different environments including smart phones and ipads.
Jana Sheeder 1:20 AM on September 13, 2012
Excellent information. I particularly like the educational info about videos, bullets, and types of photo files (no .png's) that can be used. I always learn a lot from your posts, HubSpot. Thank you!
Keith Gormezano 2:00 AM on September 13, 2012
Don't forget to include a phone number as well.
Elise 9:08 AM on September 13, 2012
Really great content here! Now just don't send this wonderful email out on a Monday or Friday!
Henry Aquino 9:42 AM on September 13, 2012
These are great tips....to bad that as basic and common sense as they are, companies still don't use them. Much easier for them to create a large image with a link to an unrelated landing page (Homepage).
Jane 2:24 PM on September 13, 2012
I agree with the masses. THANK YOU for freely sharing your expertise, going overboard on providing your insight and knowledge even to some of us who just want to understand technology uses today - in hopes that we get to use them as a customer tomorrow. Technology moves at the speed of light while I, on the otherhand am a hedgehog. Your knowledge amazes me, your writing enlightens me, your attitude to let me on for the ride mystifies me. HubSpot has my vote of confidence.
Vinnie 4:51 PM on September 13, 2012
650? Everyone in the industry knows 600 is the max standard. Not sure where that 650 came from.
Also, the PNG rule doesn't exist anymore because less than 2% use Lotus notes. Also there's a fix for that PNG issue. BUT I still recommend using JPGs.
Alt text is unreliable when you have images side by side, just look at gmail.
I have never heard of someone use a link shortener for email. I guess that would work though for tracking if you don't use a real email service provider.
HOWEVER gmail adds all kinds of crazy stuff to links, so you're point of having 'long' links is kinda invalid. As well.
Inline CSS except for @media in head tag css and iOS android changes/improvements in design, usability and functionality.
I do this for a living for fortune 500 companies. Figured I'd help spread the word.
Vinnie 5:00 PM on September 13, 2012
Alt txt is always a must though, don't get me wrong on that one.
Alex Johnson 2:06 AM on September 14, 2012
This is really great stuff. If you have never heard of Lloyd Irvin, you should check out his free webinars. I learned more from them in a few days than I did through a course I paid thousands of dollars for. He even has a free dvd that you just have to pay the shipping on. You can get one here http://bit.ly/PyGiY0
David Padilla 12:03 PM on September 14, 2012
Another tip: Add a background color inline style to your images. This will give your newsletter more structure in case images aren't downloaded.
In Explorer, if an image isn't downloaded, a image border and a red X will display where the missing image is... only the alt text will be shown. FireFox will not display this. It will simply be a blank area (no red X or image border) and the alt text will look like it's randomly placed on a blank canvas.
If there's a background style applied to the images, and if images aren't downloaded, then the color you applied in CSS will fill the area where the missing image is. It will inherit the same dimensions and give your newsletter a more finished look.
This is the inline CSS:
Thank you for this post. It's always good to reinforce best practices for email design and development.
Lynn Dalsing 2:08 PM on September 17, 2012
Great post as always, Corey. We actually require all email creative to stay at 600 px in width or less to make sure that it renders properly in all mobile clients.
We shared this post in our roundup of interesting email marketing news at http://blog.ividence.com/en/archives/email-marketing-new-september-17-2012
Maria 9:23 PM on September 17, 2012
17 great tips. Great time savers here are avoiding body attributes, HTML bullet points and any styling that is simply lost in browser rendering. Two items often forgotten are image alt text and the plain text email.