1. Inicio
  2. Pregunta y respuesta
  3. Mejores prácticas y consideraciones al escribir correos electrónicos HTML

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

2010-02-09 17 views
68

He estado desarrollando sitios web durante más de una década, pero rápidamente descubrí que muchos de mis hábitos en el desarrollo para la web son inútiles cuando desarrollo para clientes de correo electrónico. Esto me ha provocado una enorme frustración, así que pensé en hacer una pregunta que con suerte revelaría las mejores prácticas y las consideraciones necesarias para otros como yo, que pueden encontrarse diseñando para Gmail, Outlook, etc. de vez en cuando.Mejores prácticas y consideraciones al escribir correos electrónicos HTML

Ejemplo:<style>...</style> vs inline CSS.

En resumen: lo que se transfiere desde el mundo web al mundo del correo electrónico, y lo que no.

Fuente

2010-02-09 Sampson

Respuesta

5

Css y tablas en línea: piense en el desarrollo web alrededor de 2000 y estará bien. El monitor de campaña tiene un excelente recurso para las cosas que los clientes de correo electrónico pueden manejar. También use http://www.emailonacid.com/ para probar, ahorra tener que enviar muchas pruebas.

Fuente

2010-02-09 14:44:02 matpol

+0

también algunas pautas proporcionada por MailChimp aquí: http://www.mailchimp.com/articles/email_marketing_guide/ –

27

He estado haciendo esto (en todo momento) para mi trabajo desde hace un tiempo. Hay muchos escollos con los correos electrónicos HTML. Diferentes clientes de correo electrónico procesan el HTML de forma diferente y hacen que IE6 tenga un aspecto avanzado.

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

  • uso en línea CSS: Estilos no siempre son compatibles.
  • Usa los diseños de tabla: Lo sé, pero los diseños de div dependen de CSS y muchos de los clientes de correo electrónico no pueden hacerlo.
  • No use rowspan: Esto causa problemas de espaciado extraño.
  • No utilice imágenes de fondo: La compatibilidad es limitada.
  • Etiquetas de imagen de estilo con "display: block": Esto soluciona problemas de espaciado extraños con hotmail.
  • Si utiliza varias tablas anótelas en una tabla principal: Esto detiene más problemas de espaciado extraño.
  • No utilizar Javascript: Una vez más no es compatible muy bien.
  • Asegúrese de que su correo electrónico sea legible sin imágenes: El usuario no puede cargarlos.
  • Proporcione una versión en línea y enlace a ella: Esto permite a los usuarios ver el contenido previsto, 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. Una gran sorpresa es Outlook 2007. Utiliza palabras para representar HTML (suspiro).

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

Fuente

2010-02-09 14:56:02 Magpie

0

Esto es bueno también, así que a ver qué CSS en línea está soportada en el navegador lo correo electrónico: (google) http://www.campaignmonitor.com/css/

I y también recomiendo litmusapp. Esta es una buena herramienta para verificar cosas.

Fuente

2010-05-28 09:17:08 jos

91

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

las guías de Inicio:

soporte CSS & guías generales:

Siempre debe inline tu CSS en HTML de correo electrónico.Aquí está una lista de CSS Inlining Tools

Guías Responsive:

plantillas & Marcos:

Ejemplos alternativas Responsive:

También el enlace Responsive Ted Goas anteriormente tiene un excelente ejemplo de fluido.

Solución de problemas & general Guías:

Deberá usar VML para obtener imágenes de fondo que funcionen en Outlook (excepto in the body tag). Estos son algunos enlaces VML:

Fuente

2014-01-29 17:04:18 John

Cuestiones relacionadas

 Cuestiones relacionadas