Email creation specifications
Proper preparation of HTML mailing creations
Building an email creative is different from building a website. While web browsers strive toward uniform standards, most email or webmail programs interpret HTML and CSS inconsistently and selectively. While CSS continues to be refined and expanded, styles in email templates are severely limited. Therefore, it makes sense to keep your emailing code as simple as possible and avoid ignored tags.
As a rule, we will not be able to select campaign audiences to group opening addresses on specific programs or devices, so it is worth ensuring that the template also displays correctly on the most restrictive client among the popular ones.
In the Polish market of significant applications, Gmail appears to be the most impermeable. Webmail from WP, ONET, or O2 and INTERIA is more versatile in relation to frequently used CSS styles. Conversely, among desktop applications, Outlook from the Office suite is the most limited, while Apple Mail for Mac is the closest approximation to an ideal client. In the context of mobile devices, the situation appears to be quite favorable, with a considerable range of styles exhibiting satisfactory display outcomes on the default clients for Android, iOS, and Harmony.
HTML e-mail guidelines
The required email format is HTML.
The recommended width of the mailing is 600-700 pixels.
The HTML code itself should not weigh more than 100 kb. It is recommended that the message be as light as possible.
The required encoding is UTF8.
The email message is recommended to be built on tables, which allows you to maintain a certain width of a particular element.
Elements of the mailing should be sub-linked using the A HREF tag. The use of the AREA tag prevents the system from detecting the link, and further tracking the clickability of the link.
Do not include interactive elements like JavaScript, ActiveX, frames, and dynamic HMTL elements.
The background of the mailing should have a uniform color and be defined with the BG COLOR tag. Image backgrounds are not properly supported by mail programs.
It is recommended to use popular fonts,such as Arial, Verdana, Tahoma, Times New Roman, which display correctly on webmail and email programs.
Image files should have a JPG, PNG or GIF extension.
It is recommended to describe images using the ALT parameter. Thanks to this procedure, in the case of blocking images, the viewer will be shown the items described with text, which may induce further action - downloading images.
It is recommended to define border="0" attribute for images.
To center the creation, it is recommended to use the align="center" parameter.
The message should not contain positioning elements - the "position" declaration.
The MessageFlow system allows automatic integration with Google Analytics. Tracking codes of other programs like Gemius should be sewn into the links themselves.
Do not use the ROWSPAN attribute in the TD tag.
TITLE and META tags other than the font encoding declaration must not be compacted in the code. Also, the !DOCTYPE declaration should not be used.
CSS styles must be defined directly in the HTML code.
The style should be defined INLINE, via the STYLE attribute inside the tag. In addition, it is recommended to use inline style primarily in SPAN and A tags.
For defining margins, it is recommended to use the CELLMARGIN tag.
Do not include images in the STYLE section. Images can only be defined in IMG tags.
When preparing a message, it is worth turning your attention to the preheader, or the first sentence of the message. This is because this element has a major impact on openability. Ideally, the preheader should be an extension of the information contained in the title.
The prepared creative should be tested on as many email and webmail programs as possible, as well as on mobile devices. The MessageFlow system offers access to the EmailPreview service, which allows you to quickly preview messages on various programs, including mobile devices.
The prepared e-mailing should be packed into a ZIP folder. The HTML file should be named "index.html" and it must be in the same folder as the image folder.
Additional tips for preparing HTML email creations
Tables, instead of divs
It is recommended that the structure of the mailing be constructed using tables, which allows you to maintain a certain width of the elements. Templates built on divs do not work well, as a large number of mailing programs do not maintain the desired structure (among other problems with float). The use of nested tables is an effective method; however, it should be noted that certain email clients, such as Gmail and Outlook 2007, may have difficulty interpreting margin and padding within cells.
In regard to table widths, the most reliable method is to specify them for each cell individually, as opposed to doing so globally for the entire table. Furthermore, widths should be specified in pixels, as percentages are ignored, particularly in nested tables under Outlook. Horizontal merging of cells is permitted, but vertical merging is not.
Coding
It is best to assume that UTF8 is always used, regardless of the group of recipients of the mailing.
Width of creation
It is recommended not to exceed 600px. This width is based on statistical data regarding the average screen resolution and the amount of space typically occupied by side menus in webmail and desktop clients. This size is relatively scalable on mobile devices.
CSS inline
Gmail's webmail is the most limited in terms of how it embeds styles. While linking to external css resources (i.e. in head/body) does not work on almost any webmail, embedding styles as in head or body additionally does not work on Gmail.
So the only sure way to declare styles is the INLINE method, that is, putting 'styles' in individual html tags (e.g. Abc). In addition, some clients do not recognize css abbreviations for color hex values (#ffffff instead of #fff), or abbreviations for margin, padding (margin-top:25px; margin-right:50px; marginbottom:75px; margin-left100px; instead of margin: 25px 50px 75px 100px;)
Images
Note that most webmails and clients do not automatically download images by default. So the first thing the recipient will see is the text itself without images and information about the possibility of loading graphics. In order to make the mailing look neat before and after downloading images, you need to remember a few things. It is always worth declaring the dimensions of images and using graphics with target dimensions, dynamic scaling through attributes does not always work.
Using an image as a background image does not work under Outlook 2007, among others (there is, admittedly, a nifty way to do this), so if you already use a picture background, it is a good idea to also define a background color as an alternative. It is recommended to describe images with the ALT parameter. This way, at the stage of blocking images, the viewer will see the elements described with text, which may induce further action - downloading images. ALTs should be as short as possible, in the case of Outlook, the program displays before them a standard phrase about the possibility of downloading images. Extensions used: png, jpg, gif. In case of problems with surrounding images under Gmail and Outlook.com webmail, style="display:block;" and border="0" may be useful.
Preheader
When preparing a message, it is worth turning your attention to the preheader, the first sentence of the message. It is displayed especially on mobile devices, Gmail and Outlook. This element has an impact on openability. Ideally, the preheader should be an extension of the information contained in the title.
Weight less than 100KB
HTML code alone (without the weight of images) should not weigh more than 100 KB. It is recommended that the message be as light as possible. The weight of a single email is a key factor affecting the rate of mailing.
Links always <a>
Elements of the mailing should be sub-linked using the A HREF tag. The use of the AREA tag prevents the system from detecting the link, and further tracking the clickability of the link.
JavaScript not accepted
Do not include interactive elements like JavaScript, ActiveX, frames, and dynamic HMTL elements.
Standard fonts
It is recommended to use popular fonts, such as Arial, Verdana, Tahoma, Times New Roman, which display correctly on webmail and email programs.
Google Analytics and other systems
The MessageFlow system allows automatic integration with Google Analytics. Tracking codes of other programs like Gemius should be sewn into the links themselves.
Other tips:
The message should not contain positioning elements - "position" declaration - The use of
The prepared creative should be tested on as many email and webmail programs as possible, as well as on mobile devices. The MessageFlow system offers access to the EmailPreview service, which allows you to quickly preview messages on various programs, including mobile devices.
The prepared mailing can be packed into a ZIP folder and uploaded to the MessageFlow server during the steps of the email campaign wizard. The HTML file should be named "index.html".
Last updated