I need to layout an HTML template to be sent as an email.
What technical considerations must HTML and CSS have so that they are displayed correctly in email clients?
I need to layout an HTML template to be sent as an email.
What technical considerations must HTML and CSS have so that they are displayed correctly in email clients?
In the case of responsive ones, we will use media queries but remembering the limited support for style sheets in most clients, remember to use the full forms of the styles and not their reduced forms.
You can take this simple template as an example
Postscript, responsive emails are compatible with:
Not supported in:
Finally, it may be helpful to remember the basic principles of email template design:
To organize your template, it is recommended to use tables as they are highly compatible. And it is recommended that they have a maximum width of between 600 and 650 pixels.
We already know that most mailboxes block images and that the reader will not see them if they do not click the 'Show images' button. So, beforehand, we have to assume that our recipient will not see the images, so we have to design the email with that in mind.
Gmail and other mailboxes don't support Cascading Styles (CSS), so leave them out. Also, many mailboxes only support the most basic HTML styles (font-family, font-weight, etc) and will not support advanced styles (clear, float, z-index, etc).
Another tip when formatting is to avoid short forms of code; must be written in full.
That is to say write:
Instead of
It is clear that the implementation of labels to create a Mail template for security reasons and another so that our content that we send does not look bad visually is limited.
In the following link you can find recommendations on which html tags to implement, support for css styles and recommendations on the number of images that our template contains, I suggest you take into account the following suggestions:
<td>
, since tags like<p>
or<h1>
can cause us some inconvenience.mouse_over
uhover
for effects on links, although it may not work on all mailboxes.For images the recommendations are:
style=”display:block;”
images to avoid spaces below them.src=”www.misitio.es/imagenes/logo.gif”
instead ofsrc=”/imagenes/logo.gif“
).Avoid using:
<div>
.Finally, verify the font that is being implemented, some of the safest standard fonts are these:
Greetings.