In this article
A good email design can raise response rates; similarly, a bad design can result in poor response rates and possible spam complaints, affecting your ability to successfully deliver email in the future.
1: Best Practices
1.1: Coding
1.1.1: General guidelines
- Structure your content using tables and tables-within-tables. Table structures are supported by all email clients, so you can be sure that your email renders as you intended.
- Use HTML attributes instead of style attributes.
- Use in-line styles.
- Keep CSS simple. Be sure to check if the attributes you are using are supported (many are not, so it is best to specify cell size and padding with HTML attributes).
- Do not use Flash or Javascript. Use gifs if you need to add animation.
1.1.2: Responsive emails
- Use media queries to detect screen size. See here for a list of email clients that support media queries.
- Add classes to HTML celements.
- Hide unnecessary content on mobile.
- Stack columns.
- Use metatags: These can be added via the Advanced Settings tab in Panel Properties. Add metatags to "Custom email Extension-Field headers (X-Headers)." Recommended metatags to use are:
#Sets character encoding to utf-8 <meta charset="utf-8"> #Sets the email client to render the width of the email at the width of its own screen <meta name="viewport" content="width=device-width, initial-scale=1"> #Tells IE which engine to use to render the email. Edge is the browser's most recent engine <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- Keep in mind that responsive design is not always supported by all email applications. Gmail, for example, does not support responsive design.
1.2: Images
- Do not design an email that consists mostly of images. This can raise the spam score of your email.
- Assume that most images will be blocked.
- Do not use a brand logo in such a way to make the email appear that it came from that brand when it did not. Respondents will mark your email as spam, causing email providers to block your mail in the future.
- Specify height and width for all images.
1.3: Links
- Always use absolute links.
- Use hyperlinks. The HTML editor can create hyperlinks for you.