Here are some helpful tips for working with HTML code during your e-mail development process or template editing. These are tips, not hard and fast rules.
There are also more considerations to make while working with images, advanced layouts, mobile users, etc…
However, over the years I have found that following at least 80-90% of these tips at all times has ensured optimal performance.
- Check all HTML code to be sure it is valid and that all tags are closed. Invalid code will affect the content quality (spam) score of your message.
- Avoid CSS as many email clients strip it out or over write it. If you must use CSS, keep it to a minimum and only use simple attributes, such as text style and color, and be sure they use inline styles.
- Be sure to include border=”0″ within clickable image tag. Otherwise, some ESPs will add a border to all clickable images.
- Include quotes around ALL attributes, such as height=”55″ and colspan=”2″. Some browsers and ESPs will not recognize the variables without quotes. Also, this will help boost validation and deliverability.
- If applicable, check personalization tags and dynamic content to be sure the code is correct. If they aren’t, recipients will see the wrong messaging. Also, make sure your data is clean before you personalize (e.g. no ALL CAPS for names, unless that’s intentional).
- Don’t use form elements as they could be stripped out of the message.
- Don’t embed Flash and other rich media files and videos in your messages. Instead, your emails should link to a landing page containing the files. If you plan to incorporate video, use a screen shot with the “play buttons” intact as the call-to-action.
- Avoid using <p></p> tags when possible; however, use <p></p> tags instead of <div></div> tags for alignment purposes and <br><br> tags to separate paragraphs. <span></span> tags should also be avoided whenever possible.
- Be careful using <body> tags for formatting purposes as they could be stripped or ignored.
- Only the following Meta tags within the header example below should be used to ensure e-mail validation. Remove all other Meta tags from the code as they are not used by email clients. They are extraneous code that isn’t needed and, therefore, should be removed.
- Review HTML code for extra code that shouldn’t be there. Using programs such as Dreamweaver or other WYSIWYG editors can add extra code to your HTML, which may cause some display issues.
- Use title tags in link URLs for better readability, such as: <a href=http://www.onefunwebsite.net title=”super fun site”> This is especially helpful if your alt tags are empty; however, avoid using “spammy” phrases.