Saltar al contenido principal

Conocer las buenas prácticas en HTML

Aquí están las reglas de las mejores prácticas que debes seguir para asegurarte de que tu archivo HTML funcione correctamente y se muestre correctamente en la bandeja de entrada de tus destinatarios.

Los enlaces​

Siempre abrir los enlaces en una nueva página​

Cuando el usuario hace clic en tu correo electrónico, es útil obligarlo a abrir una nueva ventana. Esto permite que, cuando el usuario cierre la ventana recién abierta, regrese a tu correo electrónico.

¿Cómo se hace?:

Agrega el atributo target="_blank" a tu etiqueta <a href="#" />

Ejemplo:

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

Definir un color en el enlace​

El color predeterminado de los enlaces es el azul web. Puedes modificar este color.

¿Cómo se hace?:

Agregar el atributo style="" en tu etiqueta <a href="#" /> con la propiedad 'color'. Agregar la etiqueta <span> alrededor del texto del enlace (algunos clientes de correo pueden sobrescribir las propiedades de color del enlace pero no del <span>).

Ejemplo

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

Definir un 'title' en el enlace​

Mostrar un texto explicativo al pasar el ratón sobre el enlace.

¿Cómo se hace? :

Agregar el atributo title="" en tu etiqueta 'a' con el texto explicativo. Este también se utilizará para prellenar la información de seguimiento en Actito.

Ejemplo

<a target="_blank" href="http://www.actito.net" title="Mi descripción del enlace">
    <span style="color: #336699"> actito.net </span>
</a>

Las imágenes​

Fijar el ancho de las imágenes​

Para garantizar una visualización correcta del correo electrónico y evitar que los textos de reemplazo en algunos clientes de correo deformen el diseño, es necesario fijar el ancho de las imágenes.

¿Cómo se hace? :

Agregar el atributo 'width' en la etiqueta <img />

Ejemplo

<img src="ruta" width="200"/>

Agregar el atributo 'alt' en las imágenes​

Para facilitar la lectura para personas con discapacidad visual, es más que recomendable agregar un texto de reemplazo en las imágenes. Este texto se mostrará en el correo electrónico si el usuario no acepta las imágenes. También ayuda a aumentar la proporción texto/imagen, lo que reduce los puntos de spam. Para la lectura en dispositivos móviles es fundamental usarlos, ya que por defecto las imágenes están bloqueadas en los móviles.

¿Cómo se hace? :

Agregar el atributo alt en la etiqueta <img src="" />

Ejemplo

<img src="ruta" alt="Mi texto alternativo"/>

Poner las imágenes en 'display block'​

Aquí, los display:block; se utilizan para evitar la generación de espacio en blanco debajo.

¿Cómo se hace? :

Agregar el atributo 'style' con la propiedad 'display:block' en la etiqueta <img />

Ejemplo

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

Agregar el atributo 'title' en las imágenes​

Para facilitar la lectura para personas con discapacidad visual, es más que recomendable agregar un texto de reemplazo en las imágenes. Este texto también ayuda a aumentar la proporción texto/imagen, lo que reduce los puntos de spam.

¿Cómo se hace? :

Agregar el atributo title en la etiqueta <<img />

Ejemplo

<img src="ruta" title="Mi texto de reemplazo"/>

En general​

Los atributos deben escribirse entre comillas ""​

La idea es estandarizar el código.

Ejemplo

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

Utilizar el doctype xhtml 1.0​

Para uniformizar la presentación del correo electrónico en la mayoría de los clientes de correo, recomendamos encarecidamente colocar un doctype al principio de tu correo electrónico.

¿Cómo se hace? :

Colocar el doctype antes de la apertura de la etiqueta html.

Ejemplo

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

Utilizar 'table' en lugar de 'div'​

Las table garantizan una buena presentación visual de los correos electrónicos. Algunos clientes de correo tienen dificultades para admitir float, margin, padding...

¿Cómo se hace? :

Usar <table> … </table>

Ejemplo

<table>
    <tr>
        <td>Mi texto</td>
    </tr>
</table>

Sangra el texto correctamente​

Para permitir una fácil revisión del código, recomendamos siempre indentar correctamente tu código HTML.

¿Cómo se hace? :

Hacer un retraimiento positivo para cada hijo y un retraimiento negativo para cada padre. Así, las etiquetas de apertura y cierre siempre estarán a la misma altura.

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

Para asegurar una presentación visual en la mayoría de los clientes de correo, siempre es necesario fijar el tamaño de las td y las table.

¿Cómo se hace? :

Colocar 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 de correo no tienen en cuenta los colores de fondo definidos en las css o en el 'body'. Para evitar este problema, puedes crear una tabla del 100% con un atributo bgcolor.

¿Cómo se hace? :

Crear una tabla de 100% alrededor de tu correo electrónico y colocar el atributo bgcolor encima.

Ejemplo

<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000">
    <tr>
        <td width="100%" bgcolor="#000000">
            Resto del correo electrónico
        </td>
    </tr>
</table>

Crear un espacio entre dos zonas horizontales​

Para garantizar la uniformidad de la presentación en diferentes clientes de correo, los espacios entre 2 zonas deben crearse con una tabla.

¿Cómo se hace? :

Para crear un espacio entre 2 zonas, debes crear una fila vacía en una 'table' con los atributos 'height' y 'line-height' definidos. Ambos atributos son importantes porque algunos clientes de correo solo tienen en cuenta uno u otro. No se recomienda usar
para crear grandes espacios entre las líneas, ya que la altura de un
puede diferir de un cliente de correo a otro.

Ejemplo

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

Formatear el texto en los 'td'​

Para dar formato al texto en un <td>, debes agregar un atributo style a la etiqueta. Es imprescindible repetir todas las propiedades de formato de texto, ya que algunos clientes de correo solo tienen en cuenta una u otra.

¿Cómo se hace? :

Agregar en todos los <td> que contienen texto las siguientes propiedades css:

  • font-size

  • font-family

  • color

Ejemplo

<td valign="top" align="left" style=" color: #336699;"> El texto de td </td>

Usar un código de colores​

Es posible cambiar el color de tu texto en HTML.

¿Cómo se hace?

Agregar la propiedad de atributo color: xxxxx; en el style.

Ejemplo

<td valign="top" align="left" style=" color: #336699;">
    El texto de td
</td>

Convertir caracteres especiales en entidad HTML​

Para asegurar la correcta visualización de caracteres especiales y acentuados, debes convertirlos en entidad html.

¿Cómo se hace? :

La é se convertirá en é Ver el siguiente enlace : w3schools

Ejemplo

&eacute;t&eacute; = été

Usar fuentes especiales​

Para garantizar una visualización correcta de las fuentes, solo debes usar fuentes web. No se puede garantizar la visualización correcta de otras fuentes web.

¿Cómo se hace? :

Aquí tienes una lista no exhaustiva de las fuentes web disponibles:

  • Verdana

  • Arial

  • Courrier

onsulta el siguiente enlace para obtener la lista completa de la W3C : w3schools.

Usar reset.css en el head del email​

Para resolver algunos problemas de visualización en ciertos clientes de correo y permitir una mejor visualización en dispositivos móviles, debes insertar los elementos de css a continuación.

¿Cómo se hace? :

Agregar este código en una etiqueta style en la 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​

Idealmente, el ancho del correo electrónico debe estar entre 550 y 730px para permitir su visualización en la mayoría de los clientes y navegadores de correo.

Prueba el email​

La mejor manera de validar el correcto funcionamiento de tu correo electrónico es probarlo en varias herramientas como litmus.com o e-mail on acid.

info

Estas dos herramientas tienen una versión gratuita limitada, pero la suscripción mensual básica no es muy costosa.