Best practices for HTML email coding
Emails remain a vital part of professional communication in the digital age. However, making effective HTML emails requires more effort than just composing plain text. In this Answer, we explore the best practices to ensure your emails look great and reach our intended audience successfully.
Practices
The table below highlights some of the best practices:
Practice | Description |
Keep it Simple | To ensure compatibility across different platforms, we should make our HTML markup as simple as possible. Stick to basic HTML elements and avoid excessive styling. Inline CSS is also preferred over external stylesheets to minimize rendering issues. |
Responsive Design | We should use media queries to adapt our layout and font sizes for various screen sizes. Testing should be done on different devices to ensure they display correctly. |
Optimize Images | Large image files can slow down email loading times. We should optimize our images by reducing file sizes without compromising quality. We can use alt text for images to provide context in case they don’t load. |
Fallbacks for CSS and Images | Not all email clients support CSS or display images by default. Provide fallbacks for CSS-styled elements using inline styles and ensure your email remains coherent without images. |
Avoid JavaScript | Most email clients turn off JavaScript for security reasons, so relying on it for email functionality is unreliable. We should stick to HTML and CSS for design and interactivity. |
CAN-SPAM Regulations | Our HTML emails must adhere to the CAN-SPAM regulations by including a visible unsubscribe link, our physical address, and accurate sender information. |
Code example
These practices can best be seen in the code below:
This code can be explained as follows:
Lines 8–43: The inclusion of inline CSS for compatibility purposes. It also contains a responsive design with
max-widthinside the container.Line 46: This is a
<h1>heading displaying text. It’s the headline that introduces the main content of the email.Line 47: The
srcattribute specifies the URL of the image file, and thealtattribute provides alternative text for accessibility purposes in case the image cannot be displayed.Line 50: The definition of our “Read More” button.
Line 53: This contains information about the sender of the email (
The Detective Agency)and a link to unsubscribe. This adheres to the CAN-SPAM regulations.
Note: As the email above is just for demonstration purposes, clicking on the buttons doesn't do anything.
Free Resources
