tips reglas redactar que protocolo plantillas pasos para online mostrar mensaje imagen generar generador formalizar escribir encabezamiento encabezado electrónicos electrónico electronicos electronico ejemplos eficaces cómo correos correo correctamente con compatible como asunto archivo adjunto html css html-email

html - redactar - reglas para escribir un correo electronico



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

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 de 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.

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

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

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 montones de pruebas.

Este parece ser un excelente 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.

Guías de inicio:

Soporte CSS y Guías Generales:

Siempre debe alinear su CSS en html-email. Aquí hay una lista de CSS Inlining Tools

Guías de respuesta:

Plantillas y marcos:

Ejemplos alternativos receptivos:

También el enlace de respuesta de Ted Goas anterior tiene un excelente ejemplo 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 de cuerpo ). Aquí hay algunos enlaces VML:

Esto también es bueno, así que vea qué CSS en línea es compatible con qué navegador de correo electrónico: http://www.campaignmonitor.com/css/

Yo también recomiendo litmusapp (google it!). Esta es una buena herramienta para verificar cosas.

He estado haciendo esto (a veces) 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.

  • Use CSS en línea : los estilos no siempre son compatibles.
  • Usa diseños de tablas : lo sé, pero los diseños de div dependen de CSS y muchos de los clientes de correo electrónico no pueden hacer frente.
  • No use rowspan : Esto causa problemas de espaciado extraños.
  • No use imágenes de fondo : el soporte para esto es limitado.
  • 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ños.
  • No use 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 cargarlas.
  • Proporcione una versión en línea y un 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 exhaustiva, pero debería colocar a la mayoría de las personas en el camino correcto.