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

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

• Inline styles eres tu mejor amigo. Absolutamente no vincule hojas de estilo y no use una etiqueta <style> (GMail, por ejemplo, elimina esa etiqueta y todo su contenido).

• Contra su mejor juicio, tablas de uso y abuso . <div> simplemente no lo cortará (especialmente en Outlook).

• No lo hagas usa 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 hiperenlazar un enlace real con algo diferente. Por ejemplo, no escriba http://www.google.com y luego vincularlo a https://gmail.com/. Algunos clientes marcarán el mensaje como Spam o Basura.

• Guarde sus imágenes en el menor número de colores posible para ahorrar en tamaño.

• Si es posible, inserta 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 de lo que haría un navegador hacer.

Mail chimpancé tiene un buen artículo sobre lo que no debe hacer. (Sé que suena mal para lo que quieres)

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

En general, todas las cosas que has 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 (eg. https://stackoverflow.com/random-image.png )
• Usar tablas para el diseño (nunca pensé ¡Lo recomiendo!)
• Usar estilos en línea (y css de la vieja escuela también, a lo sumo 2.1, caja de sombra no funcionará, por ejemplo;))

¡Solo prueba en tantos clientes de correo electrónico como puedas tener en tus manos, o usa Tornasol como alguien sugirió anteriormente! (crédito a Jim)

EDITAR:

Mail chimpancé ha hecho un gran trabajo al hacer esta herramienta disponible para comunidad.

Aplica sus clases CSS a sus elementos html en línea para usted!

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 en torno a la entrega de correo electrónico, saben sus cosas tan bien como cualquiera va a

Me temo que sí. Haría una página HTML con una hoja de estilos, luego usaría jQuery para aplicar la hoja de estilos al attr 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.

Creo 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="llenar el espacio en blanco" porque Outlook en la mayoría de los casos no cargará la imagen y se quedará con un encabezado transparente. Si al menos designas un color que funcione con la sensación general del correo electrónico, será menos impactante para el usuario. Nunca intentes usar hojas de estilo. O CSS en absoluto! Solo evítalo.

Dependiendo de si está copiando contenido desde una palabra o google Doc compartido asegúrese de (comando+F) Encontrar todos los ( ') y ( " ) y reemplazarlos dentro de su software de edición (especialmente dreemweaver) porque se mostrarán como código y simplemente no es bueno.

ALT es tu mejor amigo. usa la etiqueta ALT para agregar texto a todas tus imágenes. Porque las probabilidades son que no van a cargar bien. Y ese texto ALTERNATIVO es lo que hace que la gente haga clic en el botón (ver imágenes). También definir el ancho de sus imágenes, Altura y hacer que la frontera 0 para que usted no consigue líneas extrañas alrededor de tu imagen.

Considere editar todas las imágenes dentro de Photoshop con una frontera de 15px en cada lado (haga que el fondo sea transparente y guárdelo como PNG 24) de la imagen. A veces los clientes de correo electrónico no leen ningún estilo de relleno que se aplica a las imágenes por lo que evita cualquier formato extraño!

También encontré la línea en los enlaces particularmente molesto por lo que si se aplica eliminará la línea y te dará el aspecto deseado.

Hay mucho que realmente puede meterse con el aspecto y la sensación.