Recomendaciones y consideraciones al escribir correos electrónicos HTML [cerrado]

Question 1

He estado desarrollando sitios web durante más de una década, pero rápidamente descubrí que muchos de mis hábitos de desarrollo para la web son inútiles cuando lo hago para clientes de correo electrónico. Esto me ha causado una enorme frustración, así que pensé en hacer una pregunta:

¿Cuáles son las mejores prácticas y consideraciones necesarias para otras personas como yo, que pueden encontrarse diseñando para Gmail, Outlook, etc. de vez en cuando?

Ejemplo: <style>...</style> vs CSS en línea.

En resumen: ¿qué se transfiere del mundo web al mundo del correo electrónico y qué no?

Question 2

Este parece un gran lugar para enumerar algunos recursos para cualquiera que intente aprender el correo electrónico HTML. Esta es (probablemente) la lista más completa de recursos de correo electrónico HTML que encontrará en la web. Feliz aprendizaje.

Guías de introducción:

Soporte CSS y guías generales:

Siempre debe incluir su CSS en html-email. Aquí hay una lista de herramientas de inserción CSS

Guías receptivas:

Plantillas y marcos:

Ejemplos alternativos de respuesta:

Además, el enlace Ted Goas Responsive anterior tiene un excelente ejemplo de fluido.

Solución de problemas y guías generales:

Deberá usar VML para que las imágenes de fondo funcionen en Outlook (excepto en la etiqueta del cuerpo ). Aquí hay algunos enlaces VML:

Question 3

He estado haciendo estos (en momentos bastante) para mi trabajo desde hace un tiempo. Hay muchas trampas con los correos electrónicos HTML. Los diferentes clientes de correo electrónico procesan HTML de manera diferente entre sí y hacen que IE6 parezca avanzado.

Aquí hay un resumen de lo que he aprendido hasta ahora.

Utilice CSS en línea : los estilos no siempre son compatibles.
Usar diseños de tablas : lo sé, pero los diseños div dependen de css y muchos de los clientes de correo electrónico no pueden hacer frente.
No uses rowpan : esto causa extraños problemas de espaciado
No use imágenes de fondo : el soporte para estas es limitado.
Aplicar estilo a las etiquetas de imagen con "display: block" : esto corrige extraños problemas de espaciado con Hotmail.
Si usa varias tablas, anímelas en una tabla principal : esto evita problemas de espaciado más extraños.
No utilice Javascript : de nuevo, no se admite muy bien.
Asegúrese de que su correo electrónico sea legible sin imágenes : el usuario no puede cargarlas.
Proporcione una versión en línea y un enlace a ella : esto permite a los usuarios ver el contenido deseado, incluso si su cliente de correo electrónico es terrible.
Prueba, prueba, prueba : el hecho de que funcione en un cliente de correo electrónico no significa que funcione en otros. Un gran problema es Outlook 2007. Utiliza palabras para representar HTML (suspiro).

Esto está lejos de ser una lista completa, pero debería poner a la mayoría de las personas en el camino correcto.

Question 4

CSS y tablas en línea: piense en el desarrollo web alrededor del año 2000 y estará bien. El monitor de campaña tiene un recurso excelente para saber qué cosas pueden manejar los clientes de correo electrónico. También use http://www.emailonacid.com/ para realizar pruebas; le ahorra tener que enviar un montón de pruebas.