Guía de diseño de correo electrónico 

Usted puede saber cómo crear un sitio web moderno y accesible. Ya conoce las reglas, las últimas opciones, etc. Pero ¿puede realmente tener todo ese conocimiento y utilizarlo para el diseño de correo electrónico? La respuesta corta es: NO. Esto debido a la variedad de clientes de correo electrónico y el apoyo limitado de CSS en muchos clientes de correo electrónico, hay algunas reglas muy específicas cuando se trata de diseño de un correo electrónico. Esta guía le ayudará a entender los puntos principales que usted debe de tener en cuenta para asegurar que su correo electrónico se muestra correctamente.

Antes de empezar... 

El Diseño de Correo Electrónico no es diseño web 

Si usted se preocupa por los estándares del W3C y utiliza lo último en CSS, etc. pues debe de olvidarse de todo eso cuando necesite realizar el diseño de correo electrónico. Básicamente puede pensar como si fuera el año 2000.

Layout

650px o menos ancho de diseño
La regla general para el tamaño de correo electrónico es mantenerlo 650px o menos de ancho. Esto permite que el mensaje se muestre correctamente (en general) en la mayoría de los clientes de correo electrónico y configuraciones de visualización.

Diseños simples son los mejores
En el diseño de correo electrónico la regla básica es "Simple es mejor". Si usted trata de hacer un diseño complicado se encontrará con un montón de problemas de lado del cliente de correo electrónico . Si usted está buscando realizar un diseño más avanzado, debe de considerar la utilización de tablas, por lo que debe de estar listo para utilizar una gran cantidad de tablas y establecer una buena cantidad de tiempo para poder maquetar su diseño, asi como tiempo para realizar las pruebas necesarias.

Utilice tablas de HTML básicas
Para crear el diseño general tendrá que utilizar tablas en HTML estándar. Si utiliza etiquetas DIV flotantes en CSS el diseño seguramente no se mostrará correctamente en todos los clientes de correo electrónico.

Tenga cuidado con el relleno de celdas de la tabla
Las tablas tomarán el relleno de cualquier celda de una fila y lo aplicará a todas las celdas de la fila. Esto podría dar lugar a algunos cambios en el despliegue que usted no desea. Usted debe tratar de aplicar bien el mismo relleno para todas las celdas de una fila o colocar una tabla dentro de la celda en la que le gustaría tener el color de relleno específico.

Evite el uso de colspans = "" en las tablas
Algunos clientes de correo electrónico no dan un soporte pleno a los colspan y otros tendrán problemas de visualización de las otras celdas, le recomendamos usarlos lo menos posible.

CSS 

No utilice stylesheets/hojas de estilo externas 
Las hojas de estilo externas no van a funcionar en una gran cantidad de los clientes de correo electrónico, por lo que si desea utilizar hojas de estilo deberá incluir su CSS en el mismo HTML que esta utilizando, ó bien utilice el  estilo dentro de cada linea y etiquetas en su HTML. 

No utilice clases CSS - siempre use CSS en línea 
Muchos clientes de correo electrónico no son compatibles con las clases de CSS. En lugar de declarar clases de CSS que debe utilizar CSS en línea. 

No use atajos CSS 
CSS le permite configurar las propiedades normalmente en grupos y atajos tales como style = "font: 12px Arial". En lugar de agrupar tales atributos se deben establecer cada parte individualmente. Tales como style = "font-size: 12px; font-family: Arial" 

Evite el uso de opciones Float CSS 
Algunos clientes de correo electrónico no tendrán en cuenta tanto el Float y las opciones de estilo de posición de CSS. Trate de usar las tablas en su lugar.

Imágenes y Videos

Use imágenes en formato URL
En lugar de incluir una imagen como ( src="img.gif"> <img ), debe incluir la dirección URL absoluta al archivo , como ( <img src="http://site.com/img.gif"> )

Utilice siempre las etiquetas descriptivas alt ( <img src="http://site.com/img.gif" alt="Company ABC"> )

La mayoría de clientes de correo electrónico desactivan las imágenes por defecto. Así que a menos que tenga las etiquetas alt sus suscriptores sólo verán un cuadro en blanco. Con una etiqueta alt sus suscriptores podrán ver el texto que pone en la etiqueta: "Trate de que el texto describa lo que la imagen muestra, para que el usuario tenga una mejor referencia de lo que puede ver al habilitar la imágen".

No incrustar vídeos y / o Flash
No es una buena idea insertar vídeos  y / o Flash en su correo electrónico. Muchos clientes de correo electrónico no apoyarán este tipo de código y muchos programas de detección como spam y virus, por lo que marcarán su correo electrónico como spam / malicioso. En lugar de incrustar el vídeo / flash en su email, lo mejor es utilizar una captura de pantalla de como el video reproductor deberá verse y enlazar esa imagen a su video o flash. 

GIF animados no son totalmente compatibles
Pregúntese si usted realmente necesita una animación en su correo electrónico. Mientras que la mayoría de clientes de correo electrónico compatibles con GIFs animados, Outlook 2007 no lo hacen. Clientes de correo electrónico que no admiten los GIF animados es probable que muestren el primer fotograma de la secuencia de animación unicamente.

Ponga a prueba su correo electrónico con imágenes deshabilitadas
Dado que la mayoría de clientes de correo electrónico muestran los correos electrónicos con imágenes deshabilitadas de forma predeterminada, es muy importante comprobar ver cómo su correo se ve con imágenes deshabilitadas.

Mantenga el tamaño de sus archivos bajos
Al igual que con el diseño web normal usted quiere estar al tanto de los tamaños de archivos de las imágenes de su correo electrónico. Trate de mantenerlos bajos para asegurar que la descarga sea rápida para sus suscriptores / usuarios.

Fondos 

Las imágenes de fondo no son totalmente compatibles 
Si está utilizando una imagen de fondo, tenga en cuenta que algunos clientes de correo electrónico no lo muestran. Si aún desea utilizar una imagen de fondo utilice las opciones de fondo HTML en lugar de utilizar CSS para declarar un segundo plano. 

Colores en el fondo del cuerpo del mensaje 
Muchos clientes de correo electrónico (como Gmail) no muestran un color de fondo que se establece para el cuerpo principal (<body>). Sugerimos que si va a configurar un color de fondo en el cuerpo de la etiqueta también tenga un div para envolver con un color de fondo que rodea a su contenido. De esta manera, incluso si el color de fondo del cuerpo no se admite, tendrá algo que se muestre muy similar.

Otra Generalidades

No coloque nada encima de la etiqueta de apertura <body> 
Cualquier cosa que usted ponga por encima de la etiqueta del cuerpo es probable que no se utilice. 

No incluya javascript 
Es probable que en la mayoría de clientes de correo electrónico y algunos filtros de spam pueda detectarlo como código malicioso. 

Evite copiar y pegar desde Microsoft Office
El HTML generará las etiquetas automáticamente, es por eso que al copiar y pegar desde MS Office este va a pegar en su formato y probablemente tendrá problemas de diseño. para esto mejor utilice el copiado y pegado desde un documento de texto plano sin formato.