simple - plantilla email html responsive free

¿Qué pautas para el diseño de correo electrónico HTML hay? (9)

¿Qué pautas puede dar para el formato HTML enriquecido en correos electrónicos mientras se mantiene una buena estabilidad visual entre muchos clientes e interfaces de correo electrónico basadas en la web?

Una respuesta no relacionada con una pregunta sobre Stack Overflow sugirió:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Que contiene las siguientes pautas:

Coloque la hoja de estilo en <body> lugar de <head>
Algunos clientes de correo electrónico quitarán CSS de la cabeza, pero lo dejan si el bloque de estilo está (inválidamente) en el cuerpo.
Usa estilos en línea donde sea posible
Gmail quitará cualquier hoja de estilo, ya sea en <head> o en <body> , pero respetará los estilos en línea asignados con el atributo style=""
Regresar a las tablas
Los estándares de correo electrónico en realidad han dado un paso atrás en los últimos años gracias a Outlook 2007 con el motor de renderizado Microsoft Word. Desaprender la mayor parte de lo que aprendió sobre el posicionamiento sin hojas de estilo.
No confíes en las imágenes
La mayoría de los clientes y la mayoría de los clientes de correo electrónico basados en web no mostrarán imágenes a menos que el usuario solicite específicamente que se muestren.

También tengo algunas verdades "no confirmadas" que no recuerdo dónde las leí.

No use más de dos niveles de anidamiento en tablas
Es esto cierto. ¿Qué es probable que pase si lo hago? ¿Hay algún cliente / cliente particular que se atragante con esto?
Tenga cuidado de anidar imágenes de fondo en celdas / tablas
Según tengo entendido, puede encontrar situaciones en las que la imagen de fondo se aplica en la tabla / celda descendente completamente de nuevo, y no solo "brillando a través". Nuevamente, ¿es verdad o no? ¿Qué clientes?

Me gustaría completar esta lista con más pautas y experiencias de las trincheras.

¿Puedes ofrecer alguna otra sugerencia?

Actualización: estoy específicamente solicitando pautas para la parte de diseño en HTML y consistencia de las mismas. Las preguntas sobre las pautas generales para evitar los filtros de spam y la cortesía común ya están en SO.

Creo que este es un nivel más bajo que la pregunta que está haciendo, pero si realmente desea que un correo electrónico html sea visto correctamente por tantos clientes como sea posible, asegúrese de que esté usando un MIME válido. En particular, para que un correo electrónico se considere como MIME válido, los encabezados DEBEN (en el sentido RFC de la palabra) contener estos dos encabezados:

MIME-Version: Content-Type:

Los clientes muy estrictos mostrarán su HTML como texto sin formato si falta uno u otro. Te sorprendería saber cuántos grandes vendedores en línea que deberían saberlo mejor lo han estropeado (en particular, he recibido correos electrónicos HTML sin la versión MIME: encabezados de Amazon y ACM en el pasado)

Eche un vistazo a esta repetición, es como html5boilerplate, pero para los correos electrónicos: http://htmlemailboilerplate.com/

En realidad, es realmente difícil hacer un correo electrónico HTML decente, si se lo aborda desde una perspectiva moderna de "HTML y CSS".

Para mejores resultados, imagina que es 1999.

Vuelva a las tablas para el diseño (o preferiblemente, no intente ningún diseño complejo)
Tenga miedo de las imágenes de fondo (se rompen en Outlook 2007 y Gmail).
Lo de la etiqueta de estilo en el cuerpo es porque Hotmail solía aceptarlo de esa manera. Sin embargo, estoy bastante seguro de que lo despojarán. Use estilos en línea con el atributo de style si debe usar CSS.
Olvídate del float
Recuerde que sus imágenes probablemente estarán bloqueadas, utilice el color de fondo y el texto para su beneficio, asegúrese de que haya algún texto legible con las imágenes desactivadas.
Tenga mucho cuidado con los enlaces, sea especialmente cauteloso con cualquier cosa que se parezca a una URL en el texto del enlace: molestará a los filtros de ''phishing'' (por ejemplo, <a href="http://domain.tld">www.someotherdomain.tld</a> es malo )
Recuerde que el "doblez" en los clientes de correo web tiende a ser extremadamente alto (en una pantalla de 1024x768, la mayoría de las interfaces no mostrarán más de cien píxeles más o menos): obtenga su identidad en la parte superior para que el destinatario sabe quién es usted
La versión reciente de Outlook tiene un panel de vista previa "vertical" que es significativamente más angosto de lo que esperaba: tenga mucho cuidado con los diseños de ancho fijo; si los usa, hágalos lo más angostos posible.
Ni siquiera pienses en flash, Javascript, SVG, canvas o algo por el estilo.
Prueba, mucho. Asegúrate de probar en una perspectiva reciente (¡las cosas han cambiado mucho! Ahora usa Word como su motor de representación HTML, y está paralizado: Word 2007 HTML / CSS support ). Gmail es bastante quisquilloso también. Sorprendentemente, el correo web de Yahoo es extremadamente bueno, con un buen soporte de CSS.

Buena suerte ;)

Actualiza para responder más preguntas:

No use más de dos niveles de anidamiento en tablas

Creo que esta es una antigua guía relacionada con Lotus Notes. Las tablas anidadas deberían estar bien, pero en realidad, si tienes un diseño lo suficientemente complicado como para necesitarlas, probablemente tendrás problemas de todos modos. Mantenga su diseño simple .

Tenga cuidado de anidar imágenes de fondo en celdas / tablas

Esto puede estar relacionado con lo anterior, y lo mismo aplica, si te estás volviendo tan complicado, entonces tendrás problemas. Las versiones recientes de Outlook no son compatibles con las imágenes de fondo, por lo que sería mejor que se olvide de ellas por completo.

Incruste sus imágenes, no las enlace.

Esto es malo :

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

Esto es bueno :

<img src=cid:myImage/>

Sí, parece extraño, pero echa un vistazo a esta guía sobre cómo incrustar imágenes en correos electrónicos .

La gente detrás de Campaign Monitor también comenzó un sitio web de Email Standards Project con mucha información.

Si incluye un bloque de estilo, no comience ninguna línea nueva con ".classname" o "." cualquier cosa. Coloque un corsé o algo antes del punto. Si no lo hace, algunos sistemas de correo web no mostrarán correctamente sus hojas de estilo.

Muchas personas han asumido incorrectamente que no pueden usar bloques de CSS en correos electrónicos debido a este comportamiento ... IIRC "." es el delimitador del cuerpo para SMTP. Los sistemas tenderán a escaparse en sus tiendas de correo para evitar que el contenido de un mensaje sea mal identificado como un nuevo mensaje. La forma en que esto se maneja tiende a romper cualquier estilo que comience en una nueva línea con un punto.

Siempre use mime multiparte y proporcione una alternativa de texto sin formato.

Tres palabras de consejo: prueba, prueba, prueba.

Consulte el servicio de prueba de correo electrónico de LitmusApp.com. Usted les envía un mensaje y lo presentan en un grupo de clientes y le muestran capturas de pantalla de los resultados. No es perfecto, pero es bastante bueno.

(Lotus Notes anterior a la 8.0 realmente, realmente apesta a correo HTML, por cierto)

Además, más allá de los estilos CSS en línea, recomiendo cambiar a las etiquetas siempre que sea posible.

Las imágenes de fondo no son confiables.
Prácticamente una obviedad, pero no javascript .
Utilice un editor que le permita enviar el archivo / búfer actual como un correo electrónico o, como mínimo, encontrar un programa que le permita enviar el contenido de un archivo como un correo electrónico HTML. no pruebe sus correos electrónicos copiando el HTML y pegándolo en Outlook (o cualquier otro programa de correo electrónico para el caso).