email - filtros - crear reglas en gmail

Mensajes de correo electrónico receptivos en la aplicación de Gmail(Android)

Question

He creado una plantilla de correo electrónico receptiva que funciona en todos los clientes web, todas las versiones de Outlook, Apple Mail, Thunderbird, iOS, la aplicación "Correo" de HTC y casi todo lo demás, menos las notas de Lotus.

No funciona para la aplicación Gmail en Android. Estoy bastante seguro de que esto se debe a que gmail elimina todo el CSS en el encabezado (que contiene la consulta de medios) para que muestre la versión web estándar pero la ventana es de tamaño móvil, por lo que muestra aproximadamente 300 px la mitad del correo electrónico. ¿Hay alguna forma de obligarlo a usar la consulta de medios? En su defecto, ¿hay alguna manera de cambiar la ventana gráfica? ¿Cuál sería la mejor opción de devolución?

¡Gracias!

Answer 1

Puede usar la técnica que se muestra aquí para forzar al correo electrónico a permanecer en el ancho del escritorio en la aplicación de Gmail. No es una solución brillante ya que todo será bastante pequeño y definitivamente no responde (todo lo contrario).

Pero al menos impedirá que sus diseños se rompan.

El truco es agregar

<div style="display: none; white-space: nowrap; line-height: 0; color: #ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>

a la parte más ancha del correo electrónico

https://css-tricks.com/override-gmail-mobile-optimized-email/

Answer 2

No hay solución alternativa al usar consultas de medios, ya que no pueden incluirse. Lamentablemente, no hay ninguna solución para Gmail con respecto al correo electrónico receptivo (suponiendo que responde = consultas de medios).

Aquí están las alternativas:

1. Diseño fluido : un diseño basado en porcentaje: generalmente, un correo electrónico de columna única que es 100%. Puede agregar soluciones de ancho máximo para limitar su ancho en los escritorios. Esto es 100% compatible con todos los principales clientes y, en mi opinión, es la mejor técnica para el correo electrónico HTML.
2. Tablas alineadas : esto es más ''adaptativo'' que receptivo. Funciona igual que los divs flotantes. El atributo align="left" HTML en una tabla funciona de manera más consistente en los principales clientes de correo electrónico, ya que float tiene soporte limitado.
3. Manténgase a la izquierda : simplemente diseñe su correo electrónico con todas las cosas importantes del lado izquierdo. Los dispositivos siempre mostrarán los 300 píxeles más a la izquierda, por lo que una división de columna, texto a la izquierda, diseño de imagen a la derecha puede ser apropiado.

Puede encontrar varios ejemplos de fluido y flotar / alinear aquí .