Always opening links in another windows/tab

When the user clicks in the links of your email, it's interesting to open the link in a new window. In this way, when the user closes the window, they will still be in your email.

How do you do it?

Add the attribute target="_blank" on your tag <a href="#"/>

Defining another color for a link

The default color for a link is blue web. But you can of course change this colour.

How to do it?

Add the attribute style="" on your <a href="#" /> tag with the 'color' property Add <span> on both sides of the text link (some email clients overwrite the usual color properties of a link but it is not the case with <span>).

Setting 'title' on the link

View an explication when hovering the link with the mouse cursor.

How to do it?

Add the title attribute on your beacon with explanatory text. This will also be used to pre-populate the tracking information to the Actito level.

Defining the image width

To ensure a proper display of the email, as well as to prevent that the replacement text of some mail clients distorts the layout, you have to define a width for your images.

How to do it?

Add the attribute 'width' of the <img/> tag

Adding an "alt" attribute to an image

An alternate is a text that will be displayed in the email if the user doesn’t accept the images. It is important for various reasons. First, it allows easy reading for the visually impaired users and enables the reader to have an idea of what the image is even without seeing the image, especially on mobiles were images are generally blocked. Second, it will increase the text/image ratio, which will reduce the spam points.

How to do it?

Add the alt attribute on tag <img src=""/>

Putting images 'display block'

A display: block; is used to avoid the generation of white spaces below an image.

How to do it?

Add the 'style' attribute with the property 'display: block' on the <img/>

Putting the title attribute on images

To make the reading easier for those visually impaired, it is most advisable to alternate text on images. This text also helps increase the text / image ratio, which reduces the points of spam.

How to do it?

Add the title attribute on <img/>.

Tag attributes must be in quotation marks""

The idea here is to standardize the code.

Use xhtml 1.0 doctype

To standardise the rendering of e-mails in most mail clients, we strongly recommend to place a doctype on the top of your e-mail.

How to do it?

Put the doctype before the opening of the html tag.

Use 'table' rather than 'div'

The table helps ensure a good visual record of e-mails. Some mail clients have difficulty supporting the float, margin, padding...

How to do it?

Use <table> ... </ table>

Indent Code correctly

For easy reading of the code, we suggest to always indent your html code.

How to do it?

Make a positive withdrawal for each child and a hanging indent for each parent. Thus, the closing and opening tags torque will always be of the same height.

Define the size of 'td' and 'table'

To ensure a good visual rendering on most mail clients, always fix the td and table size.

How to do it?

Including the attribute 'width' in the tag with a value without specifying the format.

Use a table of 100% for a background color on your e-mail

Many mail clients ignore the background colors defined in the css or the 'body'. To work around this problem, you can create a table with a 100% bgcolorattribute above.

How to do it?

Create a table 100% around your e-mail and place the bgcolor property above.

Create a space between two horizontal zones

To ensure uniformity in the different mail clients, the spaces between two areas must be created through a table.

How to do it?

To create a space between two areas, create a blank line in a 'table' with attributes 'line-height' and 'height' defined. Both attributes are important because some email clients include only one or the other. Using <br /> to create large spaces between the lines is not recommended, because the height of a <br /> may differ from one email client to another.

Format text in 'td'

To dress the text located in a <td>, add a style attribute on the tag. It is absolutely necessary to repeat all the properties of text wrap because some mail clients include only one or the other.

How to do it?

Add to all the <td> containing text the following css properties:

• Font-size

• Font-family

• Color

Using a color code

It is possible to change the color of your text in your html.

How to do it?

Add the property color: xxxxx; in the style attribute.

Convert special characters to HTML entity

To ensure that special and accented characters are properly displayed, you have to convert html entity.

How to do it?

The é becomes &eacute; See the following link: w3schools.

Using specific fonts

To ensure a proper font display and rendering, use only web fonts. It cannot be guaranteed that other web fonts will be correctly displayed.

How to do it?

Here is a complete list of available web fonts:

• Verdana

• Arial

• Courrier

See the following link for a complete list w3schools.

Use reset.css in the head of the e-mail

To solve some display problems on some mail clients and allow a better display on mobile clients, the following css elements should be inserted.

How to do it?

Add this code in a style tag in head.

Defining of the e-mail width

Ideally, the email width should be between 550 and 730px so that it's correctly displayed in most mail clients and browsers.

Test your e-mail

The best way to validate that your email works properly is to test it in several tools such as litmus.com or e-mail on acid.

How to do it?

Both tools have a limited free version and the basic monthly subscription is not very expensive.