Aplicar estilo al correo electrónico HTML para Gmail

99

Estoy generando un correo electrónico html que usa una hoja de estilo interna, es decir

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

Cuando se ve en Gmail, parece que se ignoran todos los estilos de la hoja de estilo interna. Parece que Gmail ignora todos los estilos excepto las reglas en línea, p. Ej.

 <h2 style="color: red">Email content here</foo>

¿Es esta mi única opción para diseñar correos electrónicos HTML cuando se visualizan con Gmail?

— Dónal
fuente

14

Sí, este es el único, ya que muchos clientes de correo electrónico basados en web no reconocen las hojas de estilo internas. En realidad, el estilo en línea es la forma recomendada de diseñar boletines de noticias html.

— Mike

Hasta donde yo sé, se puede esperar que los lectores de correo electrónico sean compatibles con html 3.2 y css 1.1.

¿Cómo generaste tu correo electrónico? Quiero decir, ¿agregas el código de creación de la intención?

— RaphMclee

7

En general, es una buena práctica usar una <html>etiqueta de apertura ;)

— Zaz

1

Gmail apesta. ¡Aplicación iOS y aplicación web también!

— Adrian Florescu

19

Las respuestas aquí están desactualizadas, a partir de hoy, 30 de septiembre de 2016. Actualmente, Gmail está implementando soporte para la styleetiqueta en head, así como para las consultas de medios. Si Gmail es su única preocupación, ¡puede usar las clases con seguridad como un desarrollador moderno!

Como referencia, puede consultar los documentos CSS oficiales de gmail .

Como nota al margen, Gmail fue el único cliente importante que no admitió style( referencia , hasta que se actualicen de todos modos). Eso significa que puede dejar de poner estilos de forma casi segura. Es posible que algunos de los clientes más desconocidos aún los necesiten.

— Matthew Johnson
fuente

1

Parece que todavía no funciona. Lo probamos en Litmus, pero no funciona. ¿Existe alguna razón especial?

— Arian

@ArianHosseinzadeh ¿Qué no funciona? Se agregó una referencia a su documentación al respecto.

— Matthew Johnson

Lo probamos en Litmus e ignora los estilos que no están en línea. ¿Has probado <style> para gmail después de que lo anunciaron? funcionó ?

— Arian

1

@ArianHosseinzadeh Hice una copia y pegado de su ejemplo en sus documentos, y lo ejecuté a través de putmail . Los estilos se muestran en gmail. Verifiqué la aplicación de gmail de Android y gmail en un navegador Chrome. Supongo que las vistas previas de Litmus no se han actualizado para reflejar el cambio.

— Matthew Johnson

1

Me preguntaba por qué mis estilos no funcionaban y me di cuenta de que los había colocado dentro de la bodyetiqueta en lugar de la headetiqueta.

— palswim

67

Use estilos en línea para todo. Este sitio convertirá sus clases a estilos en línea: http://premailer.dialect.ca/

— subestado
fuente

2

Este sitio es asombroso. Muestra advertencias y le brinda una salida de texto sin formato, además de volver a redactar su HTML.

— jamesbar2

1

Este Premailer está en Ruby, fuente: github.com/premailer/premailer . Hay otro en Python: premailer.io source: github.com/peterbe/premailer , ambos son de código abierto.

— Maxime R.

1

Esta respuesta ya no es precisa. gmail admite estilos y clases y tiene documentos oficiales sobre el tema; consulte la respuesta de Matthew Johnson a continuación.

— Mikemaccana

12

Gmail inició el soporte básico para etiquetas de estilo en el área principal. No encontré nada oficial todavía, pero puedes probarlo tú mismo fácilmente.
Parece ignorar los selectores de clase e identificación, pero los selectores de elementos básicos funcionan.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

creará una etiqueta de estilo en su propia área principal limitada al div que contiene el cuerpo del correo

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

— fuchs777
fuente

Sin embargo, todavía no admite consultas de medios, lo cual es una pena. Las clases y las identificaciones también son útiles :)

— Eoin

2

Ahora también realizan consultas de medios y un soporte más completo para el estilo CSS. stackoverflow.com/questions/39759764/…

— crowmagnumb

7

Estoy de acuerdo con todos los que apoyan las clases Y los estilos en línea. Es posible que ya hayas aprendido esto, pero si hay un solo error en tu hoja de estilo, Gmail lo ignorará.

Podrías pensar que tu CSS es perfecto, porque lo has hecho tan a menudo, ¿por qué tendría errores en mi CSS? Ejecútelo a través del Validador de CSS (por ejemplo, http://www.css-validator.org/ ) y vea qué sucede. Hice eso después de encontrar algunos problemas de visualización de Gmail y, para mi sorpresa, varias declaraciones de estilo específicas de Microsoft Outlook aparecieron como errores.

Lo cual tenía sentido para mí, así que los eliminé de la hoja de estilo y los puse en un only for Microsoftbloque de código, así:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

Este es solo un ejemplo simple, pero, quién sabe, podría ser útil en algún momento.

— Shawn Spencer
fuente

Gracias, la parte sobre CSS inválido me ahorró mucho tiempo. Si todavía estás cerca, avísame por favor.

— Shadow Wizard es Ear For You

1

Hola @ShadowWizard. Estuve fuera por un tiempo, pero he vuelto. Me alegro de que te haya ahorrado algo de tiempo.

— Shawn Spencer

Saludos, solo quería asegurarme de que la recompensa no se desperdicie. :-)

— Shadow Wizard es Ear For You

2

Como han dicho otros, algunos programas de correo electrónico no leerán los estilos CSS. Si ya tiene un correo electrónico web escrito, puede usar la siguiente herramienta de zurb para integrar todos sus estilos:

http://zurb.com/ink/inliner.php

Esto resulta extremadamente útil cuando se utilizan plantillas como las mencionadas anteriormente de mailchimp, monitor de campaña, etc., ya que, como ha descubierto, no funcionarán en algunos programas de correo electrónico. Esta herramienta deja su sección de estilo para los programas de correo que la leerán y pone todos los estilos en línea para obtener una legibilidad más universal en el formato que desea.

— Chad Dupuis
fuente

Gracias por el enlace inliner.

— Shawn Spencer

2

Tenga en cuenta que los servicios y herramientas para enviar correos electrónicos pueden incorporar su CSS por usted, permitiendo que CSS en las <style>etiquetas funcione en Gmail.

Por ejemplo, si envía correos electrónicos con MailChimp, el CSS de las <style>etiquetas se incluirá automáticamente de forma predeterminada. Con Mandrill, puede habilitar esta funcionalidad (aunque está deshabilitada de manera predeterminada por razones de rendimiento ) marcando la casilla "Estilos CSS en línea en correos electrónicos HTML" en la sección "Enviar valores predeterminados" de la pestaña Configuración:

Imagen que muestra cómo hacer esto en Mandrill

— Mark Amery
fuente

0

Tuve el mismo problema al diseñar una plantilla en Mailjet. La solución del problema fue el código CSS minimizado dentro de las <style>etiquetas.

— Vojtěch Remiš
fuente