La guía completa de diseño de correo electrónico

Usted puede saber cómo crear un sitio web moderno y accesible. Conoce las reglas, últimas tendencias, etc… Sin embargo, puede realmente tener todo ese conocimiento y utilizarlo en el diseño de un correo electrónico? La respuesta corta es no. Debido a la gran variedad de clientes de correo electrónico y el apoyo limitado de CSS, en muchos clientes de correo electrónico existen algunas reglas muy específicas cuando se trata de diseño para email marketing. Esta guía le ayudará a explicar los principales puntos que usted debe tener en cuenta para asegurarse que su correo electrónico se muestra correctamente.

Antes de empezar…

• Diseño de correo electrónico NO es diseño web
  Si usted se preocupa por los estándares del W3C, utiliza lo último en CSS, etc... Tiene que olvidarse de todo esto cuando empiece con el diseño de correos electrónicos. Básicamente puede pensar como si estuviera en el año 2000.

Estructura

• 650 píxeles o menos de ancho de página
  La regla general para el tamaño de los emails es mantener los 650 píxeles o menos de ancho. Eso permite al email mostrarse correctamente en la mayoría de clientes de email y configuraciones de pantalla.
• Plantillas sencillas son las mejores
  Un email sencillo es mejor. Si intenta hacer un diseño complicado se encontrará con muchos problemas a la hora de validar todos los clientes de email. Si está buscando completar un diseño más avanzado, tiene que estar preparado para usar muchas tablas y preparar una buena cantidad de tiempo para pruebas.
• Use tablas básicas de HTML
  Para crear una estructura funcional, debe entender el estándar de tablas HTML. El código CSS flotante aplicado a ciertas plantillas de email puede que no se visualice correctamente en todos los clientes de correo electrónico.
• Cuidado con el relleno de las celdas en una tabla
  Outlook utiliza el relleno de cualquier celda de una tabla en una fila y lo aplica a todas las celdas en una columna. Esto puede resultar en cambios visuales no deseados. Usted debería intentar aplicar el mismo acolchado para todas las celdas en una fila ó insertar una tabla (que ya tiene acolchado) en la propia celda que quiere que tenga acolchado (cell padding).
• Evite usar colspans=”” en sus tablas
  Algunos clientes de email no soportan esta funcionalidad y otros mostrarán errores al abrir el correo electrónico en aquellas celdan que tienen “colspan” (desplazamiento de columnas)

CSS

• No use hojas de estilo externas
  No funcionarán en muchos de los clientes de email y debería incluir todos los parámetros CSS directamente en el código HTML
• No use clases CSS – siempre use CSS entre líneas
  Muchos clientes de email no soportan las clases CSS. En vez de declarar clases CSS usted debería usar el CSS entre líneas. Un ejemplo sería <div style=”color:#cccccc;”> content</div> en vez de <div>content</div>
• No use atajos CSS
  CSS le permite definir unas propiedades en grupos. Como por ejemplo style=”font: 12px, Arial” en vez de agrupar estos atributos usted debería configurar cada uno de ellos individualmente. Como en style=”font-size:12px; font-family:Arial”
• Evite usar CSS flotante u opciones de posición
  Algunos clientes de email separan tanto el flotante como las opciones de posición CSS. Pruebe a usar tablas en su lugar.

Imágenes y Vídeo

• Use fuentes de URL de imágenes absolutas
  En vez de incluir una imagen como (<img src=”img.gif”>) usted debería incluir la URL absoluta hacia el archivo, como (<img src=http://site.com/img.gif>)
• Use siempre etiquetas alt
  Muchos clientes de email desactivan las imágenes por defecto. A menos que usted tenga etiquetas alt, sus suscriptores solo verán una caja en blanco. Con una etiqueta alt sus suscriptores verán el texto que ponga en ella. Ejemplo: (<img src=”http://site.com/img.gif” alt=”Company ABC”>)
• No incrustar vídeos y/o Flash
  No es una buena idea incrustar vídeos directamente y/o Flash en su correo electrónico. Muchos clientes de correo electrónico no soportan dicho código y muchos programas de detección de spam y virus marcarán su correo electrónico como spam/malicioso. En lugar de incrustar el vídeo/flash en su correo electrónico, inserte una captura de pantalla de lo que el video vaya a reproducir e incruste eso. Al hacer clic en ella se puede reproducir el video/flash en su navegador.

Fondos

• Las imágenes de fondo no están totalmente soportadas
  Si usted está usando una imagen de fondo, tenga en consideración que algunos clientes de email no lo mostrarán. Si aún así decide usarlo, utilice las opciones HTML de fondo de pantalla en vez de usar CSS para declarar un fondo.
• Colores de fondo de cuerpo completo
  Muchos clientes de email (como Gmail) no muestran un color de fondo que pueda asignar para el cuerpo principal del email (etiqueta <body>). Le sugerimos que si está configurando un color de fondo en la etiqueta <body> también considere añadir una etiqueta <div> con un color de fondo que envuelva al contenido. De esta forma, si el cuerpo del color de fondo no está soportado, usted verá algo similar en su lugar.

Miscelánea

• No ponga nada encima de la etiqueta de apertura <body>
  Cualquier instrucción fuera de esta etiqueta será completamente ignorada y no se utilizará.
• No incluya javascript
  Muchos gestores de correo identifican el código javascript como spam o posible contenido malicioso
• Evite Microsoft Office
  El HTML generado le garantizará problemas. Adicionalmente cuando copie y pegue desde Office, usted estará pegando en su formato propio y encontrará problemas de diseño.
• Comentarios HTML
  Los comentarios HTML deberían permanecer ocultos o en su mínima expresión puesto que pueden ser identificados como Alertas de Spam.