simple - plantilla html para gmail
Mejores prácticas para diseñar correos electrónicos HTML (7)
''Fraid así. Haría una página HTML con una hoja de estilo, luego usaré jQuery para aplicar la hoja de estilo al 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 use eso en el correo electrónico.
Estoy diseñando una plantilla HTML para un boletín por correo electrónico. Aprendí que muchos clientes de correo electrónico ignoran las hojas de estilo vinculadas, y muchos otros (incluido Gmail) ignoran por completo las declaraciones de bloque CSS. ¿Los atributos de estilo en línea son mi única opción? ¿Cuáles son las mejores prácticas para diseñar correos electrónicos HTML?
Además de las respuestas publicadas aquí, asegúrese de leer este artículo:
Campaign Monitor tiene una excelente matriz de soporte que detalla qué es compatible y qué no entre los diversos 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 filtros, etc.
El recurso que siempre termino volviendo a los correos electrónicos HTML es la guía CSS de CampaignMonitor .
Como su negocio se centra únicamente en la entrega de correo electrónico, saben lo que hacen y todo el mundo va a
Encuentro que el mapeo de imágenes funciona bastante bien. Si tiene encabezados o pies de página que sean imágenes, asegúrese de aplicar un bgcolor = "completar el espacio en blanco" porque en la mayoría de los casos, Outlook 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 documento compartido de Google, asegúrese de (comando + F) Buscar todos ('') y (") y reemplazarlos en su software de edición (especialmente dreemweaver) porque aparecerán como código y simplemente 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). Define también tus imágenes Ancho, Alto y haz la frontera 0 para que no tengas líneas extrañas alrededor de tu imagen.
Considere la posibilidad de editar todas las imágenes dentro de Photoshop con un borde de 15 píxeles a cada lado (haga que el fondo sea transparente y guárdelo como un PNG 24) de la imagen. A veces, los clientes de correo electrónico no leen ningún estilo de relleno que apliques a las imágenes, ¡así evita cualquier formateo extraño!
También encontré la línea en los enlaces particularmente molesta, así que si aplicas <style = "text-decoration: none; color: # ¡cualquier color que quieras aquí!" > eliminará la línea y le dará el aspecto deseado.
Hay mucho que realmente puede meterse con la apariencia y la sensación general.
He peleado la batalla de correo electrónico HTML antes. Estos son algunos de mis consejos sobre el estilo para una máxima compatibilidad entre los clientes de correo electrónico.
Los estilos en línea son tu mejor amigo. Absolutamente no vincula hojas de estilo y no usa una etiqueta
<style>(GMail, por ejemplo, elimina esa etiqueta y todo su contenido).En contra de su buen juicio, use y abuse de las tablas .
<div>simplemente no lo cortará (especialmente en Outlook).No use imágenes de fondo , son irregulares y lo molestarán.
Recuerde que algunos clientes de correo electrónico transformarán automáticamente los hipervínculos escritos en enlaces (si no los anclas
<a>ellos mismos). 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 hipervincular un enlace real con algo diferente. Por ejemplo, no escriba
http://www.google.comy luego vincúlelo ahttps://gmail.com/. Algunos clientes marcarán el mensaje como correo no deseado o basura.Guarde sus imágenes en el menor número posible de colores para ahorrar en el tamaño.
Si es posible, incruste sus imágenes en su 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 forma diferente a como lo haría un navegador.
Mail chimpancé tiene un buen artículo sobre lo que no debe 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 conceptos básicos son:
- Tener caminos absolutos para las imágenes (ej. https://.com/random-image.png )
- Use tablas para el diseño (¡nunca pensé que lo recomendaría!)
- Use estilos en línea (y CSS de la vieja escuela también, a lo sumo 2.1, box-shadow no funcionará, por ejemplo;))
¡Solo prueba en tantos clientes de correo electrónico como puedas tener en tus manos, o usa Litmus como sugirió alguien más arriba! (crédito a Jim)
EDITAR:
Mail chimp ha hecho un gran trabajo al hacer que esta herramienta esté disponible para la comunidad.
¡Aplica tus clases CSS a tus elementos html en línea para ti!