Practical hints: HTML mails

When sending HTML mails, there are certain points which you will have to adhere to. Here are some important hints for your web designer, which should assist with correctly displaying your HTML mails in most of the mail clients.

Contrary to HTML texts which are opened in the browser, the text in HTML mails also needs to be compatible with the recipient's respective mail client. This is a fundamental problem with HTML mails, since different kinds of mail clients display the same contents differently. Unfortunately, this means that it is not decisive what you can technically do with protel Messenger, but instead what each mail client is able to display.

You can get good results with HTML emails in the usual mail clients if you consider some basic elements.

Note

The following sections contain tips to circumvent problems with mail clients. protel hotelsoftware, however, cannot guarantee how the various mail clients deal with HTML mails. protel Messenger has absolutely no influence on which HTML elements are either displayed or blocked by mail clients such as Outlook, Google Mail, GMX, etc.

Formatting: The easier, the better

In principle, it is highly recommended to keep the formatting as simple as possible. This also means renouncing a modern web design. Resort to old layout methods instead.

Avoid using margins, paddings, and CSS positioning via floats. Use nested layout tables to display spaces or text fields of a certain size.
Avoid using white space in table cells.
Enter the styles for the texts separately into each cell.
Enter all of the styles inline instead of using a styles area in the <head>. Many mail clients cut the <head> area and the <body> tag; the CSS properties saved in the <head> and/or background images allocated to the <body> will be dropped as a result.
Use hexadecimal values instead of RGB values for color details; e.g., #000000 instead of 0,0,0
If you use formats such as H1, H2, H3, etc., you will have to determine the CSS properties for each class, so that none of the mail client’s default styles will be used.
Avoid abbreviations for 'font' and enter the font-size, font-weight, and font-family one by one.
Only use fonts which are available to all operating systems. If in doubt, enter an alternative replacement font, should the first one mentioned not be available.
Instead of relative sizes, enter fixed pixel sizes. Please note, however, that the mail does not have a total width of more than 550-600 pixels.

Images

Displaying images remains difficult. Some email clients such as Outlook will block all of the images in emails by default. However, here are some tips to help you achieve best possible results.

Pay special attention to the alternative texts which you provide with your images. If the alt-text is appealing and makes the recipient eager to find out more about the image, it makes it all the more likely that he will want to download the email’s image content.
Save the images to a webserver which is fast and freely accessible and always link them by means of absolute paths. Should the downloading of images take too long, the chances of the user prematurely exiting the email increase.
Avoid using the png-format; try to only use jpg-images.
By no means should you use spacer gifs! Otherwise the email might be falsely identified as spam.

Tests

The described hints are an important basis. To be sure that the HTML mails are displayed properly, it is still important to test them in various mail clients. For example, also test to see how the mail looks with blocked images. Because that is the view that most of the recipients first receive.

There are many online tools which enable you to test your emails for compatibility and spam-suspicion.

Cross Reference

You can find more details about the different mail clients and additional information at email-standards.org.