Email design is NOT web design

If you care about W3C standards, use the latest in CSS, etc... You need to forget all of that when approaching email design. Designing a visual email does not use the same rules as designing a good website. There are fewer standards in the email space, which means that you will spend more time testing your message on different email software than you may think.

Keep it simple!

The design of your email templates should be simple. Design should enhance your message, not distract from it. The fewer elements you have bouncing around in your email, the less likely it is to render improperly or trigger a SPAM filter. Remember the basic anatomy of a good email:

  1. Engaging subject line
  2. A clear message
  3. One or two images that illustrate your message
  4. A call-to-action that the recipient can click on to learn more or take action

650px or less total design width

The general rule for email size is to keep it 650px or less in width. This allows the email to display correctly (overall) in most of the email clients and display configurations. To control the width of the email you can use a grid or table and set it's width to be 650px (~6.77 inches)

Don’t depend on your images loading—Content is key

Many designers attempt to circumvent the constraints of email layouts by designing a promotional email using only images. While this allows you to do very creative layouts, it also makes your email worthless if your images don’t load. Lots of your recipients are going to be viewing email from a cellphone or behind a campus firewall or other content-filtering system that may block your images as well.

Choose your image formats wisely

The format for the images you include can affect how they appear in your email. Which file format you should use generally comes down to what is most appropriate for the content of that image.

  • If you’re looking to include animation, the GIF format is the obvious choice. The only downside is the limit on colors and potential file size of animated GIFs
  • Need your photographs loading quickly and still colorful? Go with a JPEG. They're not so great for logos and images you want to avoid compressing or lowering the quality of.
  • If you're wanting to use transparency or maintain high quality on your logos or lineart, PNGs are your choice. The caveat is that they may not load in older browsers or email clients (IE5 and older, early versions of Lotus Notes).

Always test your message first

The last thing you want to do is spend a lot of time putting together content for an email, and then it not work. That’s why it is vital to test your emails before you send them. Choose a few select people in your office (who may use different email software) to send it to and make sure all of the links work, there’s no spelling errors and that the images render. Once you’re confident that it’s ready, then you can send it out to your list using the unique address provided.

Have more questions? Submit a request