There are many different aspects to consider for HTML email coding best practices. In this blog post, I will discuss some of the best practices for coding emails. Whether you’re new to HTML email, or are well versed in HTML, but find email more restrictive than web pages.
Using best practises can result in lower stress levels (along with less surprises). To help you save a few hours of debugging, and banging your head on the monitor (been there, done that too many times). The guidelines I discuss in this blog post will also provide some tips on designing html emails for mobile devices (“mobile first”) and high-resolution displays.
So let’s kick your email design (and development) onto a better path towards success. Let’s get cracking!
Development Considerations for HTML emails
We need to take into account a wide range of email clients and devices in order to create code that will be displayed correctly for the majority of recipients (subscribers).
Obviously HTML impacts everything about your email campaign message. Below are some key best practises for coding HTML emails.
Email Coding – Two Approaches
There are two different types of email coding – responsive and hybrid. Responsive coding is designed to adjust the layout of the email to best fit the device it is being viewed on. Hybrid coding uses a combination of responsive and traditional coding methods to create a layout that is optimized for both mobile and desktop devices.
Responsive email design is an approach to email coding that adjusts the layout of the email in a way that provides a better user experience for recipients who are viewing the email on a mobile device.
Some of the key considerations for responsive email design include using a fluid layout, using media queries to adjust the width of the email, and using responsive images.
Hybrid email design is a combination of responsive and “traditional” coding to create a layout that is optimized for both mobile and desktop devices.
Here’s how this may look…
Responsive
The use of 100% width container, where your complete email container is styled. This complete table is your wrapper. A floated table is used (fixed width and centered), which includes specific elements (and their related) styling.
In my opinion the responsive approach for HTML email coding best practices might be (arguably) easier to use if employing media queries to alter for different screen sizes.
Hybrid
This approach used tables at 100% width, and then constrict the tables with maximum width styles. This has an interesting behaviour in that smaller viewing screens will have the available viewing space filled, yet on wider screen areas, the table width will likely reach it’s maximum.
The hybrid approach tends to work very well across multiple email clients, irrespective of which styles or media queries they support (or not).
Ensure Email Size is Small
The average email user receives a lot of email each day. This means that they are likely to delete emails that are too large, or that take too long to load. For this reason, it is important to keep your email size as small as possible. Personally, I’d rank this near the top of HTML email coding best practices.
Typically this means working to keep your email (when possible) to no more than 102kb. Other considerations:
- Width: 600px
- Height: Up to 3000px
- Height of the header: Up to 200px
- Most important details: Include in the first 350px (vertically)
Keeping email campaign messages at 102kb (or less), helps to pass more spam filters. Also, Gmail (which a large number of your email subscribers might use), for example, has the habit of trimming messages that are over 102kb, and injecting a prompt (the subscriber needs to click or tap) to read the entire message. For busy subscribers, this could result in your CTA (or other important information) from being lost.
One simple way of reducing email message sizes is not to embed images (or other large files).
Don’t Use Javascript, Forms, or Heavy (HTML / CSS) Elements
Most email clients don’t use JavaScript – So don’t include it in your email coding.
Similarly adding forms to an email message can be a security issue and will often get caught by anti-spam solutions. While I’ve often seen forms embedded in email it’s not part of HTML email coding best practices
And finally, avoid complex CSS and HTML (such as CSS3 + HTML5) elements in your email messages. These can often cause problems with how the message renders on different devices.
Whenever Feasible, Utilize Tables
One of the benefits of using tables for email design is that they are widely supported by email clients. Additionally, tables can be used to control the layout of your content, which can be helpful when designing an email message.
However, it is important to note that using tables for email design can result in some problems. For example, Outlook 2007/2010/2013/2016 has a tendency to add extra spacing around images that are placed within tables.
It’s also worth noting that some email clients (such as Gmail) will strip out the CSS styling from your message when it is displayed. For this reason, it is important to use inline CSS styles when coding your email messages.
More about Outlook and CSS styling below.
Remove Template Comments Before Sending
Before sending an email, it is important to remove all the comments in the template. This will make sure the email looks good when it is sent, while squeezing the size down some more.
While developing your HTML email templates, it’s good practise to add comments to the code (about fixes, tweaks, etc.) – But this adds to the size of your email message (which you want to keep as small as you can).
In addition to manually removing, and compressing your email code, there are some free online tools that you can check out, and leverage if they work for your HTML editing sessions:
Special Characters Should be Encoded
In my opinion this is a big one for HTML email coding best practices! When you are coding your html email, you might want to encode special characters. This is so that they will show up correctly when the email is received.
A case in point… Different devices and applications use different types of encoding, so if you want to add a copyright symbol (for example), don’t just type:
©
and expect it to display in all email readers. Instead, use the HTML code, which would be:
©This way, using actual HTML code, your symbols will properly display in email you send via your campaign – Avoiding empty spaces with “crazy” symbols.
Here’s one list I often use to get codes: https://dev.w3.org/html5/html-author/charref
Leverage Preheader Text
Preheader text is the text that appears in the email preview pane. It is typically a brief summary of the email content, that displays after the subject line. For those seriously working to improve open / read rates, this is a big win for your HTML email coding best practices.
One of the benefits of using preheader text is that it can help improve your email open rates. By including a brief summary of your email content in the preheader text, you can give your subscribers a better idea of what the email is about. This can encourage them to open the email, and read it. Additionally, using preheader text can also help improve your email deliverability rates.
For mobile users, it’s best to try keeping your preheader text to 55 characters, or less, in length. There is no ideal length though, as desktop clients (for example) would likely be able to use up to 130 characters.
But here’s the catch… Because there’s no definitive length, email readers that can display more, might include all of your preheader text, and then include some of that in your email message. So what to do?
Here’s one solution:
Write a longer preheader text, and make very sure to include the most important bits, right at the beginning (this way all email readers have a bit more consistency, and your most important message is not lost).
When coding your html email, you will want to include the preheader text as part of the message. Here is an example of how you would do that:
<body><div style="display:none;font-size:1px;color:#ffffff,line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">This is your preheader text. This will display in the email application, but not in the email itself</div>Because the text is the same color as the email (white), and is very tiny, readers aren’t going to see that within the email. Instead, the email application still display it, after the subject line.
Create Your Email Code for Use by High DPI Displays
When coding your html email, you will want to make sure that it looks good on high dpi displays, this is something you must include in your HTML email coding best practices. This is because many people are now using devices with high dpi displays (e.g. retina displays), and if your email code isn’t optimized for these devices, the email might look blurry or fuzzy.
To optimize your html email code for high dpi displays, you will want to use media queries. Media queries are a CSS technique that allows you to target different styles, depending on the device (e.g. screen size, resolution, orientation, etc.).
Here’s are a few examples of how you could use a media query to optimize your html email code for high DPI displays:
@media only screen and (-webkit-min-device-pixel-ratio: 0) { /* Put your additional code here */}@media only screen and (min--moz-device-pixel-ratio: 0) { /* Put your additional code here */}@media only screen and (-o-min-device-pixel-ratio: 0) { /* Put your additional code here */}@media only screen and (min-resolution: 0) { /* Put your additional code here */}With the media queries above, you are targeting different styles for devices with a high dpi display. The email code within the media queries will only be applied to these types of devices. For all other devices, the regular email code will be used.
HTML Email and Image Use
The appropriate graphics improve your inbox experience while also increasing conversions and boosting brand recognition. The four considerations below, will help you with image handling in your email marketing campaign.
Use absolute (location) URI addresses for images
You should use absolute addresses for email images so that recipients can see the images regardless of where they open the email. This is not just a website best practise, it’s also among the top HTML email coding best practices.
By using an absolute address, the email client will know to look for the image on the server where it is hosted, and will not have to search through the recipient’s computer for the image. This can help to speed up the email loading time, and will also ensure that recipients see the images in your email.
Background Image Handling in Email
It’s important to be aware that different email applications (readers) can interpret your email code in different ways.
For example, some applications do not necessarily display background images that are CSS driven (older versions of Outlook are a good example). On way to address an issue like this is to vector markup language (VML). Arguably this is also good practise, to help ensure email (content) consistency across more platforms.
What is VML?
Vector markup language (VML) is a vector graphics format used in email marketing. It allows you to create and insert complex vector graphics into your html email code. This can be helpful for creating images that look good on high dpi displays, as they will be rendered at the correct resolution.
To learn more about using VML related code in your email marketing HTML, the following post serves as a good starting point: Background properties in VML.
Use Retina Based Images
Email images that look blurry or fuzzy on high DPI (dots per inch) displays can be a major turn-off for recipients. In order to avoid this, you should make sure that your email images are retina-ready. Retina-ready images are those that have been optimized for high dpi displays, and as a result, look sharp and clear on these types of devices.
Remember, your email needs to look professional, so definitely add this to your HTML email coding best practices!
There are a few different ways that you can make your email images retina-ready. One way is to create two versions of each image, one for regular displays and one for high DPI displays. Another way is to use media queries to target different styles for different devices (as suggested above).
Email Layout Guidelines
Having email design guidelines are important because they help to create a consistent and professional email experience for recipients, which really, is what HTML email coding best practices are about.
By following the same design guidelines, you can ensure that your emails look good on all devices, regardless of the screen size or resolution. This can help to improve your brand image, and can also lead to increased conversions and engagement rates. Guidelines also help to avoid trying to add elements that are not feasible.
Design With “Mobile First” as a Priority
This (in my opinion) should be #1 on your list for HTML email coding best practices. There are a few reasons why you should design your email messages specifically for mobile devices. First, almost half of all email is now opened on a mobile device. This means, if your email messages are not designed for mobile, you are missing out on a large portion of potential readers.
Second, mobile devices have different screen sizes and resolutions than desktop computers. This means that you need to take into consideration the different ways that your email will be viewed on mobile devices. Finally, design for mobile first because it is typically easier to scale up (for larger screen sizes) than it is to scale down (for smaller screen sizes).
Stick With a Single Column Layout
There are a few reasons why you should use a single-column layout for your email messages. First, single-column layouts are easier to read and scan than multi-column layouts. This is because the eye can more easily move down the page in a single column, as opposed to hopping back and forth between columns.
Second, single-column layouts are more mobile-friendly. This is because they can be easily scaled down to fit smaller screen sizes, without losing any of the important content. Finally, single-column layouts tend to look more professional and polished than multi-column layouts.
Use 600px as Your Default Design Width
600px is a good width to use as the default for email campaign messages because it is large enough to be seen and read on most devices, but it is not so large that it takes up too much space or becomes cumbersome to scroll through. Additionally, using 600px as the default width will help to ensure that your email messages look good on high DPI displays.
Always Use Font Stacks
When coding your email messages, it is important to use font stacks as part of your HTML email coding best practices. A font stack is a list of fonts that are used in order of preference. This way, if the first font in the stack is not available on the device, the second font will be used instead. By using font stacks, you can ensure that your email messages will be displayed correctly, even if the recipient’s device does not have the exact font that you are using.
Don’t Forget the Unsubscribe Feature
It is important to add an unsubscribe link to your email messages because it gives recipients the option to stop receiving your emails, if they so choose (this results in a more effective, targeted email list). Additionally, having an unsubscribe link can help to avoid having your emails marked as spam.
Design Your Email for “Dark Mode” Use
With the release of iOS 13 and beyond, more and more people are using dark mode on their devices. This means that you should design your email messages with dark mode in mind. When designing for dark mode, you should use light-colored text on a dark background. Additionally, you should avoid using images with light backgrounds, as they will not be very visible in dark mode.
HTML Email Accessibility Considerations
HTML email accessibility means that people with different needs can use your email. This is an area which should be included in your HTML email coding best practices, as it adds benefit to your subscribers. For example, people with visual aid needs can use a screen reader to hear the text in your email, or they might use a different way to see the email. The following are some of the common things you should implement for your email coding.
Employ Semantic HTML Elements
Semantic HTML is code that is written in a way that is easy for both humans and machines to understand. By using semantic HTML, you are making your code more readable and easier to maintain. Additionally, using semantic HTML can help to improve the chances that your email messages will be displayed correctly on different devices.
Ensure Effective Nesting
Nesting is the process of putting one HTML element inside of another. By correctly nesting your elements, you are making sure that your code is well-structured and easy to read. Additionally, using proper nesting can help to ensure that your email messages are displayed correctly on different devices.
Add Appropriate ALT text to Each of the Images
Adding alt text to your images is important for two reasons. First, it allows people who cannot see the image to understand what it is about. Second, it helps to improve the chances that your email messages will be displayed correctly on different devices. Again, ALT text use is simple, and is a must for HTML email coding best practices!
Be Sure to Take Advantage of Headings and Lists
Using headings and lists can help to improve the readability of your email messages. Additionally, using headings and lists can help to ensure that your email messages are displayed correctly on different devices.
Avoid Sending Image Only Email
There are a few reasons why you should avoid sending image-only emails. First, many email clients do not display images by default (usually a result of default privacy settings), which means that the recipient will not be able to see the images in your email.
Second, if the recipient’s email client does not support images, then the entire email will be displayed as text, which can be difficult to read (if there is none). Finally, image-only emails can often be flagged as spam by email providers.
Use Icons in the Email
Icons can help to improve the readability of your email messages by providing a visual cue for the reader. Additionally, icons may help to improve the chances that your email messages will be displayed correctly on different devices.
Stay Away Form Using Image Maps
Image maps are not recommended for use in email messages because they can be difficult to read and understand – This is a definite “must” for your HTML email coding best practices. Additionally, image maps can often be flagged as spam by email providers.
Equally of issue… Image maps won’t easily line up across different devices (making your email message look unprofessional. Further, they don’t work well for accessibility issues.
Leverage the Benefits of ARIA Markup
ARIA (accessible rich internet applications) markup is a specification for providing accessibility information to web browsers and assistive technologies. By using ARIA markup, you can ensure that your email messages are accessible to people with different needs. Additionally, using ARIA markup can help to improve the chances that your email messages will be displayed correctly on different devices.
This can be of particular benefit to email readers. For example, instead of the reader providing the HTML code for your table (which would be confusing to many of us), instead add (along with table width, padding, etc.) the directive:
role="presentation"to your table’s code. This way the table(s) will make more sense to readers, and avoid the nonsensical code (which does not mean anything to regular human readers).
Deploy High Color Contrast
WCAG (web content accessibility guidelines) are a set of guidelines for making web content accessible to people with different needs. By using WCAG standards, you can ensure that your email messages are accessible to people with different needs. Additionally, using WCAG standards can help to improve the chances that your email messages will be displayed correctly on different devices.
One of the benefits of using high color contrast is that it can help to improve the readability of your email messages. Additionally, using high color contrast can help to ensure that your email messages are displayed correctly on different devices.
Some examples of using high color contrast in email messages include using dark text on a light background, or vice versa; using different colors for different types of text (e.g., headings, paragraphs, etc.); and using an accent color to draw attention to certain elements in your email message. Further, is the difference between the color of your text and of the text link colors.
Best Email CSS Practices
Email is one of the most commonly used forms of communication, and email design plays a big role in how effective your messages are. In order to create an effective and visually appealing email, you need to use CSS best practices for email. By using CSS best practices for email, you can ensure that your email messages are correctly displayed on different devices and email clients. Additionally, using CSS best practices for email can help to improve the chances that your email messages will be opened and read by your recipients.
Some of the CSS best practices for email include using a reset style sheet, using html and body tags, using inline styles, and using responsive design. Below are four important areas to ensure are properly addressed for your HTML email coding best practices.
Stay Away From Using Shorthand CSS
Shorthand CSS is often used in web development because it is easier to write and can save time. However, shorthand CSS is not recommended for email messages because it can be difficult to read and understand. Additionally, shorthand CSS can often be flagged as spam by email providers.
Therefore, it is best to avoid shorthand CSS when coding your HTML email messages.
Make Sure to Use the Viewport Meta Tag
The viewport meta tag is used to control the width and scale of the viewport. The viewport meta tag is important for email because it helps to ensure that your email message is correctly displayed on different devices. Without the viewport meta tag, your email message may be scaled incorrectly or may not be visible on some devices.
Therefore, it is important to include the viewport meta tag in your HTML email messages. This would be a simple, but powerful step to improving current HTML email coding best practices.
CSS Animations Won’t be Effective
CSS animations are often used in web development to add movement and interactivity to web pages. However, CSS animations are not supported by all email clients and can often be disabled by the user. Additionally, CSS animations can often be flagged as spam by email providers.
Keep Your Styling Inline
Inline styles are the recommended way to style email messages, as they are supported by all email clients and can not be disabled by the user. Additionally, inline styles are less likely to be flagged as spam by email providers than other methods of styling email messages.
For these reasons, in-lining your styling should be near the top of your HTML email coding best practices.
It’s Better to Use Cellpadding for Spacing
One of the benefits of using cellpadding for spacing in email messages is that it can help to ensure that your email messages are correctly displayed on different devices. Additionally, using cellpadding for spacing can help to improve the readability of your email messages. Additionally, it is important to use image spacing in order to avoid images from being distorted or from overlapping with other elements in your email message.
Media Queries are Your Friends – Use Them!
Media queries are used in email coding to target specific devices or email clients. Media queries allow you to specify different styles for different devices, which can help to ensure that your email messages are correctly displayed on all devices. Additionally, media queries can be used to create responsive email designs, which will adapt to the size of the device that is being used to view the message.
Examples of media queries are above under the heading “Create your email code for use by high DPI displays”.
Testing Your HTML Email Coding Best Practices
Using these HTML email coding best practices, and others you find, is a great start. But it does not stop there. It is crucial to test your email across as many different email clients (applications) as possible.
A couple online testing platforms you might try are:
Whenever possible, it’s always a good idea to use beta testers, across multiple devices and applications, and follow up on any issues found. Just be aware, you’ll never have a “perfect” email, that’s the same across all platforms. When testing, you’re more looking for issues as opposed to strictest conformity.
Conclusion
Email coding is a complex process, but by following these HTML email coding best practices, you can help ensure that your email messages are correctly displayed and are less likely to be flagged as spam, or display with glaring issues. In addition, following these best practices can help to improve the chances that your email messages will be opened and read by your recipients.
You can learn much more about HTML email coding best practices, by visiting our Small Business Email Marketing posts. As well as find out more about email coding.