XRL Tech Corner

Font size: +

Email marketing templates

When working with email marketing templates, many doubts arise of various kinds, both at the marketing and business level as well as the technical side.

In this article we are going to see some peculiarities of the technical part to build the mail templates from scratch. There are many email clients, such as Gmail, Outlook, Apple Mail, etc ... Many of these clients accept HTML code, but they have some "filters" that eliminate much of the code and of course they do not accept Javascript.

With what we have to engineer solutions so that the mail looks like in a web browser, or rather, similar to a web browser. As you can see in the following sections, the art of building emails and newsletters is quite complicated, in the sense that you have to avoid the exceptions of each mail client in the design.

For this, there are programs to make newsletters that will greatly facilitate the management and design of the email marketing strategy.

Particularities of mail clients


For example, starting with Gmail, this mail client removes all the link , style tags, and overwrites the css styles with their own, the DOM also changes significantly.

Yahoo Mail

However Yahoo Mail supports CSS in style tags.

An important thing when inserting images, is that they must be referenced with an absolute path of a server that hosts them, so that they are accessible from anywhere. So to be able to apply styles we will have to use the style attribute within each label that we want to change.

For example if we start with an h1 we will have to specify the font, the color, the size, the margins, the filling, etc.

It is advisable to wrap all the content within a div with the image background and another to set the width of the content.


When using the Outlook mail client it is important to know that the positioning, margins, etc ... is limited, there are also versions that use the IE engine (the old ones), and other versions that use the Word engine. That's why we should use old-fashioned HTML tables. But what happens when the screen is smaller than the usual size of a computer?

For mobile screens we can use media queries . For example we can use a class in the tables that occupies the width with 100% but when the resolution is PC desktop we want to keep the 700px maximum.

As we discussed earlier, there are Outlook email clients based on the internet explorer render and others based on the word render, which is why conditional statements are usually used to adjust the properties of the CSS.

This is if the version is greater than or equal to office 10 then apply the styles that are defined below. To create buttons in emails, we can add a link with styles but Word-based Outlook clients do not support it. For this you could use VML, but we will not go into this article on it.

You can see the Wiki for more information.

Apple Mail

The Apple Mail client sets a minimum font size of 14px, so we can not put text smaller than that. Fortunately, there are proprietary codes such as:

-ms-text-size-adjust: none; -webkit-text-size-adjust:none;

to unlock this minimum value of 14px.


In this article we have commented some of the particularities that we can find when constructing html templates from scratch. If we want to send mass emails with our weekly bulletin, it is advisable to resort to email marketing solutions such as Mailrelay , since in addition to facilitating the construction of the templates, we will have advanced statistics of the shipments, a specialized support, autoresponders and a lot of other things .

Rate this blog entry:
Analizamos el hosting web de Hostinger en detalle
blogpay a new cryptocurrency for bloggers

Related Posts



No comments made yet. Be the first to submit a comment
Wednesday, 18 September 2019

Captcha Image