Email coding powers you email, one of the oldest and most widely used forms of online communication. In fact, according to email marketing provider MailChimp, email is still more popular than social media networks like Facebook and Twitter. So it’s no surprise that email remains an important part of any digital marketing strategy. But what about HTML email coding? If you’re not familiar with it, don’t worry – I’m going to show you everything you need to know in this guide!
Email Coding in HTML
HTML email coding is used to create email templates that are both effective and look great. But before you get into the nitty-gritty, there are a few things you need to know about email design. Namely, you need to identify your audience’s viewing habits and understand how different email clients render HTML code. Once you have a handle on that, you can start building your email template.
Pinpoint the Viewing Practices of Your Subscribers
When coding email templates, it’s important to understand how your audience views email content. By identifying your subscribers’ viewing habits, you can tailor your HTML email templates to ensure that they look good and function properly on all devices and email clients. This is especially important for businesses that want to create a responsive email design.
Understanding Email Client and Rendering Capabilities
Not all email clients are created equal. In fact, some email clients – like Gmail and Yahoo! Mail – have very different rendering capabilities. This means that your HTML email template may look great in one email client but not so great in another. That’s why it’s important to understand how different email clients render HTML code before you start coding your email template.
Email clients have different levels of CSS support, which can impact the way your email template looks.
Some email clients – like Microsoft Outlook – don’t support certain HTML and CSS code. This can make it difficult to create an email template that looks good and functions properly in all email clients.
Finally, some email clients – like Apple Mail – have limited support for email coding in JavaScript. This can impact the way your email template looks and how it functions.
Keep these things in mind as you start coding your email template.
Creating a Table-Based Layout
One of the best ways to create an email template is to use a table-based layout. Tables are a great way to control the spacing and layout of your email template. Plus, they’re easy to code and can be nested for more complex designs.
When coding your email template, you’ll want to set widths in each cell rather than on the table. This will help ensure that your email template looks good on all email clients. You’ll also want to nest tables for consistent spacing. You’ll also want to set a background color on a container table.
Nest Tables for Better Spacing
Nested tables provide consistent spacing because email clients render tables in different ways. By nesting tables, you can control the way each table is rendered, which will help to ensure consistent spacing between tables. When combined with media queries (more on that later) your table spacing (and other elements) can be better displayed across different platforms.
Define Display Widths in Cells
There are several reasons why you should set widths in each cell rather than on the table. First, it’s important to understand how email clients render HTML code. Email clients render tables in different ways, which can lead to inconsistent spacing between tables. By setting widths in each cell, you can control the way each table is rendered and ensure consistent spacing between tables.
Second, setting widths in each cell helps you to create a responsive email design. Responsive email design is important because it ensures that your email template looks good on all devices and email clients. By setting widths in each cell, you can control the way your email template looks on different screen sizes.
On this same thought, setting widths in each cell gives you more control over the overall design of your email template. By setting the widths in each cell, you can create a more complex email template with multiple columns and rows.
Define Your Background Colors in the Container Table
When coding your email template, you’ll want to set a background color on a container table. This will help ensure that your email template looks good on all email clients. By setting a background color on a container table, you can control the way each table is rendered and ensure consistent visible spacing between tables.
The Importance of Whitespace
In email, whitespace is important because it helps to control the layout and spacing of your email template when coding it. By using whitespace effectively, you can create a more polished and professional email template. Additionally, whitespace can help to improve the readability of your email template.
When coding your email template, you’ll want to use inline CSS. Inline CSS is important because it helps to ensure that your email template looks good on all email clients. Because email clients render tables in different ways, no whitespace (or not enough) could lead to inconsistent spacing between tables. By using inline CSS, you can control the way each table is rendered and ensure the consistent spacing between tables.
Additionally, you’ll want to avoid relying on images for your HTML template. Images can help to improve the look of your email template, but they can also cause problems with email clients that block images by default. By using inline CSS, you can ensure that your email template looks good on all email clients, even if images are blocked (as your email coding, for example, could make allowances for missing images).
Using Inline CSS
Inline CSS for email coding is an easier way to control the look and feel of your email template. Plus, it’s usually easier to code and can be used to create email templates that are responsive.
Using inline CSS, helps you avoid relying on the use of images for your HTML template. This will also help ensure your email template looks good on all email clients. CSS therefore, also helps when some email clients won’t load images.
CSS Support in Email Clients
Email clients are constantly changing and evolving. As a result, it’s important to keep up with the latest email client changes. One way to do this is to use email coding best practices.
Another way to stay up-to-date with email client changes is to use a CSS support guide. A CSS support guide can help you understand how email clients render CSS code. Additionally, a CSS support guide can help you find email clients that support specific CSS properties.
Avoid Relying on an Image Dependent Template
There are a few reasons why you should avoid relying on images for your HTML template. First, email clients that block images by default can cause problems with your email coded template. By using inline CSS, you can ensure that your email template looks good on all email clients, even when images are blocked.
Default Image Blocking Email Applications
Several email applications (also called “clients”) will block the loading and display of email images. In most cases this is often to conserve privacy.
Caveat: Keep in mind, while many email clients show images by default, many people either use plugins to block images, or turn off the default image display. When creating email coding for your images, hope for the best, and plan for the worst.
When email images are blocked, there are a few ways to get them to display. The first is to try and email the recipient from a “trusted sender.” This is usually an email address or domain that the email client knows is safe and will allow images to display.
When you’re not sure if the email client supports displaying images, you can also include a “web version” link that takes the email recipient to a webpage where all the email images will display.
There are also a few email clients that have an “always show images” feature. This is usually turned off by default, but can be turned on in the email client’s settings.
Ensuring Images Display
There are a couple different ways to try and help ensure images display in email. The first is to host the images on a server that uses SSL (Secure Sockets Layer). This will help to ensure that email images are not blocked by email clients. Additionally, you can use an image hosting service, like Imgur or Cloudinary, to help ensure that email images are not blocked.
Another way to ensure email images display is to use an email proxy service, like Imgix. These services will help to ensure that email images are not blocked by email clients.
CSS Font Support in Email
Font support in email can be a bit tricky to get right. However, by using the right techniques, you can ensure that your email fonts look great on all email clients.
One way to ensure email font support is to use the @font-face rule in your CSS code. This rule allows you to embed fonts in your email. Additionally, you can use the Google Fonts service to embed fonts in your email.
Another way to ensure email font support is to use web-safe fonts. Web-safe fonts are fonts that are pre-installed on most computers. This means that you don’t have to worry about email clients not being able to render your email fonts.
JavaScript in Email Coding
One of the most popular email coding languages is JavaScript. JavaScript is a versatile language that can be used to create complex email templates. Additionally, JavaScript can be used to create responsive email templates.
There are a few things to keep in mind when using JavaScript in email. While you might want to avoid it where possible (more on that below). First, you should always test your email template on multiple email clients. This will help to ensure that your email template looks good on all email clients. Additionally, you should use a polyfill service, like Google’s PageSpeed Insights, to ensure that your email template looks good on all email clients.
Video in Email Coding
One popular email coding feature is video. Video allows you to embed videos in your email template. Additionally, video can be used to create responsive email templates.
There are a few things to keep in mind when using video in email coding. First, you should always test your email template on multiple email clients. This will help to ensure that your email template looks good on all email clients. Additionally, you should use a video hosting service, like YouTube or Vimeo, to host your video.
Forms in Email Coding
One of the more popular email coding features is forms. Forms allow you to embed forms in your email template. Additionally, forms can be used in responsive email templates.
One caveat: This can effect the deliverability of your email, as often embedded forms can pose a privacy risk to the recipient. It can lead to some users blocking your email, and possibly be blocked by aggressive spam filters.
There are a few things to keep in mind when using forms in email. First, you should always test your email template on multiple email clients. This will help to ensure your email template looks good on all email clients. Additionally, it’s better to use a form hosting service, like Wufoo or Gravity Forms, to host your form.
Best Practices for Email Coding
There are a few reasons why you should use best practices when email coding. First, using best practices will help to ensure that your email template looks good on all email clients. Additionally, using best practices can help to improve email deliverability, as well as email readability.
Best practices provide some salient benefits:
- Ensuring images display correctly in email clients
- Ensuring your email fonts look great on all email clients
- Ensuring your email template is responsive on all email clients
- Avoiding rendering issues with email clients
- Enhancing the overall impact of your email template
Below are some of the general guidelines that email coding should follow.
Take a Mobile-First Design Approach
Designing email templates with a mobile-first approach is important because more and more people are opening email on their mobile devices. In fact, according to Litmus, in their report: Email Client Market Share in May 2022, 51.7% of all email is now opened on a mobile device (6.8% on Desktop, 35.2% in Webmail) an increase from 49.7% in 2021.
When you design your email template with a mobile-first approach, you are essentially designing your email template for the smallest screen first and then working your way up to the larger screens.
This approach is important because it helps to ensure that your email template looks good on all devices, no matter what the screen size.
Code Using Single Column Layouts When Possible
Designing email templates with a single column layout is important because (again) it helps to ensure that your email template looks good on all email clients, no matter what the screen size. Additionally, coding email templates with a single column layout is easier and takes less time than coding email templates with multiple columns, this might save you money – As well as reducing the size of the email (why coding email size is important, is discussed below).
Set the Best Default Width
When email coding, it is a good idea to set the width of your email at 600px. This will help to ensure that your email looks good across most all email clients. Additionally, this will help to keep the size of your email down, which can be important if you are trying to keep the size of your email under a certain limit (more on that below).
Unsubscribe Feature
The best practice for email coding is to include an unsubscribe link in your email. This helps to ensure that your email will be delivered and read, it provides a way for recipients to opt-out of receiving future emails from you.
Including an unsubscribe link also helps to comply with the CAN-SPAM Act, which is a law that sets forth the requirements for commercial email.
When including an unsubscribe link in your email, you should place it in a prominent location, like the top or bottom of your email. Additionally, you should make sure that the unsubscribe link is clear and easy to find.
Leverage Font Stacks
A font stack is a list of fonts that are used in sequence. This allows email coding to use multiple fonts, which can help to create a more visually appealing email template. Additionally, using a font stack can help to ensure that your email template looks good on all email clients.
When email coding, you should use a font stack that includes at least two fonts. This will help to ensure that your email template looks good on all email clients. Additionally, you should make sure that the font stack you use includes a sans-serif and a serif font.
Sans-serif fonts are fonts that do not have the small lines at the end of each letter. Serif fonts are fonts that do have the small lines at the end of each letter.
Some examples of sans-serif fonts include: Arial, Helvetica, and Verdana. Some examples of serif fonts include: Times New Roman, Georgia, and Courier.
Include Alt Text
When email coding, it is a good idea to include alt text for all images. This helps to ensure that your email template will be rendered correctly on all email clients, no matter what the screen size. Additionally, including alt text for images can help to improve the readability of your email, because most email applications will display the Alt text in place of the blocked image.
Alt text is a short description of an image that is displayed in place of the image. When email coding, you should include alt text for all images, regardless of the screen size.
Email Coding for Accessibility
When email coding, it is important to ensure that your email is accessible to all recipients. This means that your email should be coded in a way that makes it easy for everyone to read and understand.
There are a number of things you can do when email coding to make your email more accessible. Some of the most important include:
Avoiding Image Only Email
Email coding that relies only on images can be difficult for people with specific needs to access and understand. Email coding that relies only on images is more difficult for people who are blind or have low vision, to understand.
To avoid image only email, you should include text in your email template. This will help to ensure that your email is accessible to all recipients, regardless of their email client or disability.
Including Alt Text
As mentioned above, including alt text for images can help to improve the accessibility of your email. This is because most email clients will display the alt text in place of the blocked image.
When email coding, you should include alt text for all images. This will help to ensure that your email is accessible to all recipients, regardless of their email client or disability.
Making Links Accessible
When email coding, it is important to make sure that links are accessible to all recipients. This means that you should use clear and descriptive link text. Additionally, you should make sure that links are easy to find.
Some things you can do when email coding to make links more accessible include:
- Using clear and descriptive link text
- Making sure that links are easy to find
- Adding a title attribute to links
The title attribute is a short description of the link that is displayed when the mouse hovers over the link. When email coding, you should add a title attribute to all links. This will help to ensure that your email is accessible to all recipients, regardless of their email client or specific needs.
Use ARIA Markup
ARIA markup is a type of HTML markup that is used to improve the accessibility of websites and email templates. When email coding, you should use ARIA markup to help ensure that your email template is accessible to all recipients.
ARIA markup provides a way for you to add additional information about your email template to help improve accessibility. This additional information can include things like:
- The role of an element
- The state of an element
- The properties of an element
Adding ARIA markup to your email template can help to improve the accessibility of your email. However, it is important to note that not all email clients support ARIA markup. As such, you should use it sparingly, or use it for a list that’s been segmented for people with accessibility needs.
Add High Contrast Color
When email coding, you should consider adding high contrast color to your email template. This will help to ensure your email is accessible to all recipients, including those with accessibility needs.
Adding high contrast color to your email template can provide a number of benefits, including:
- Making it easier for people with low vision to read your email
- Making it easier for people with color blindness to read your email
- Making it easier for people with other disabilities to read your email
There are a number of ways you can add high contrast color to your email template. Some of the most common include:
- Adding a background color to text
- Adding a border around text or images
- Adding a high contrast color to links
While adding high contrast color to your email template can help improve accessibility, it is important to note that not all email clients support high contrast color. As such, you should use it sparingly or only for recipients who have specifically requested it.
Including a Text Version
When email coding, you should always include a text version of your email. This will help to ensure that your email is accessible to all recipients, regardless of their email client or accessibility needs.
The text version of your email should be coded with all the same content as the HTML version. However, it should be formatted in a way that is easy to read and understand. Additionally, the text version should be made available to recipients who prefer to receive email in this format.
There are a number of ways you can provide a text version of your email. Some of the most common include:
- Including a plain text version in the email
- Making a plain text version available on a website
- Sending a plain text email to recipients who prefer this format
Avoid the Use of Image Maps
When developing your email coding, you should avoid the use of image maps. Image maps are a type of image that allows you to link to different parts of the image. This can be helpful for creating complex navigation menus or for linking to different sections of your email template.
But… Some email clients do not support image maps. As such, your email template may not be accessible to all recipients. Additionally, image maps can cause problems for people with specific needs, who use screen readers. Screen readers are a type of assistive technology that read aloud the contents of a website or email template. When an email contains an image map, the screen reader may have difficulty understanding the content.
Include Semantic HTML
Semantic HTML is a type of HTML that provides meaning to the elements on a web page. This can help to improve the accessibility of a web page for all users, including those with specific needs. Additionally, semantic HTML can help to improve the readability of a web page for all users.
There are a number of ways you can add semantic HTML to your email template. Some of the most common include:
- Adding alt text to images
- Adding title tags to links
- Using headings and lists
While semantic HTML can help improve the accessibility and readability of your email, it is important to note that not all email clients support semantic HTML. As such, you should use it sparingly or only for recipients who have specifically requested it.
Testing Your HTML Emails
Testing your complected email code is the only way to ensure that it will be displayed correctly in all email clients. By testing your email, you can identify and fix any errors that may occur when the email is viewed. This can help to ensure your email looks great no matter where it is opened. Additionally, testing your email can help to ensure that it is properly coded and accessible to all recipients.
Some of the most common ways to test your email include:
- Sending a test email to yourself
- Sending a test email to friends, family, or groups in your organization
- Checking your email in different email clients, and using different technologies
- Viewing your email in different browsers
- Using an email testing tool
Conclusion
While email coding can seem like a daunting task, it is important to remember that there are a number of resources available to help you. By following the best practices outlined in this guide, you can be sure that your email will be properly coded and accessible to all recipients. Additionally, by testing your email before you send it, you can be sure that it will look great no matter where it is opened – And results in a much more successful email campaign.
You can learn much more about email coding fundamentals, by visiting our Small Business Email Marketing posts. As well as find out more about email coding.