Mejores prácticas para diseñar correos electrónicos HTML [cerrado]

Estoy diseñando una plantilla HTML para un boletín electrónico. Aprendí que muchos clientes de correo electrónico ignoran las hojas de estilo vinculadas, y muchos otros (incluido Gmail) ignoran las declaraciones de bloque CSS por completo. ¿Son los atributos de estilo en línea mi única opción? ¿Cuáles son las mejores prácticas para diseñar correos electrónicos HTML?

Campaign Monitor tiene una excelente matriz de soporte que detalla qué es compatible y qué no entre varios clientes de correo.

Puede usar un servicio como Litmus para ver cómo aparece un correo electrónico en varios clientes y si quedan atrapados por los filtros, etc.

He peleado la batalla del correo electrónico HTML antes. Estos son algunos de mis consejos sobre el estilo para una máxima compatibilidad entre clientes de correo electrónico.

• Los estilos en línea son tu mejor amigo. Absolutamente no vincule las hojas de estilo y no use una <style>etiqueta (GMail, por ejemplo, elimina esa etiqueta y todo su contenido).

• Contra tu mejor juicio, usa y abusa de las tablas . <div>s simplemente no lo cortará (especialmente en Outlook).

• No uses imágenes de fondo , son irregulares y te molestarán.

• Recuerde que algunos clientes de correo electrónico transformarán automáticamente los hipervínculos escritos en enlaces (si no los ancla <a>usted mismo). Esto a veces puede lograr efectos negativos (por ejemplo, si está poniendo un estilo en cada uno de los hipervínculos para que aparezca un color diferente).

• Tenga cuidado de vincular un enlace real con algo diferente. Por ejemplo, no escriba http://www.google.comy luego vincúlelo https://gmail.com/. Algunos clientes marcarán el mensaje como Spam o Basura.

• Guarde sus imágenes en la menor cantidad de colores posible para ahorrar en tamaño.

• Si es posible, incrusta tus imágenes en tu correo electrónico. El correo electrónico no tendrá que llegar a un servidor web externo para descargarlos y no aparecerán como archivos adjuntos al correo electrónico.

Y por último, prueba, prueba, prueba ! Cada cliente de correo electrónico hace las cosas de manera diferente a como lo haría un navegador.

El chimpancé del correo tiene un buen artículo sobre qué no hacer. (Sé que suena al revés para lo que quieres)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

En general, todas las cosas que ha aprendido que son malas prácticas para el diseño web parecen ser la única opción para el correo electrónico html.

Los fundamentos son:

• Tener rutas absolutas para las imágenes (por ejemplo, https://stackoverflow.com/random-image.png )
• Use tablas para el diseño (¡nunca pensé en recomendarlo!)
• Utilice estilos en línea (y CSS de la vieja escuela también, como máximo 2.1, box-shadow no funcionará, por ejemplo;))

¡Simplemente pruebe tantos clientes de correo electrónico como pueda, o use Litmus como alguien más sugirió anteriormente! (crédito a Jim)

EDITAR:

Mail Chimp ha hecho un gran trabajo al poner esta herramienta a disposición de la comunidad.

¡Aplica tus clases CSS a tus elementos html en línea para ti!

Además de las respuestas publicadas aquí, asegúrese de leer este artículo:

http://24ways.org/2009/rock-solid-html-emails

El recurso al que siempre termino volviendo sobre los correos electrónicos HTML es la guía CSS de CampaignMonitor .

Como su negocio está orientado únicamente a la entrega de correos electrónicos, saben sus cosas tan bien como cualquiera

'Fraid así. Crearía una página HTML con una hoja de estilo, luego usaría jQuery para aplicar la hoja de estilo al atributo de estilo de cada elemento. Algo como esto:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Luego copie el DOM y úselo en el correo electrónico.

Me parece que el mapeo de imágenes funciona bastante bien. Si tiene encabezados o pies de página que son imágenes, asegúrese de aplicar un bgcolor = "rellene el espacio en blanco" porque la perspectiva en la mayoría de los casos no cargará la imagen y se le dejará un encabezado transparente. Si al menos designa un color que funcione con la sensación general del correo electrónico, será menos impactante para el usuario. Nunca intente usar ninguna hoja de estilo. O CSS en absoluto! Solo evítalo.

Dependiendo de si está copiando contenido de una palabra o un documento de Google compartido, asegúrese de (comando + F) Buscar todos los (') y (") y reemplazarlos dentro de su software de edición (especialmente dreemweaver) porque aparecerán como código y no es bueno

ALT es tu mejor amigo. use la etiqueta ALT para agregar texto a todas sus imágenes. Porque las probabilidades son que no van a cargar bien. Y ese texto ALT es lo que hace que las personas hagan clic en el botón (ver imágenes). También defina el ancho, la altura de sus imágenes y haga que el límite sea 0 para que no tenga líneas extrañas alrededor de su imagen.

Considere editar todas las imágenes dentro de Photoshop con un borde de 15px en cada lado (haga el fondo transparente y guárdelo como PNG 24) de la imagen. ¡A veces los clientes de correo electrónico no leen los estilos de relleno que aplica a las imágenes, por lo que evita cualquier formateo extraño!

También encontré que la línea debajo de los enlaces es particularmente molesta, así que si aplica <style = "text-decoration: none; color: # ¡el color que desee aquí!" > eliminará la línea y le dará el aspecto deseado.

Hay muchas cosas que realmente pueden interferir con el aspecto general.