SALESmanago offers a number of ways to create the perfect email that will catch people’s attention and encourage them to visit your website and make a purchase. The following email design wizards allow you to create an email based on HTML code:

• HTML Wizard
• ZIP Wizard
• URL Wizard
• FreeMarker Wizard

This article provides advice on how to prepare your email to make sure that it is displayed to the recipients just as intended. IMPORTANT: Remember to always send test emails before sending your message to actual recipients—this way you can verify that your email is displayed correctly on various devices and in various email clients.

---

Here are some rules that you should follow when creating an HTML email:

• Build the entire structure of your email using <table> and <tr> and <td> tags; using the <div> tag may cause numerous issues with column and row arrangement.
• Keep the HTML structure of your email as simple as possible (e.g., apply inline styling, don’t use CSS). This decreases the chance that your email will look different in different email clients.
• The recommended email body width is 600–700 px.
• The code must be compliant with the W3C standard for HTML 4.01—if there are errors in the code, the template will not be displayed correctly.
• Use the charset=utf-8 standard for text encoding.
• Use web-safe fonts that work in most email clients:
  • Arial
  • Georgia
  • Helvetica
  • Lato
  • Open Sans
  • Roboto
  • Raleway
  • Tahoma
  • Times New Roman
  • Verdana
• Don’t use the float, flex, grid, or position properties. You can use the align and valign attributes, e.g., align="left", valign="middle".
• It is not recommended to use any shades, gradients, or background: url properties, as some email clients don’t support these styles.
• Add style="display: block; border: 0px" to all images.
• Every image should have a specified width. We recommend adding images in the target size in which you want them to be displayed in the email.
• Add alt descriptions to your images. They will show before the images are loaded by the email client, when the user moves their cursor over the image, or if the image fails to be loaded.
• Don’t add text over images (i.e., don’t use images as a background for text). Most email clients won’t display this correctly.
• Don’t add videos to your email. Instead, insert a play icon (or a thumbnail image) linked to the actual video. You can also use GIFs.
• Don’t include scripts, frames, or flash animations in your email.
• Don’t include any forms or surveys in your email, unless your email complies with the AMP standard.
• Consider adding a see-in-browser link to your template. The link will allow the recipient to open the email in their browser in case it is displayed incorrectly in their mailbox.
• Responsive emails should be characterized by simplicity. A simple structure will ensure that your email is displayed correctly on most devices. Just as in the case of non-responsive emails, the structure of responsive emails must be built with tables with align attributes and media queries. All elements should have an appropriate width.