Guía de maquetación HTML para e-mails marketing

En el tiempo en que llevo trabajando en Interactive, aprendí que algo a lo que hay que prestarle un poco más de atención en la etapa de test es a los e-mail. Debido a la ausencia de estándares, y que corporativamente se utilizan clientes de email como Lotus u Outlook, pero el público en general utiliza webmails, uno se ve obligado a reducir las piezas html a una serie de reglas para performar correctamente en todos los medios.

Como no suelo encontrar guías en la web sobre este tema, comparto la que uso diariamente. Agreguen o corrijan lo que crean necesario:

  1. Resolución de imágenes para web: 72 dpi.
  2. Evitar usar imágenes menores a 14px de alto y 8px de ancho.
  3. Todas las imágenes deben tener style=»display:block»
  4. No usar hojas de estilos externas, ni estilos embebidos en el head.
  5. No usar javascript.
  6. No usar div para maquetar, usar tablas y no más de dos anidadas.
  7. Evitar usar degradés como fondo donde haya un cuerpo de texto. De esta manera se puede setear el color de fondo sólido como propiedad del td.
  8. Evitar la imágenes como fondo de un td.
  9. Utilizar etiqueta alt en todas las imágenes.
  10. Setear altura y ancho en tablas y tds.
  11. Setear alineaciones verticales y horizontales, aún cuando sean las default (middle y left).
  12. Para setear márgenes con presición, usar spacer.gif, archivo gif transparente de 15×15 pixeles seteándole ancho y alto a necesidad.
  13. Usar entidades htmls. Adjunto las más comunes:
    • á, é, í, ó, ú = á, é, í, ó, &uacute.
    • Á, É, Í, Ó, Ú = Á, É, Í, Ó, &Uacute.
    • ñ, Ñ = ñ, Ñ
    • TM = ™
    • (R) = ®
    • (C) = ©
    • Comillas simples = ‘
    • Comillas dobles = «
    • & = &
  14. Ojo al utilizar superscript «<sup></sup>», en textos multilínea agregará márgenes.
  15. No usar etiqueta <p>.
  16. Colocar textos entre <font></font>. La forma correcta de formatear un texto sería:

<font face=»arial, helvetica, sans-serif» size=»1″ color=»#666666″ style=»font: normal 10px arial, helvetica, sans-serif; color:#666666;»>Lorem ipsum dolor sit amet</font>

De esta forma se asegura que el texto tenga el formato deseado, ya sea por «style», o por los antiguos parámetros. Lotus usará face=»arial, helvetica, sans-serif» size=»1″ color=»#666666″, los webmails style=»font: normal 10px arial, helvetica, sans-serif; color:#666666;».
La equivalencia en tamaños de tipografía sería:
– 10-11 = size 1
– 12-13 = size 2
– 14+ = size 3

Notar el retraso importante que se tiene en materia de email. No conozco a nivel mundial la eficacia que tiene un email marketing. Sí sé la eficacia que tienen en los sitios que maneja la agencia, porcentaje alto cuando el email se convierte en una pieza de comunicación y deja de ser un «correo no deseado».

Más sobre eficacia de email marketing en Dossiernet.

Update 01/04/2014: con el tiempo, no sólo sigo manteniendo las mismas reglas, sino que se sumó emails para mobile. Hablar sobre emails responsive amerita un posteo completamente nuevo, pero no quiero dejar de compartir en este post un link para visualizar qué features soportan los clientes de email, y cuales no.

turu

Tech Lead at Rooot Group

Latest posts by turu (see all)