Skip to main content

Creating HTML for email

Introduction​

If you want to write your message directly in HTML, it is helpful to know the specifications that allow for proper display of the message on most webmail services and email clients (Outlook, Thunderbird, etc.). These guidelines have been developed based on the experience of ContactLab staff over the years and the thousands of campaigns sent by our clients.

Goal​

Learn the technical specifications to keep in mind when creating HTML to send with ContactLab.

General Rule​

The HTML of an email must be "simpler and cleaner" than that of a web page: webmail services and email clients have trouble managing certain elements (stylesheets, JavaScript, Flash) that a browser can handle with ease. The specifications will outline which elements not to include in your message to avoid display issues for the end user.

Specifications​

Content Layout​

All message content must be placed within a fixed-width table (specify the width in the width attribute of the <table> tag). For each cell, you must also specify the width (e.g., <td width="121">).

The outermost table mentioned in point 1 should have a fixed width. The recommended width is 550 pixels: this ensures that a horizontal scroll bar will not appear on the major email clients and webmail services. If you require a layout with a larger width, the maximum width we recommend is 600 pixels. Many email clients and webmail services will display the message correctly, and where a horizontal scroll bar does appear, it will be minimal and should not inconvenience the end user.

There is no recommended length for technical reasons. Obviously, newsletter or commercial DEM messages should not be too long to be effective, and should link as much as possible to web pages by inserting links into the message.

<title> Tag in the <head>​

Insert text into the <title> tag. Avoid leaving the default text assigned by the HTML editor (e.g., "Untitled1" or "New Page 1"). It’s better to make it similar to the subject of the email.

Using Stylesheets​

Stylesheets (CSS) should be used "sparingly." Here’s how:

  • Do not use CSS to determine the position of an element (e.g., image or table alignment, padding, float, etc.).

  • Within the HTML of the newsletter, the CSS can be:

    • Internal (in the <head> tag). The internal CSS should be commented (i.e., all stylesheet elements, excluding the <style> tag, should be enclosed in comment symbols).
    • External (include a link to the external stylesheet in the <body> tag; the file will be hosted on the Contactsend server or your own server).
    • Inline (insert the CSS within cells, inside the <link> and <div> tags where the class is called).

    IMPORTANT: The 3 stylesheets must have the same characteristics.

Images​

Images should be uploaded to a server (either Contactsend's or your own server) and then inserted in the src attribute of the tag. The format must be jpg or gif (it can also be an animated gif). It is strongly discouraged to include mapped images. Each image should weigh as little as possible to stay within the recommended overall weight limit (60 KB).

Background Images​

If there are background images in your HTML, avoid writing text in white (or any color matching the background of the <body>) because users with image blocking enabled in their email clients will not see the message. Background images cannot be included in the stylesheet; you need to insert them inside the cell (e.g., <td background="bg_ombra_2.gif">). It is advisable to avoid using background images as they tend to create display issues and are not supported by Outlook 2007.

Balancing Text and Images​

It is advisable to avoid inserting only images in the HTML: this significantly increases the likelihood that the message will end up in SPAM. Therefore, it is recommended to use text instead of images. Very large images should be split into two or more parts and then assembled using a table.

Image Naming​

Assign a meaningful name to each image that reflects what it represents. Therefore, avoid names like: 001.gif, 002.gif, or photo1.jpg, photo2.jpg, etc. This practice reduces the risk of the message being considered SPAM. Avoid using spaces and accented letters in the image names. It is instead possible to use characters like underscores (e.g., photo_vacation.jpg).

Characters​

Pay attention to Word characters (e.g., quotes, ellipses, dashes, and apostrophes) which should be replaced with their respective keyboard symbols.

The weight of HTML + images should not exceed 60 KB.

Elements to Avoid​

  • Mapped Images: Do not insert images that contain a map. Instead, divide the image and then reassemble it in a table by linking the individual pieces.
  • Javascript: Do not insert javascript into the HTML of the message.
  • Flash: Do not insert flash files (.swf) into the HTML. If it is absolutely necessary to include moving elements, use animated gifs.
  • Linked Text: Do not use the URL of the link as text. For example, avoid links like: <a href="https://www.contactlab.com">www.contactlab.com</a>, because some common email programs, including Thunderbird, perform anti-phishing checks that may flag such links as suspicious. Replace it with text, such as: <a href="https://www.contactlab.com">Contactlab</a>.

We also recommend:

  • To include at the top of the page the phrase "if you are having trouble viewing this message click here" (with a link that directs to a static page hosted on the server or the code ${online_version_url}$ to allow all users to view the group correctly).
  • To include at the bottom of the page a reference to the Code regarding the treatment of personal data in terms of privacy.
  • To include at the bottom of the page a link that allows users to unsubscribe from the newsletter.

Unbreakable Limits​

The specifications above allow for correct display in the vast majority of webmail and email programs currently in use. Obviously, there are limits beyond our control (policies of individual providers or software manufacturers) that we cannot resolve. For example, it is currently known that Gmail and Hotmail have policies for blocking stylesheets: thus, the message may appear disassembled on these webmail services, even when adhering to our specifications. Display issues are often reported with the email program in the Lotus suite.

Testing Emails Before Sending​

Remember that the best way to check the correct display of an email and the functionality of its elements is to send a test before the actual shipment. Contactsend allows you to create a test filter for each database (see "Configure -> User DB") and to send a test shipment (see "Create -> Email Shipment"). It is always advisable to include different addresses in the test to check them with various email programs and webmail services.

Embedded Images​

Normally, an HTML email requires that the images contained in the message are uploaded to an external server and then loaded when the user reads the email. As an alternative to this standard procedure, it is possible to "embed" images in the message (the images become embedded): they will no longer be loaded from an external server but will be included directly within the email.

Advantages and Disadvantages​

The main reason for choosing embedded images in the email is to avoid the image-blocking features that most email clients and webmail services implement. This way, the message will be displayed correctly with all images in place by all users.

On the other hand, however, embedded images bring some disadvantages:

  • They significantly increase the risk of the message being considered spam.
  • They increase the weight of the email itself (the weight of the images adds to that of the HTML).

Note that the "tracking" image used to track email openings cannot be embedded because it is automatically inserted by the system.

Procedure​

The starting point is a "standard" HTML where the images are linked and located on an external server, like this: <img src="/images/images/it/guide/http://server.it/img/foto.jpg">.

At this point, you need to:

  • Manually modify the tags by inserting @( before the image URL and )@ immediately after the URL: <img src=http://server.it/img/foto.jpg> becomes <img src="@(http://server.it/img/foto.jpg)@">.
  • Once all tags in the text have been modified as indicated in step 2 above, save the modified HTML on your computer.
  • Go to Contactsend in the section Create > New Shipment > (group name) > Message Content.
  • In the message content screen, upload the file with the modified HTML using the button "Upload from: a file on my computer".

Now the modified HTML has been uploaded into ContactLab. Complete the creation of the shipment normally by proceeding with the next button. The images will be included within the <body> of the message.

Perform a test to verify that the embedded images are displayed correctly.

info

If you forget to modify any <img> tags with the syntax @(http://…)@, no error will be generated; those images will simply still be loaded from the server they are on when the email is opened, and thus may be blocked by any image-blocking devices of the client or webmail service.