Mejores prácticas y consideraciones al escribir correos electrónicos HTML [cerrado]

Resuelto Sampson asked hace 14 años • 0 respuestas

Llevo más de una década desarrollando sitios web, pero rápidamente descubrí que muchos de mis hábitos de desarrollo para la web son inútiles cuando desarrollo 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 las consideraciones necesarias para otras personas como yo, que de vez en cuando se encuentran diseñando para Gmail, Outlook, etc.?

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

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

Sampson avatar Feb 09 '10 21:02 Sampson
Aceptado

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
  • correochimp
  • punto de sitio
  • Llegue a los clientes en línea
  • Tut+
  • Correo electrónico sobre ácido

Soporte CSS y guías generales:

  • Monitor de campaña | Guía de soporte CSS
  • Texto repetitivo de correo electrónico HTML
  • tornasol | Preguntas frecuentes sobre clientes de correo electrónico
  • Monitor de campaña | ¿Funcionará?
  • MailChimp | Guía de campo del 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 debes incluir tu CSS en el correo electrónico html. Aquí hay una lista de herramientas de inserción CSS

Guías responsivas:

  • Monitor de campaña | Guía de soporte receptivo
  • Campaña de estilo | Guía de soporte receptivo
  • tornasol | Infografía instructiva responsiva
  • tornasol | Gran lista de recursos móviles y responsivos

Plantillas y marcos:

  • Ted Goas | Patrones de correo electrónico receptivos de Cerberus
  • Correo electrónico sobre ácido | Plantilla responsiva
  • Brian tumbas | Patrones de correo electrónico receptivos
  • Responder | Diseños responsivos
  • Zurb | Plantillas responsivas de tinta
  • Monitor de campaña | Plantillas de correo electrónico gratuitas
  • MailChimp | Planos de correo electrónico

Ejemplos alternativos responsivos:

  • Tut+ | Correo electrónico responsivo sin consultas de medios
  • Desbordamiento de pila | Ejemplo de fluido
  • Correo electrónico sobre ácido | Diseño fluido del monstruo
  • 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 fluido.

Solución de problemas y guías generales:

  • Correo electrónico sobre ácido | Solución alternativa al error de consulta de medios de Yahoo
  • 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

Necesitará 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
John avatar Jan 29 '2014 17:01 John

He estado haciendo esto (en bastantes ocasiones) por mi trabajo desde hace un tiempo. Existen muchos obstáculos 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.
  • Utilice 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 utilice la extensión de filas : esto provoca problemas de espaciado extraños.
  • No utilice imágenes de fondo : la compatibilidad con estas es limitada.
  • Aplicar estilo a las etiquetas de imagen con "display:block" : esto soluciona problemas extraños de espaciado con hotmail.
  • Si utiliza varias tablas, anídelas en una tabla principal : esto evita problemas de espaciado más extraños.
  • No utilice Javascript : nuevamente, no es muy compatible.
  • Asegúrese de que su correo electrónico sea legible y no tenga imágenes : el usuario no podrá cargarlas.
  • Proporcione una versión en línea y enlace a ella : esto permite a los usuarios ver el contenido deseado, incluso si su cliente de correo electrónico es terrible.
  • Probar, probar, probar : 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 Word para representar HTML (suspiro).

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

Magpie avatar Feb 09 '2010 14:02 Magpie

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 sobre las cosas con las que pueden lidiar los clientes de correo electrónico. Utilice también http://www.emailonacid.com/ para realizar pruebas; le ahorrará tener que enviar muchas pruebas.

 avatar Feb 09 '2010 14:02