The Basics for Email Template Design

by Brady Nord

on 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