Currently, there are many email programs and clients available on the market. Keep in mind that the same newsletter may be displayed differently on different email platforms. Therefore, we have prepared some guidelines to help you properly prepare your HTML mailing. Following these guidelines will minimize the risk of differences in the display of the same newsletter.
Coding
The mailing code should be based on a table structure and comply with the HTML 4.01 specification. It should be error-free and comply with the W3C standard. Avoid placing JavaScript, Flash animations and positioning (position: absolute and position: relative).
If you are using Polish fonts or special characters, we recommend encoding in the UTF-8 standard (possibly ISO-8895-2, keeping in mind that this encoding has a smaller character library). Make sure that the encoding declaration is compatible with the encoding you are using.
Width of creation
The recommended width of the creative is 600px. Most email clients have this window width. All styles should be placed inline, not placed in the <head section >. To set the margins, you can add empty cells or use padding style in the cells (remember to take into account the width of the cell).
To get rid of unnecessary margins and spacing, add these three attributes to the table tag: border=”0″ cellpadding=”0″ cellspacing=”0″. For centering, use the align=”center” attribute. If you want to add a border, it is best to put it as a cell style, for example: style=”border: 1px solid #000000;”. You can set the background as a solid color using the bgColor=”#ffffff” attribute in the cell.
Graphics
Background graphics are not displayed in Outlook. We recommend placing graphics in .jpg, .png or .gif formats. To encourage users to download graphics, graphic file names should not contain spaces, dashes or special characters. The length of the graphic file name should not exceed 35 characters. It is also a good idea to include alternative text in the tags <img>. To remove spacing on Gmail and WP, add the attributes border=”0″ and style=”display: block;” to the tag.
Fonts
It is best to use standard fonts, such as Arial and Times New Roman. Define them inline by specifying the type, size and color of the font, for example: <font style=”font-family: Arial, sans-serif; font-size: 10px; color: #000000;”>text</font >.
.zip package
A proper .zip package for import into the system should contain an index.html file with the creative code, an index.txt file with the text version (in the same encoding as index.html), and graphics referenced in the code. Remember the following rules:
- The name of the .zip file should consist only of letters, numbers or the “_” character.
- The file containing the HTML version should be named index.html or index.htm (case sensitive).
- The index.html file should not be in any directory.
- If the newsletter also has a text version, the file containing this version should be named index.txt.
- All files attached to the HTML version of the newsletter (e.g., graphics) can be in another folder.
The weight of the finished .zip package should not exceed 100-150 kB.
Testing and shipping
Before sending, we recommend testing the display of the message in popular browsers (Chrome, Firefox, IE, Edge) and on popular email platforms (Gmail, WP, Interia, Onet, O2, Outlook, Thunderbird). At the top of the creative, it’s a good idea to include a web preview footer, which will allow a user whose message is displayed incorrectly to open it in a browser. You can use a link:
<a href=”%www_version%” >link</a >
Also remember to include a footer in both versions for unsubscribing from the newsletter. You can add one of these links:
<a href=”%remove_link%”>link</a> or <a href=”%remove_link2%”>link</a>, if you want to investigate the reason for the discharge.