¿Qué pautas existen para el diseño de correo electrónico HTML? [cerrado]

101

¿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 web?

Se sugirió una respuesta no relacionada a una pregunta en Stack Overflow:

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

Que contiene las siguientes pautas:

  1. Coloque la hoja de estilo en <body>lugar de.<head>
    Algunos clientes de correo electrónico quitarán CSS del encabezado, pero lo dejarán si el bloque de estilo está (no válido) en el cuerpo.
  2. Utilice estilos en línea siempre que sea posible.
    Gmail eliminará cualquier hoja de estilo, ya sea en el <head>o en el <body>, pero respetará los estilos en línea asignados mediante el style=""atributo
  3. Volver a las tablas Los
    estándares de correo electrónico han dado un paso atrás enorme en los últimos años gracias a Outlook 2007 que utiliza el motor de procesamiento de Microsoft Word. Desaprenda la mayor parte de lo que aprendió sobre el posicionamiento sin hojas de estilo.
  4. No confíe en las imágenes
    La mayoría de los clientes y la mayoría de los clientes de correo electrónico basados ​​en la web no mostrarán imágenes a menos que el usuario solicite específicamente que se muestren.

También tengo algunas verdades "no confirmadas" que no recuerdo dónde las leí.

  1. No use más de dos niveles de anidamiento en tablas.
    ¿Es cierto? ¿Qué es probable que suceda si lo hago? ¿Hay algún cliente / clientes en particular que se ahogue con esto?
  2. Tenga cuidado con anidar imágenes de fondo en celdas / tablas.
    Según tengo entendido, puede encontrar situaciones en las que la imagen de fondo se aplique en la tabla / celda descendente completamente de nuevo, y no simplemente "brillando". De nuevo, ¿cierto o no? ¿Qué clientes?

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

¿Puede ofrecer más sugerencias?

Actualización: estoy pidiendo específicamente pautas para la parte de diseño en HTML y su coherencia. Las preguntas sobre las pautas generales para evitar los filtros de spam y la cortesía común ya están en SO.

html  email 
— kaa
fuente
Aquí hay una gran lista de recursos sobre una pregunta muy similar .
— John

Respuestas:

63

En realidad, es muy difícil hacer un correo electrónico HTML decente, si lo enfocas desde una perspectiva de 'HTML y CSS moderno'.

Para obtener los mejores resultados, imagina que es 1999.

  • Regrese a las tablas para el diseño (o preferiblemente, no intente ningún diseño complejo)
  • Tenga miedo de las imágenes de fondo (se rompen en Outlook 2007 y Gmail).
  • Lo de la etiqueta de estilo en el cuerpo se debe a que Hotmail solía aceptarlo de esa manera; sin embargo, estoy bastante seguro de que ahora lo eliminan. Use estilos en línea con el styleatributo si debe usar CSS.
  • Olvídate por completo de float
  • Recuerde que sus imágenes probablemente estarán bloqueadas; use el fondo y el color del texto a su favor; asegúrese de que haya texto legible con las imágenes desactivadas
  • Tenga mucho cuidado con los enlaces, tenga especial cuidado con cualquier cosa que se parezca a una URL en el texto del enlace; enfurecerá los filtros de 'phishing' (por ejemplo, <a href="http://domain.tld">www.someotherdomain.tld</a>es malo )
  • Recuerde que el "pliegue" en los clientes de correo web tiende a ser extremadamente alto en la página (en una pantalla de 1024x768, la mayoría de las interfaces no mostrarán más de cien píxeles aproximadamente). Ingrese su identidad en la parte superior para que el destinatario sabe quien eres.
  • La versión reciente de Outlook tiene un panel de vista previa "vertical" que es significativamente más estrecho de lo que podría esperar; tenga mucho cuidado con los diseños de ancho fijo, si debe usarlos, hágalo lo más estrecho posible.
  • Ni siquiera pienses en flash, Javascript, SVG, lienzo o algo por el estilo.
  • Prueba, mucho. Asegúrese de realizar la prueba en una versión reciente de Outlook (¡las cosas han cambiado mucho! Ahora usa Word como su motor de renderizado HTML y está dañado: compatibilidad con Word 2007 HTML / CSS ). Gmail también es bastante delicado. Sorprendentemente, el correo web de Yahoo es extremadamente bueno, con buen soporte de CSS.

Buena suerte ;)

Actualice para responder a más preguntas:

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

Creo que esta es una pauta anterior relacionada con Lotus Notes. Las tablas anidadas deberían estar bien, pero en realidad, si tiene un diseño lo suficientemente complicado como para necesitarlas, probablemente tendrá problemas de todos modos. Mantenga su diseño simple .

Tenga cuidado de anidar imágenes de fondo en celdas / tablas

Esto puede estar relacionado con lo anterior, y lo mismo se aplica, si se está volviendo tan complicado, tendrá problemas. Las versiones recientes de Outlook no admiten imágenes de fondo en absoluto, por lo que es mejor que se olvide de ellas por completo.

— Dan
fuente
3
¿Por qué la compatibilidad con los correos electrónicos HTML no ha evolucionado tanto? ¿Por qué seguir implementando todas estas malas prácticas, como si estuviéramos en 1999?
— smonff
Existe una solución alternativa para admitir bgimages stackoverflow.com/a/17358553/413032 . Alternando un html de ms-word. @ Smonff Estoy completamente de acuerdo contigo. ........ ¿Por qué un HTML generado por MS-Word?
— Davut Gürbüz
1
consulte Codificación de correo electrónico 101 de tornasol, la esperanza ayuda.
— shaijut
13

Utilice siempre mime de varias partes y proporcione una alternativa de texto sin formato.

— JeeBee
fuente
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 un MIME válido. En particular, para que un correo electrónico se considere MIME válido, los encabezados DEBEN (en el sentido RFC de la palabra) contener ambos encabezados:

MIME-Version:
Content-Type:

Los clientes muy estrictos mostrarán su HTML como texto sin formato si falta uno u otro. Se sorprendería de cuántos grandes proveedores en línea que deberían saberlo mejor han arruinado esto (en particular, he recibido correos electrónicos HTML con la versión MIME faltante: encabezados de Amazon y ACM en el pasado)

— jj33
fuente
1
  • Las imágenes de fondo no son fiables.
  • Prácticamente una obviedad, pero sin javascript .
  • Utilice un editor que le permita enviar el archivo / búfer actual como un correo electrónico o, al menos, busque 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 para el caso).
— Jonathan Arkell
fuente
1

Tres palabras de consejo: prueba, prueba, prueba.

Consulte el servicio de prueba de correo electrónico de LitmusApp.com. Les envías un mensaje y lo renderizan en un grupo de clientes y te muestran capturas de pantalla de los resultados. No es perfecto, pero es bastante bueno.

(Por cierto, Lotus Notes anterior a 8.0 realmente apesta a correo HTML)

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

— Eli
fuente
0

Si incluye un bloque de estilo, no comience ninguna línea nueva con ".classname" o "." cualquier cosa. Ponte un aparato ortopédico o algo antes del período. 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 CSS en correos electrónicos debido a este comportamiento ... IIRC "." es el delimitador de cuerpo para SMTP. Los sistemas tenderán a escapar en sus almacenes de correo para evitar que el contenido de un mensaje se reconozca erróneamente como un mensaje nuevo. La forma en que se maneja tiende a romper cualquier estilo que comience en una nueva línea con un punto.

— Einstein
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.