1. Inicio
  2. Pregunta y respuesta
  3. ¿Qué pautas para el diseño de correo electrónico HTML hay?

¿Qué pautas para el diseño de correo electrónico HTML hay?

2008-09-24 19 views
90

¿Qué pautas puede dar para el formato HTML enriquecido en correos electrónicos mientras se mantiene una buena estabilidad visual en muchos clientes e interfaces de correo electrónico basadas en la web?¿Qué pautas para el diseño de correo electrónico HTML hay?

Una respuesta sin relación en una pregunta sobre el desbordamiento de pila sugerida:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

que contiene las siguientes directrices:

  1. Lugar hoja de estilo en <body> en lugar de <head>
    Algunos clientes de correo electrónico quitará CSS de la cabeza, pero déjalo si el bloque de estilo está (inválidamente) en e cuerpo
  2. Use los estilos en línea siempre que sea posible
    Gmail se tira de alguna hoja de estilo, ya sea en el <head> o en el <body>, pero el honor estilos en línea asignados mediante el atributo style=""
  3. regreso a las tablas
    estándares de correo electrónico tienen en realidad, dio un paso atrás en los últimos años gracias a Outlook 2007 con el motor de renderizado Microsoft Word. Desaprender la mayor parte de lo que aprendió sobre el posicionamiento sin hojas de estilo.
  4. No confíe en imágenes
    mayoría de los clientes y la mayoría de clientes de correo electrónico basados ​​en la web no va a mostrar las imágenes a menos que el usuario lo solicita específicamente que se muestren.

También tengo algunas verdades "no confirmadas" que no recuerdo donde las leí.

  1. No utilice más de dos niveles de anidamiento en las tablas
    Es esto cierto. ¿Qué es probable que pase si lo hago? ¿Hay algún cliente/cliente particular que se atragante con esto?
  2. Sé cuidadoso de las imágenes de fondo de anidación en células/mesas
    Según entiendo que puede encontrar situaciones en las que se aplica la imagen de fondo en la tabla/célula descendente completamente nuevo, y no sólo "que brilla a través". Nuevamente, ¿es verdad o no? ¿Qué clientes?

Me gustaría completar esta lista con más pautas y experiencias de las trincheras.

¿Puede ofrecer alguna otra sugerencia?

Actualización: estoy pidiendo que especifique las directrices para la parte diseño en HTML y consistencia de allí. Las preguntas sobre las pautas generales para avoiding spam filters y common courtesy ya están en SO.

Fuente

2008-09-24 kaa

+0

Aquí es un [gran lista de recursos] (http: // stackoverflow.com/questions/2229822/html-email-best-practices-considerations-and-how-to-write-code-for-outlook-gma/21437734 # 21437734) en una [pregunta muy similar] (http: // stackoverflow. com/questions/2229822/html-email-best-practices-consideration-and-how-to-write-code-for-outlook-gma /). – John

Respuesta

12

Siempre use mime multiparte y proporcione una alternativa de texto sin formato.

Fuente

2008-09-24 14:25:40 JeeBee

1
  • Las imágenes de fondo no son fiables.
  • Prácticamente un obvio, pero no javascript.
  • Utilice un editor que le permita enviar el archivo/búfer actual como un correo electrónico o, como mínimo, encontrar un programa que le permita enviar el contenido de un archivo como un correo electrónico HTML. no pruebe sus correos electrónicos copiando el HTML y pegándolo en Outlook (o cualquier otro programa de correo electrónico para el caso).

Fuente

2008-09-24 14:31:35

53

En realidad es muy difícil hacer un correo electrónico HTML decente, si uno se aproxima por una 'moderna HTML y CSS' perspectiva.

Para obtener los mejores resultados, se imagina que es 1999.

  • Ir de nuevo a las tablas de diseño (o preferiblemente - No realice ningún diseño complejo)
  • tener miedo de las imágenes de fondo (que se rompen en Outlook 2007 y Gmail).
  • La cuestión de estilo-etiqueta-en-el-cuerpo se debe a que Hotmail solía aceptarlo de esa manera; estoy seguro de que ahora lo despojarán. Use estilos en línea con el atributo style si debe usar CSS.
  • Forget enteramente sobre float
  • Recuerde que sus imágenes probablemente serán bloqueados - el uso del fondo y el color del texto a su favor - asegurarse de que no es un texto legible con imágenes de movilidad
  • tener mucho cuidado con los enlaces, ser especialmente cuidadoso de algo que se parece a una URL en el texto del enlace - se enojará a los filtros de 'phishing' (por ejemplo <a href="http://domain.tld">www.someotherdomain.tld</a> es mal)
  • Recuerde que el "pliegue" en los clientes de correo web tiende a ser extremadamente alto de la página (en un 1024x768 pantalla, la mayoría de las interfaces no mostrarán más de un centenar de píxeles más o menos): coloca tu identidad en la parte superior para que El destinatario sabe quién es usted.
  • La versión reciente de outlook tiene un panel de vista previa "retrato" que es significativamente más estrecho de lo que esperaba: tenga mucho cuidado con los diseños de ancho fijo, si los usa, hágalos lo más angostos posible.
  • Ni siquiera piensa sobre flash, Javascript, SVG, lienzo, o algo por el estilo.
  • Prueba, mucho. Asegúrese de probar en Outlook reciente (¡las cosas han cambiado mucho! Ahora usa Word como su motor de representación HTML, y está paralizado: Word 2007 HTML/CSS support). Gmail es bastante quisquilloso también. Sorprendentemente, el correo web de Yahoo es extremadamente bueno, con un buen soporte de CSS.

Buena suerte;)

actualización para responder más preguntas:

No utilice más de dos niveles de anidación en las tablas

Creo que esta es una más antigua directriz relativa a Lotus Notes. Las tablas anidadas deberían ser, pero en realidad, si tienes un diseño lo suficientemente complicado como para necesitarlas, probablemente tengas problemas de todos modos.Mantenga su diseño simple.

Sé cuidadoso de las imágenes de fondo de anidación en células/mesas

Esto puede estar relacionado con lo anterior, y lo mismo se aplica, si usted está recibiendo tan complicado, entonces se tener problemas. Las versiones recientes de Outlook no son compatibles con las imágenes de fondo, por lo que sería mejor que se olvide de ellas por completo.

Fuente

2008-09-24 14:39:01 Dan

+2

¿Por qué la compatibilidad con los correos electrónicos HTML no ha evolucionado tanto? ¿Por qué deberíamos continuar implementando todas estas malas prácticas, como si volviéramos en 1999? – smonff

+0

Hay una solución alternativa para admitir bgimages http://stackoverflow.com/a/17358553/413032. Alternando un ms-word html. @ Smonff Estoy completamente de acuerdo contigo. ........ ¡Por qué un html renderizado por MS-Word! –

+1

check [Codificación de correo electrónico 101] (https://litmus.com/blog/html-email-coding-101-infographic/email-coding-101) de tornasol, la esperanza ayuda. – stom

9

La gente detrás de Campaign Monitor también inició un sitio web Email Standards Project con mucha información útil.

Fuente

2008-09-24 14:42:35

2

Creo que este es un nivel más bajo que la pregunta que está haciendo, pero si realmente desea que un correo electrónico html sea visto correctamente por tantos clientes como sea posible, asegúrese de que esté usando MIME válido. En particular, para un correo electrónico para ser considerado como MIME válida, las cabeceras debe (en el sentido de RFC de la palabra) contienen estas dos cabeceras:

MIME-Version: 
Content-Type:

clientes muy estrictas mostrará el código HTML como texto sin formato si uno o el otro de estos falta Te sorprendería saber cuántos grandes vendedores en línea que deberían saberlo mejor lo han estropeado (notablemente, he recibido correos electrónicos HTML con MIME-Version faltante: encabezados de Amazon y ACM en el pasado)

Fuente

2008-09-24 15:02:42 jj33

1

Tres palabras de consejos: prueba, prueba, prueba.

Consulte el servicio de pruebas de correo electrónico de LitmusApp.com. Usted les envía un mensaje y lo presentan en un grupo de clientes y le muestran capturas de pantalla de los resultados. No es perfecto, pero es bastante bueno.

(Lotus Notes anteriores a la 8.0 realmente, realmente mal para el correo HTML, por cierto)

Además, más allá de los estilos CSS simplemente en línea, recomiendo cambiar a las etiquetas siempre que sea posible.

Fuente

2009-02-19 16:45:51 Eli

0

Si incluye un bloque de estilo, no comience una nueva línea con ".classname" o "." cualquier cosa. Coloque un corsé o algo antes del punto. Si no lo hace, algunos sistemas de correo web no mostrarán correctamente sus hojas de estilo.

Muchas personas han asumido incorrectamente que no pueden usar bloques de CSS en los correos electrónicos debido a este comportamiento ... IIRC "." es el delimitador del cuerpo para SMTP. Los sistemas tenderán a escaparse en sus tiendas de correo para evitar que el contenido de un mensaje sea mal identificado como un nuevo mensaje. La forma en que esto se maneja tiende a romper cualquier estilo que comience en una nueva línea con un punto.

Fuente

2009-06-19 16:13:38 Einstein

1

Incruste sus imágenes, no las enlace.

Esto es malo:

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

Esto es bueno:

<img src=cid:myImage/>

Sí, parece extraño, pero echa un vistazo a este guide regarding embedding images in emails.

Fuente

2010-11-25 15:08:20

Cuestiones relacionadas

 Cuestiones relacionadas