Articles on: Icomm Main App

HTML Tips Guide

Specifications, design and assembly of HTML pieces



General details:



It uses HTML codes that are compatible with most email users. Email clients interpret HTML code differently, so it's important to stress the importance of code compatibility to use. Avoid using advanced HTML or CSS elements, such as JavaScript, animations, and transitions, as these may not be supported on all clients.

The 4 main points to start putting together an HTML for Email Marketing are the following:

Do not include TAGS <SCRIPT> , and therefore, no JAVASCRIPT code in it.

When including TAGS <STYLE>, it must be understood that each mail provider may understand the parameters differently. Therefore, if you decide to use classes, it is recommended to test on several devices before making the final shipment.

It is suggested to avoid programming the HTML following the new definitions of HTML 5. Therefore, it must be programmed based on TABLES and preferably avoiding the use of DIVS. This is because the engines of many mail programs do not recognize the new development tools, and this is the only way to try to unify the criteria so that the display is relatively uniform using a single template.

It is recommended that the maximum weight of the HTML does not exceed 100kb since it is the maximum rendered by Gmail. If it exceeds this weight, Gmail cuts the code and adds a link to see the full newsletter in a new window.

In the ICOMMKT platform it is recommended to upload only the table that contains all the HTML, without the following tags.

to. <html></html>
b. <head></head> nor everything that can be included in it such as: title, metatags, etc.
c. <body></body>

All styles that you want to assign to HTML objects must be declared INLINE, that is, within the style attribute of each object.

It is also suggested that each table, cell or column have its style specified, since depending on which email provider the piece is being viewed from, it may or may not inherit the styles well.

The widths and heights in the tables, cells or columns is recommended, in addition to specifying it in the style, adding it with its attribute width=”width” and height ”height”.

An example of this would be the following:

<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;">
    <tr>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
        <td width="550" style="width:550px;" align="center" valign="top"></td>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
    </tr>
</table>


All the texts must be inside a <span></span>, which must include its format in the style.

Taking into account the previous example, adding a text would look like this:

<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;">
    <tr>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
        <td width="550" style="width:550px;" valign="top">
            <span style="font-family:Tahoma, Arial; font-size:18px;color:#000000; line-height:20px;">Titulo.<br /></span>
            <span style="font-family:Tahoma, Arial; font-size:15px;color:#000000; line-height:17px;">Subtitulo.<br /></span>
            <span style="font-family:Tahoma, Arial; font-size:12px;color:#000000; line-height:14px;">Comentario.<br /></span>
        </td>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
    </tr>
</table>


Typography and design



The layout should be easy to read. Use a font size sufficient for recipients to be able to read the content without having to zoom. Use a clear font and legible size, such as Verdana, Arial, or any of the system fonts, that is, one that is part of those that are installed by default on most computers, which are:

Arial,
bold, bold italic, italic
Comic Sans,
bold, bold italic, italic
Georgia,
bold, bold italic, italic
Lucida Sans Unicode,
bold, bold italic, italic
thomas,
bold, bold italic, italic
Times New Roman,
bold, bold italic, italic
trebuchet,
bold, bold italic, italic
Verdana,
bold, bold italic, italic

If a custom font is used, only people who have it installed on their PC will be able to see it correctly. And when adding them in the code, do not use single or double quotes.

Recommendations for images



Images can enhance the visual aspect of your emails, but make sure they are appropriate and relevant to the content of the email. If possible, they should have the ALT attribute complete with the description of the image. This generates the following benefits:

Reduces the possibility of being considered spam
It guarantees that the user knows the content of the image, even without having downloaded it.

Use images optimized for size and weight so that email loading is fast:

The maximum recommended weight is 1 MB, in order to improve the loading time of the email, more specifically when the communication is opened from a 3G / 4G cell phone.

Animated GIFs can be used: In addition to trying to take into account the maximum recommended weight, some email providers, mainly the desktop Outlook app, are not capable of displaying animated GIFs. They show the GIF, as a static image of the first frame of the animation, so it is recommended that if the animated GIF contains something that is vital for communication, it is armed in the first animated frame to ensure viewing on all devices. whether it is animated or not.

On the other hand, it is also recommended to add the width and height to the <IMG> tag (as HTML attributes and for style) so that the newsletter maintains
the same way even if the user decides not to download the images of the news.

Likewise, it is important to add the following value to the style of said TAG: display: block. This allows to solve the incompatibility between Hotmail and Chrome, for which blank spaces are shown between consecutive images.

Cells containing images (<TD>) must have the following parameter for style: line-height:1px. This makes it possible to resolve an inconsistency between certain mail programs and the browsers from which they are accessed.

An example of a table with an image would be the following:

<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;">
    <tr>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
        <td width="500" style="width:500px; line-height:1px;" valign="top">
            <img src="RutaImagen.jpg" alt="Descripcion Imagen" width="500" height="150" style="width: 500px; height: 150px; display: block;" />
        </td>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
    </tr>
</table>


Recommendations: The use of IMAGE MAPS should be avoided to guarantee the correct functioning of the LINKS on images, as well as the subsequent statistical monitoring within the platform. Instead, it is suggested to cut all the images where you want to incorporate a LINK.

Good practices



Follow these good practices to create more attractive and effective emails for your email marketing campaign.

Optimize for mobile devices: Most people check their email from their mobile phone, so it's important that your emails are optimized for these devices. Use a responsive design that adapts to the screen size and make sure that the buttons and links are large enough to be easily touched on touch screens.

Include a plain text option: Include a plain text version of the email for recipients who can't or don't want to see the HTML version. This can also help prevent email from being filtered as spam.

Test in different email clients: Before you send your email to the recipient list, test it in different email clients to make sure it looks right. Test on different devices and browsers to make sure the email is readable and looks consistent.

Consult our article: How to create HTML Newsletter

Updated on: 11/15/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!