In this section, we assume that you have a technical and working knowledge of HTML and CSS.
When creating work using HTML, it is important to bear in mind that HTML for email differs somewhat from the HTML used for creating websites. This is because email HTML features certain technical requirements and one of the main problems that often arises with email HTML is the absence of universal rules on how email clients interpret code. At MDirector, we can give you some guidelines to help avoid errors and achieve the correct viewing of code, bearing in mind that the level of compatibility with HTML and CSS varies a lot between email servers and clients.
Standard size
Although there is no stipulated standard width, at MDirector we use a max width of 600px. The average width of templates is between 550px and 650px. Although this width has been used in email marketing for a long period of time and sizes of screens and devices have changed dramatically, 600px remains the ideal size since it is the one that best adapts to the vast majority of email servers.
<!DOCTYPE>
Firstly, all HTML documents must begin with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is a Type of "information" for the browser about what type of document to expect.
If you do not add this reference to the document type, there is no guarantee that the email server or browser will interpret it correctly. This means that while the content may be sent and received, it might not appear as you intended it to, especially in various older rendering engine email clients, such as some versions of Outlook.
The <!DOCTYPE>lines that we use at MDirector are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
Secondly, <meta> tags must be added as part of the <head> element. These tags provide the HTML document’s information and they are normally used to specify the character set, the description of the page, the keywords, the author of the document and viewport settings.
The document type and the metadata will not be displayed in the email template layout. However, they are parsable by mail servers/clients, search engines and other web services.
Metas
The metadata that we use in MDirector is as follows:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width" />
UTF-8 encoding
The character encoding format to be used in the HTML that is added to MDirector must be UTF-8.
Structure and organisation
While there are many types of HTML coding and structures, HTML templates for emails are characterised by their simplest structure, which is denoted by tables:
<table>
<tbody>
<tr>
<td> ...
With their respective W3C specifications, any other structure that does not feature elements and attributes of this type (tables to structure the design of the template: to centre elements, style the text, set padding and margins, set backgrounds, divide the content into columns, etc. ) is not guaranteed to be displayed correctly when received by different email clients.
Inline CSS
Style sheets (CSS) are used to format the design of a web page or email template. However, when adding CSS to email HTML, it is essential to bear in mind that most email providers do not support separate CSS files, meaning the CSS must be added inline through the introduction of <style> tags, and if possible within each element.
Responsiveness
The process of making an HTML email responsive is a bit different from making a web page responsive.
This is because the level of support for HTML and CSS standards varies greatly between email servers and/or applications, as well as device type. One of the big differences is that while we can add media query flex box and grid to a website, these elements are not always compatible with HTML email. In the same way, JavaScript commonly used in website design can never be used for HTML design in emails, because it causes a security risk and as such any email template that contains jvs will always be discarded by mail servers.
Buttons
In HTML email, the buttons are not always displayed the same in all email clients, either because of the type of rendering or because of the type of button used. For this reason, sites like Litmus have created specific guides to create " bulletproof” buttons that can be correctly interpreted by most email providers:
- Do not use images as buttons
- Use Outlook-specific <!--[if mso]> conditionals
- Add in-line CSS
For more information on how to create functional buttons:
https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design/
Fonts and Backgrounds
When it comes to fonts, most email clients do not have font support like web pages. For this reason, we recommend using web safe fonts, as these types of fonts are pre-installed in the local font directory of most operating systems, including email and website clients. Some of these fonts are: Arial, Helvetica, Verdana, Georgia and Times New Roman.
Although you can add Website Fonts such as Google Fonts, these fonts only work for certain email clients:
Source: Litmus
https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/
Videos
We do not recommend embedding videos in HTML codes for email, as with web fonts, more email providers do not support embedded videos and those that do are limited.
Source: Litmus
As an alternative, we recommend using animated GIFs or images that reference the content of your video, with a direct link to the video itself:
We know that data collection forms are a very important strategy in email marketing, and although web pages are designed using the same basic elements such as text fields and inputs, many of these forms require the use of JavaScript. As we mentioned before, jvs cannot be used in email HTML because most email clients will block this content due to security risks.
A safer option is to use MDirector's Landing Optimiser to generate fully functional web forms. You can add a form link to a CTA within your newsletter.
NOTE
We are constantly working to make our platform easier to use and ensure you get the most out of it. If you have already checked our help and the video resources and still need more help, please contact our support team. We will be delighted to assist you. support@mdirector.com
Comments