If you find that your HTML Is not rendering correctly, it may be due to some of the issues below, as manual coding invites room for errors or difficulties. Use this guide to troubleshoot your HTML.
Images don't appear in the test email
Keep in mind that some email providers hide images by default, or subscribers turn these off on their own. Because of this, it’s important to ensure that all important information is conveyed in text, outside of images. Additionally, always use alt text for your images.
The test email doesn’t reflect the code
To find what caused the discrepancy, check to see if this issue occurs across multiple email providers, as each provider has varied levels of support for custom HTML and CSS:
- If the issue only occurs with one email provider: it’s likely an issue with how the provider interprets the HTML.
- If the issue occurs across all email providers: it’s likely an issue with the HTML itself.
However, keep in mind that email rendering is a deeply complex process, and it’s unlikely your email will render identically everywhere.
Common HTML syntax issues
If you’re not sure what isn’t working with your code, make sure you check for these common syntax issues:
- Ensure all opening tags have closing tags: Also, make sure that the tags are nested in the correct order. Proper indentation and line breaks make this easier to confirm.
- Remove nested single or double quotes: If your style tag values are wrapped in quotes, and there are quotes within them (for instance, around a font name), this can cause the HTML to think the style tags have ended. Additionally, If any font names have single quotes around them, remove them.
- Check for typos and missing semicolons: Sometimes, a simple typo can prevent HTML from rendering. Make sure to spell-check the code, and ensure that each relevant field has a semicolon.
-
Double check that media queries are properly formatted, for example:
@media only screen and (max-width: 400px)
Dark mode code
If you’re trying to add code that supports dark mode, know that some email providers fully invert colors for dark mode while others partially invert colors or don't invert them at all. For more information, see Optimize email for dark mode.
Learn more about Attentive Email
If you're interested in learning more about Attentive Email, please submit your information here.