17 Do’s and Don’ts for Designing Inbox-Optimized Email Templates

    by Corey Eridon

    Date

    September 12, 2012 at 4:30 PM

    email marketing templateadvanced

    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

    optimizing-email-marketing-ebook like-what-youaposve-read-click-here

    SUBSCRIBE TO HUBSPOT'S MARKETING BLOG

    Join 300,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

    Search Inbound Hub

    Subscribe to Marketing Articles by Email

    Subscribe by RSS

    Follow HubSpot

    Call Us: 1-888-HUBSPOT