simple - plantilla html para gmail

Diseño de correo electrónico HTML para Gmail (6)

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 estilos interna. Parece que Gmail ignora todos los estilos que no sean reglas en línea, por ejemplo

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

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

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 incorporar todos sus estilos:

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

Esto es extremadamente útil cuando se utilizan plantillas como las mencionadas anteriormente de mailchimp, monitor de campaña, etc. ya que, como ha comprobado, 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 coloca todos los estilos en línea para obtener una legibilidad más universal en el formato que usted desea.

Estoy de acuerdo con todos los que apoyan clases Y 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é tengo errores en mi CSS? Ejecútelo a través del validador de CSS (por ejemplo, http://www.css-validator.org/ ) y vea qué sucede. Lo hice 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 estilos y los puse en un bloque de código only for Microsoft , así:

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

Gmail comenzó con soporte básico para etiquetas de estilo en el área de la cabeza. No se ha encontrado nada oficial todavía, pero puede probarlo usted mismo.
Parece ignorar selectores de clase e id 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 de la cabeza limitada al div que contiene el cuerpo del correo

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

Las respuestas aquí están desactualizadas, a partir del 30 de septiembre de 2016. Actualmente, Gmail está implementando soporte para la etiqueta de style en el head , así como consultas de medios. Si Gmail es su única preocupación, puede usar clases como un desarrollador moderno.

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

Como nota al margen, Gmail fue el único cliente importante que no admitió el style ( reference , hasta que se actualicen de todos modos). Eso significa que casi con seguridad puedes dejar de poner estilos en línea. Algunos de los clientes más oscuros aún pueden necesitarlos.

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

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

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