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

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?

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:

• Monitor de campaña
• Mailchimp
• Sitepoint
• Llegue a los clientes en línea
• Tuts +
• Correo electrónico en ácido

Soporte CSS y guías generales:

• Monitor de campaña | Guía de soporte CSS
• Plantilla estándar de correo electrónico HTML
• Tornasol | Preguntas frecuentes sobre clientes de correo electrónico
• Monitor de campaña | ¿Funcionará?
• Mailchimp | Guía de campo de marketing por correo electrónico
• Correo electrónico sobre ácido | Conceptos básicos de CSS: una guía para principiantes sobre cómo estilizar HTML

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

Guías receptivas:

• Monitor de campaña | Guía de soporte receptivo
• Campaña de estilo | Guía de soporte receptivo
• Tornasol | Infografía de instrucciones receptiva
• Tornasol | Gran lista de recursos móviles y receptivos

Plantillas y marcos:

• Ted Goas | Patrones de correo electrónico receptivo de Cerberus
• Correo electrónico sobre ácido | Plantilla adaptable
• Brian Graves | Patrones de correo electrónico receptivo
• Antwort | Diseños receptivos
• Zurb | Plantillas receptivas de tinta
• Monitor de campaña | Plantillas de correo electrónico gratuitas
• Mailchimp | Planos de correo electrónico

Ejemplos alternativos de respuesta:

• Tuts + | Correo electrónico receptivo sin consultas de medios
• Desbordamiento de pila | Ejemplo de fluido
• Correo electrónico sobre ácido | Disposición fluida de Monster
• Campaña de estilo | Diseño fluido de correo electrónico móvil
• Desbordamiento de pila | Contenido flotante

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

Solución de problemas y guías generales:

• Correo electrónico sobre ácido | Solución alternativa del error de consulta de Yahoo Media
• Desbordamiento de pila | Colspans y Rowspans en correo electrónico HTML
• Mailchimp | CSS condicional de Outlook
• Tornasol | Prohibición de hipervínculos azules
• Desbordamiento de pila | Fuentes web en correo electrónico HTML

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

• Monitor de campaña | Fondos a prueba de balas
• Monitor de campaña | Botones a prueba de balas

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.

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.