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


195

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?


1
John

Respuestas:


128

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.


9
+1: No sabía sobre el tornasol. Esto parece un gran ahorro de tiempo. Gracias: D Y no te olvides de las publicaciones de blog en CampaignMonitor, que también incluye algunos buenos consejos.
Horst Gutmann

249

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.


2
Al colocar un color de fondo en <div>, Outlook no extenderá el color más allá del contenido, lo que significa que el relleno no se coloreará.
Michael Irigoyen

70
¿Por qué internet? ¿Por qué no podemos tener un buen HTML para los correos electrónicos? sacude el puño
simonlchilds

8
¿Entonces podemos obtener spam más bonito?
Brock Hensley

66
@DavidRivers Quizás debería señalarse que "imágenes incrustadas" no significa agregar imágenes como archivos adjuntos, sino que deben incluirse como cadenas codificadas en base64 para reemplazar la url a la que se hace referencia en las <img>etiquetas "normales" , como así:<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
Timo

3
@MJafarMash Esa es la forma incorrecta de incrustar imágenes en el correo electrónico. Debe crear sobres separados y consultar la imagen en función de ella cid.
Michael Irigoyen

37

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!


1
el enlace de mailchimp está roto, quizás es uno de estos artículos, kb.mailchimp.com/article/common-html-email-coding-mistakes o este kb.mailchimp.com/article/common-mistakes-to-avoid
Nathan Koop

He actualizado el enlace, el primero que sugirió fue el correcto. Lamentablemente se movió sin agregar redireccionamientos.
SamMullins

Gracias por la herramienta de alineación CSS. Sería útil, supongo.
Rajesh Paul


6

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


5

'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.


2
Sin embargo, debes tener un poco de cuidado ... no es infalible. Al igual que podría arruinar el ancho de las cosas, así que simplemente verifique todo antes de enviar.
Nathan MacInnes

para moverse por ese problema, puede ocultar todo el documento con jQuery en primer lugar, a continuación, ejecute el código (y tal vez mostrar) - de esta manera las reglas CSS reales se recuperan y se aplican más que el resultado computarizada (por ejemplo, para anchos..)
majick

1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.