The Basics for Email Template Design

by Brady Nord

June 17, 2010 in Resources

Designing Email templates has proven to be a tricky thing. Between the many possible variables with different email clients and an effective message that communicates with the end user, email has basic elements that must be followed for success. Below I have outlined the difference and strategies of design and functionality. Enjoy!

Design:

I always encourage simplicity with design.  You must consider how your template is going to be given to your end user.  Chances are these days that your end user will be quickly reading their emails on their phones while in the car, in the middle of working, or while there are screaming kids in the background.  Because of this, you must make your design sell in a matter of seconds.

Below are great and effective examples of email templates:

Functionality:

Keep it dynamic

Email templates are a much smaller and often more buggy version of an HTML website.  The reason I say “often more buggy” is because there are so many different variables you need to consider when designing your email template.  Like all web design, you need to incorporate testing, testing, testing.  Email templates need to be tested inside Outlook, Thunderbird, Mail, AOL, Gmail, Yahoo, … etc.  That is the reason you need to be more flexible with your designs.  Each of these email clients will preview the email different.

Notes to remember:

1.  Assumed  standards for an email width is around 600 pixels.  Keep the design within this width.

2.  Always layout your logo and top content to appear in the preview of each email client.  This will help with spamming.

Dealing with images not displaying

I am sure all of us have opened an email only to read “Images are not displayed.  Do you want to display images?”.  This creates a unique challenge to design.  You must assume the lowest denominator and design knowing people are lazy and a large portion will never view the images of your design.  Don’t worry, with a little creativity you can overcome this hurdle.

How to overcome images not displaying:

1.  Never put your message in images!  No explanation needed.

2.  Images are for aesthetics only.  Because of this, I like to see minimalistic designs with email templates.  This ensures that if and when the images are disabled, the content will still be displayed in an effective way.

3.  Using images to send spam text is not effective.  All designs should include text.  If you have one image which includes your whole message there is a chance of getting “black listed”.  Try to maintain an even ratio between images and text.

4.  Use the alt-text tag with your images.  This will help people and your client know what your images are.

Assume all CSS will break

In addition to images not displaying, you can always assume that any and all CSS will break or not be displayed as planned.  Instead of completely using CSS, use HTML tables to control the design layout.

In conclusion:

Email Templates can be the most effective piece of communication when performed correctly.  To perform correctly it is very important to put in the time and research.  In contrary, Email Templates can be the first element to put a bad taste in your customers mouths when done poorly.  When quality design and strategic functionality meet, an effective message can be portrayed.

For designers:  Do your research as to what functionality is possible.  You don’t have to totally understand the functionality just enough to know what you can and cannot do.  For example, don’t use one huge image!

For developers: Keep it simple.  As most of you have stopped using tables and other ancient techniques, now is the time to approach the basics again.


Author Bio: I am a 26 year old internet entrepreneur and co-founder of MOJO-Themes.  In addition, I have been involved with custom design and development for the past 6 years out of Salt Lake City, Utah.  Feel free to contact me on twitter and let me know your thoughts or just say hi! @bradynord

Powered by Shutterstock

About Brady Nord

Co-founder of Mojo-Themes.com

  • Chris Morata

    Jun 17th

    Great article!

    Probably one of the biggest bugs I’ve encountered doing HTML emails is additional white-space showing up around images in the mail clients. There are 2 solutions to this (I would suggest implementing both): write the HTML in one line for the table cell with the image – zero spacing and indenting, and add an inline style of display:block; to your image.

    Works every time!

  • hrothgar

    Jun 17th

    ok, one thing i noticed. Nowhere in your article you mentioned that using “DIV” is Out of the question.

    Also, the use of background-images is not mentioned. Never use Background-images. Most E-mail clients aren’t gonna show them.

    Also, you mention that the maximum width is 600 pixels. Make that 650 pixels. The previewpanel of your mailclient is wide enough for 650pixels.

    Use of pre-headers is also important. Because most mailclients won’t automaticly show images, try using preheaders first. In here you will place text. For example, the reason why the person is getting the e-mail ect.

    When it comes to laws on email marketing, Make sure there is always a “Sign out” button in your design. in countries like the Netherlands this is enforced by the law.

    And also a new one, use an escape box. in here you will communicate location information of the company, social media ect.

    And a good tip for people, if you send newsletters with articles. Try thinking about putting a “post to twitter” button in there. You will find by google-ing for it, that personalise that link is very easy.

  • hrothgar

    Jun 17th

    mmm also i forgot, a good addition is the “View online” button at the very top of your newsletter.

  • Daisy

    Jun 17th

    Great post! Email standards seem to be all over the place when it comes to css styling so the challenge is in not relying so much on images. Pretty difficult coming from a print background :)

  • Martin Lachapelle

    Jun 17th

    thx i was looking for that exacly…

    the french canadian designer…

  • Tomas

    Jun 17th

    Awful truth, CSS is not enough for email. There should be major changes to create standards for email clients.

  • John

    Jun 17th

    Thanks for the great article. HTML emails can be a major pain to get displaying correctly in the major email clients. I have recently found a service that shows you how your email will look in the major clients AND show you want CSS/HTML is not supported in each. The website is http://www.emailonacid.com (Email on Acid) and it has saved me a ton of time. I hope this helps.

  • Jordan

    Jun 17th

    I dream of the day when html emails have standards like the web. That would be a good day indeed.

  • Laur

    Jun 17th

    The day is there already. The standard is called plain text…

  • Jae Xavier

    Jun 17th

    From experience, Gmail and Outlook will block images on default unless permissions are set to download.

    As Brandy had stated, messages in plain text still deliver.

  • Jordan

    Jun 17th

    @Laur

    Notice I said “html emails,” not emails in general…

  • Xcellence IT

    Jun 18th

    coding email templates, requires in depth knowledge of html at first hand, because it requires creating email template design using tables.. moreover, one needs to take care that most of styles are applied by native html tags, and not by css, because lot of styles applied through css break in one or more email client.

    there is no question in defining css in template, but if you want to use, you can define css style inline… inline styles works most of the time…

  • Johan de Jong

    Jun 18th

    As an addition to the comment of ‘hrothgar’ and already mentioned by ‘Xcellence IT’: Always use inline-css and never use css shorthands (like “font: 12px/18px normal Arial,sans-serif;”)

    You also should include a text-version of the email, especially for mobile readers, Lotus Mail users and some spamfilters (which only show the text-version when flagged).

    And as a note to designers: When you design an email and you’re not sure if it’s gonna work try this;
    - only use solid background colors
    - for content – only use web save fonts (other fonts must be put in images)
    - use rulers!!! and make sure content and other “stuff” (like images) don’t exist at the same block.

  • Email Templates

    Jun 18th

    This was a great article. Seems like standards for HTML Email still has a long way to go but, their is some promise! The guys at the Email Standards Project (http://www.email-standards.org/) are working on getting that going. Thanks for sharing!

  • copywryter

    Jun 22nd

    More tips:

    • Use alternative image text to ‘sell’ people on the content/images and encourage them to click the ‘get images’ button. Don’t just put “chair_leg01.jpg”.
    • Find an email service provider that will automate a mobile version for you, this will be increasingly more important
    • Don’t default to 600 pixels. Try 300, or 410, be different, stand out.
    • Design for your users and the devices your message will render on. If they are a B2B audience, assume BlackBerry/Outlook rendering. If they are B2C audience that skews younger, assume Gmail. Watch how Gmail pulls in some of your initial text and alter it to boost your open rates
    • Don’t use too much copy. An email’s job is to drive clickthrough, not blather on. Apple is good at this.
    • Think of email as a billboard or poster, not a website.

  • hrothgar

    Jun 23rd

    @Copywryter

    I partially agree with this. I work for a company in the Netherlands that builds and designs newsletters. The content you have to put in to a website doesn’t always qualify to become a “Billbord or Poster”
    Most of the daily company’s have newsarticles they want to share.
    So you place introductions of these complete articles in your newsletter. It all depends on the croud you are trying to reach as a company.

    If the company is trendy and creative, than the billboard technique is perfect. But for goverment agency’s, financial company’s than a more static approach with pure articles and a header works better.

    If you design all newsletters in a very creative way as a billboard or poster, than that might backfire and the openingrate of your newsletter might be lower.

  • DSM Design

    Jun 25th

    great post! :)

  • Jason

    Jul 6th

    Excellent tips in the article and in the comments as well. Thanks to all!

  • Jill

    Aug 3rd

    Great article.

  • vuitton

    Aug 15th

    it’s a nice design.. thanks for sharing

  • hayley

    Aug 20th

    thank you for this usefull information. :)

  • Neo Cambell

    Oct 26th

    Very nice article. Recommended to read at http://www.expertcore.org/viewtopic.php?f=39&t=2001#p4608

  • MontrealWebdesign

    Nov 24th

    Very interesting article, I have also faced some problems with the images in my email campaigns and in my opinion must be very careful when combining text and image tags.

  • Denis Graur

    Apr 20th

    It’s really a little bit hard to design a html email that will display well in all the email clients but it’s possible. And there is a solution for each problem. It’s just the matter of finding the right designer or the right template.

  • Shikeb Ali

    Jul 5th

    Interesting ideas you have shared here… I’m thinking about to design email template for my own blog, and its gonna help me a lot. thanks for sharing.

  • Andi

    Aug 1st

    Luckily, a lot IS changing in email design and it’s getting better. CampaignMonitor maintains a really comprehensive guide to CSS compliance (http://www.campaignmonitor.com/css/) and all kinds of great tutorials on how to use background images, etc.

    Great article – thanks!

  • Leave a Comment

    Your email address will not be published. Required fields are marked *