gmail - simple - plantilla email html responsive
Correo electrónico HTML en Gmail-atributo de estilo CSS eliminado (5)
Como alguien que regularmente codifica correos electrónicos para campañas de marketing en mi trabajo, siento tu dolor. Gmail, junto con muchos otros clientes de correo electrónico, puede ser un poco raro de codificar. Por un lado, elimina cualquier CSS que esté fuera del cuerpo. Así que poner cosas como consultas de medios y estilos de nivel de documento no funciona. El mejor consejo que puedo darte es codificar a mano tu CSS en línea y tratar de evitar cualquier cosa elegante. De hecho, si puedes usar un atributo HTML para hacer tu estilo, úsalo en lugar de cualquier CSS. Un ejemplo sería bgcolor en lugar de color de fondo.
Aquí hay un article relacionado con su problema específico que encontré. La mejor de las suertes.
Estoy trabajando en un correo electrónico HTML y estoy usando las Plantillas de Correo Electrónico Responsables de MailChimp en combinación con su herramienta CSS en línea . En su mayor parte, el correo electrónico se ve muy bien en la gran cantidad de clientes de correo electrónico, pero en Gmail las cosas están terriblemente mal representadas.
Si utilizo la opción "Mostrar original" de Gmail en el menú desplegable junto a la flecha de respuesta, el HTML original es diferente de lo que se muestra en realidad en el cliente de correo electrónico. Puedo confirmar esto inspeccionando el elemento con las herramientas del desarrollador. Esto sucede en el escritorio y en el móvil; el cliente de correo electrónico está eliminando los atributos de estilo en línea de los elementos.
Parece que uno de los criterios para eliminar el atributo de estilo es si el elemento también contiene una clase. ¿Alguien puede confirmar esto? Además, parece que se eliminan todos los atributos de estilo de una etiqueta de tabla independientemente. ¿Alguien puede confirmar esto también?
¿Cuáles son las soluciones para esto?
Capturas de pantalla de correo electrónico con fuente en Gmail y Yahoo incluidas a continuación.
Captura de pantalla del correo electrónico en Gmail con la fuente mostrada a través de las herramientas de desarrollo de Chrome
Captura de pantalla del correo electrónico en Yahoo con la fuente mostrada a través de las herramientas de desarrollo de Chrome
Hay varias opciones para gmail. Gmail es un buen bromista cuando se trata de su estilo, ya que eliminará todo lo que no le gusta de su correo electrónico.
Aquí hay algunos pequeños consejos:
Gmail agrega espacios en blanco entre las imágenes, o amplía el tamaño de su contenedor td: puede corregir esto especificando style = "display: block" en sus imágenes (asegúrese de que su TD tenga el mismo ancho y / o altura que su imagen).
Gmail muestra los enlaces negros como enlaces azules: Sí, esto es feo. Use # 000001 en lugar de # 000000.
Gmail hace que los números de teléfono sean seleccionables: puede ser bueno o no, dependiendo de su cliente, pero una forma de evitarlo es incluir una etiqueta de ancla vacía con estilos alrededor del número de teléfono.
Ej: <a style="color:#000001; text-decoration:none;>555 555-5555</a> . Te hará sentir avergonzado de tu código, pero es un truco poco efectivo.
Solo pensé que añadiría esto a la mezcla. También encontré este problema y al mirar la fuente en bruto me di cuenta de que la codificación de 8 bits estaba dividiendo líneas en lugares impares debido al límite de 1000 caracteres, por lo que estaba terminando con un contenido como este:
<td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty
le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">
La solución es codificar en base64 el contenido y usar la división de trozos o las herramientas que tenga para lograr lo mismo.
En php hice $html = chunk_split(base64_encode($html)) y luego configuré Content-Transfer-Encoding: base64 . Ahora gmail me ama.
Usar los selectores de CSS es otra solución que pude usar. En mi ejemplo estoy tratando de formatear una tabla HTML. Encontré que gmail eliminó todos los atributos de ID y CLASS haciendo que mi CSS fuera inútil.
Después de una investigación, noté que Gmail no eliminó mi atributo de título. Así que creé una regla CSS usando un selector de título. Esto parece funcionar bien:
[title~=myTitle] {background: black; color: white;}
No creo que esta sea la mejor práctica, pero pensé que lo mencionaría.
Acabo de comprobar ahora: Gmail elimina su atributo de estilo en línea si no coloca espacios entre ellos ; ,, y : caracteres
esto funciona bien:
<span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span>
pero la misma regla se eliminará si no usas espacios; si escribes esto
<span class="small-text" style="color:#8d8c87;display:block;font-family:''Titillium Web'',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span>
obtendrás esta salida en el cliente de Gmail:
<span>text</span>
EDITAR :
Además de este comportamiento, noté que Gmail tiende a eliminar el estilo en línea si declara una font-family dentro de una <table> o una <td> anidada, todavía no estoy seguro de cuál es la regla general de su preprocesador, lo verifiqué en Google pero no puedo encontrar ninguna documentación oficial sobre la composición del correo html para Gmail.