Many constraints and specifications come into play when it comes to HTML email design. Email softwares are many and capricious, and it is difficult to predict how your email will appear in all conditions.

We present here the main rules to put all the chances on your side.

1. The maximum recommended width = 600 pixels

Software and e-mail services often force the reading area to a small portion of the screen. If you use the expert mode or you get your mailings from your graphic designer, you need to pay attention to this detail.

With regular Cyberimpact editor, your email and images will always be properly sized.

Read our article on the maximum width of html emails

2.a) Images are not always displayed by default

In fact, almost all email software do not load images until the user has chosen to do so. This means that at first glance the reader will see a series of empty squares. Your beautiful layout may look like a paint-by-number. Not exactly what you’d wish, right?

email software

2.b) Do not use only images

You now know a layout composed solely of images will put you less to your advantage than including a text and some background colors.

But it is also good to know that an email is composed solely of images will will disadvantage you with spam filters, which can cause your email to be marked as spam and never reach your members.

  • Reserve the upper left corner for a reasonably sized logo.
  • Provide a link to the online version of your email or to your website.
  • Have a layout composed of texts and images.
  • Provide an alternate text for all images.

3. Code as in 1998

Software emails have their own HTML interpreter. Some support some more advanced features, but all have serious safety and visual presentation limitations.

Eg forms, flash, javascript, CSS and iframe will not work.

  • Create your layout in html tables.
  • Code your css styles directly onto the elements.
  • Provide links to medias (video, web page, etc.) rather than trying to integrate them directly.
  • Create multiple emails addresses to test several software.

* For agencies, Litmus is an extremely useful testing tool, but it is not free.

4. Use web-safe fonts

If you try to use the “Bell Gothic” font in your email and it is not installed on the computer of your member, the system will automatically replace this font with another, which may not be the one you would have chosen.

Use one of the following fonts: Arial, Comic Sans MS, Courier New, Georgia, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS or Verdana. Any other font shall be inserted as an image.

5. Think mobile

More and more people own and use a smartphone to access their emails. According to a study BlueHornet published in January 2012, 70% of readers delete without reading emails that do not appear correctly on their mobile platform.

Another important point: the download speed. The bandwidth of these devices is reduced and the users pay for the data they download. They therefore prefer an email with a relatively simple layout, without superfluous image or content.

Cyberimpact models are now compatible on mobile.

Use Cyberimpact’s regular editor or a pre designed template and keep your email short and sweet.

6. Be recognizable

Unwanted emails are thrown in the trash, it is known. This is why it is important to have the permission of your members to send them e-mail communications. Similarly, it is essential that they are able to easily identify you.

Use a clean, branded visual and pay attention to your mailing’s object to make sure it is easy to understand.

Eg : Cyberimpact – Improved reports and statistics

Will be much more effective than: March 2013 Newsletter – Cyberimpact news

Conclusion

The best approach when designing an HTML email is always to keep it simple and maintain the relationship with the member. Cyberimpact regular editor aims to sweep away technical difficulties associated with HTML mailng so you can focus on your message.

Read our guide to create your model Cyberimpact