Conocer las buenas prácticas en HTML

Aquí te presentamos las reglas de buenas prácticas que debes tener en cuenta para garantizar que tus archivos HTML funcionan correctamente en el cliente de correo electrónico del destinatario.

Enlaces

Abrir siempre los enlaces en otra pestaña / ventana

Cuando el usuario hace clic en un enlace de tu email, es recomendable que se abra en una nueva ventana. De este modo, cuando el usuario cierre la ventana, seguirá estando en tu correo.

¿Cómo se hacer?

Añade el atributo target="_blank" en tu etiqueta <a href="#"/>.

Ejemplo:
<a href=”http://www.actito.net" target=”_blank”>actito.net</a>

Definir otro color para un enlace

El color por defecto para los links es azul, pero puedes modificarlo.

¿Cómo se hace?

Añade el atributo style="" en la etiqueta <a href="#" /> con la propiedad 'color'. Añade la etiqueta <span> a ambos lados del enlace (algunos clientes de correo electrónico sobrescriben las propiedades de color habituales de un link, pero esto no ocurre si se incluye <span>).

Ejemplo
<a target="_blank" href="http://www.actito.net" style="color:#336699">
<span style="color: #336699"> actito.net </ span>
</a>

Definir un título para el enlace

Ver un mensaje explicativo al sobrevolar el link con el cursor.

¿Cómo se hace?

Añade el atributo title="" con el texto correspondiente. Se utilizará también para autocompletar de forma preliminar la información de seguimiento.

Ejemplo
<a target="_blank" href="http://www.actito.net" title="My link description">
<span style="color: #336699"> actito.net </ span>
</a>

Imágenes

Definir la anchura de la imagen

Para garantizar que el email se muestra correctamente, así como para evitar que el texto de sustitución de algunos clientes de email distorsione el diseño del mensaje, debes definir la anchura de tus imágenes.

¿Cómo se hace?

Añade el atributo 'width' a la etiqueta <img/>

Ejemplo
<img src"path" width="200"/>

Añadir el atributo "alt" a una imagen

Un texto alternativo es un texto que aparece si el usuario no acepta descargar las imágenes. Es importante por distintas razones. En primer lugar, facilita la lectura a las personas con problemas de vista y permite que el lector tenga una idea de la imagen antes incluso de verla, especialmente en teléfonos móviles, donde se suele bloquear las imágenes. En segundo lugar, aumentará la proporción texto / imagen, lo que contribuirá a mejorar tu reputación.

¿Cómo se hace?

Añade el atributo alt en la etiqueta <img src=""/>.

Ejemplo
<img src"path" alt="My alternative text"/>

Usar 'display block'

Un display: block; se utiliza para evitar que se generen espacios en blanco bajo una imagen.

¿Cómo se hace?

Añade el atributo 'style' con la propiedad 'display: block' en <img/>.

Ejemplo
<img src"path" style="display:block;" />

Usar el atributo 'title' con imágenes

Para facilitar la lectura a las personas que tienen problemas de vista, se recomienda incluir un texto de sustitución. Dicho texto ayuda también a mejorar la proporción texto / imagen y, por tanto, la reputación.

¿Cómo se hace?

Añade el atributo title en <img/>.

Ejemplo
<img src"path" title="My text remplacement"/>

Reglas generales

Los atributos deben escribirse entre comillas ""

La idea es estandarizar el código.

Ejemplo
<img src="path" style="display:block;" />

Utiliza doctype xhtml 1.0

Para estandarizar la visualización de correos en la mayoría de clientes, recomendamos enormemente incluir un doctype en la parte superior del email.

¿Cómo se hace?

Pon el doctype antes de abrir la etiqueta html.

Ejemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Usar 'table' en lugar de 'div'

El atributo table ayuda a garantizar la buena visualización de los emails. Algunos clientes tienen dificultades con float, margin, padding...

¿Cómo se hace?

Usa <table> ... </ table>

Ejemplo
<table>
<tr> <td> My text </td> </tr>
</table>

Sangra el texto correctamente

Para que resulte fácil leer el código, recomendamos que siempre se aplique el sangrado adecuado.

¿Cómo se hace?

Aplica una sangría y para cada línea hija y retírala para la línea madre. De este modo la apertura y el cierre de la etiqueta quedará siempre a la misma altura.

Define el tamaño 'td' y 'table'

Para garantizar una buena visualización en la mayoría de clientes, fija el tamaño de td y table.

¿Cómo se hace?

Incluye el atributo 'width' en la etiqueta con un valor sin especificar el formato.

Ejemplo
<td width="200px"> </td>

Usa una tabla de 100% para el color de fondo de tu correo

Muchos clientes ignoran los colores de fondo definidos en el css o el 'body'. Para dar solución a este problema puedes crear una tabla de 100% con un atributo bgcolor arriba.

¿Cómo se hace?

Crea una tabla 100% alrededor de tu email y sitúa la propiedad bgcolor encima.

Ejemplo
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000">
<tr>
<td width="100%" bgcolor="#000000">
Rest of the email
</td>
</tr>
</table>

Crear un espacio entre dos zonas horizontales

Para garantizar la uniformidad en los distintos clientes de correo electrónico, los espacios entre dos zonas deben crearse a través de una tabla.

¿Cómo se hace?

Para crear un espacio entre dos zonas, crea una línea vacía en una tabla con los atributos 'line-height' y 'height' definidos. Ambos atributos son importantes porque algunos clientes incluyen solo uno de los dos. Utilizar <br /> para crear grandes espacios entre líneas no es recomendable porque la altura de un <br /> puede variar de un cliente a otro.

Ejemplo
<tr>
<td valign="top" align="left" height="10" style="font-size:1px; line-height:10px;">
 
</td>
</tr>

Formato del texto en 'td'

Añade un atributo style en la etiqueta <td>. Es necesario repetir todas las propiedades porque algunos clientes incluyen solo una u otra.

¿Cómo se hace?

Añade las siguientes propiedades css a todas las <td> que contengan texto.

  • Font-size

  • Font-family

  • Color

Ejemplo
<td valign="top" align="left" style=" color: #336699;"> The text of td </td>

Usar un código de colores

Es posible cambiar el color de tu texto en tu HTML.

¿Cómo se hace?

Añade la propiedad color: xxxxx; en el atributo style.

Ejemplo
<td valign="top" align="left" style=" color: #336699;">
The text of td
</td>

Convertir caracteres especiales

Para garantizar que los caracteres especiales o acentuados se muestren correctamente debes convertirlos en una entidad html.

¿Cómo se hace?

La é pasa a $eacute; Consulta el siguiente enlace: w3schools.

Ejemplo
&eacute;t&eacute; = été

Usar fuentes especiales

Para grantizar que las fuentes se muestren correctamente, usa solo las fuentes web. No puede garantizarse que otras fuentes web funcionen correctamente.

¿Cómo se hace?

Esta es la lista de fuentes web disponibles:

  • Verdana

  • Arial

  • Courrier

Consulta el siguiente enlace para una lista más completa w3schools.

Usar reset.css en el head del email

Para solucionar algunos problemas de visualización en algunos clientes de correo electrónico y hacer posible una mejor visualización en clientes móviles deben insertarse los siguiente elementos css.

¿Cómo se hace?

Añade este código en una etiqueta style en el head.

Ejemplo
<head>
<style type="text/css">
. ReadMsgBody {width: 100%;}
. ExternalClass {width: 100%;}
body {-webkit-text-size-adjust: none;-ms-text-size-adjust: none;}
</style>
</head>

Definir la anchura del email

La anchura ideal del email es de entre 550 y 730px para que se visualice correctamente en la mayoría de clientes y navegadores.

Testar el email

La mejor forma de verificar que tu correo funciona correctamente es testarlo en varias herramientas como litmus.com o e-mail on acid.

¿Cómo se hace?

Ambas herramientas tienen versiones gratuitas limitadas y la subscripción mensual básica no es muy costosa.