Entradas

Email Marketing: Gmail más responsivo que nunca

Email Marketing: Gmail más responsivo que nunca

Google expandió el uso de CSS Media Queries a Gmail y a Inbox by Gmail. Ahora tu email a cuentas Gmail puede ser mucho mas responsive.

El 14 de septiembre de 2016, Google anunció que incorporó a Gmail opciones adicionales para que los correos que se reciban en su plataforma puedan ser más responsivos, es decir que se adapten aún más a cualquier tipo de pantalla.

Gmail ha incorporado el uso de CSS Media Queries, tanto en Gmail como en Inbox by Gmail. Media Query es un módulo de CSS3 que permite adaptar la representación de código HTML a características específicas de cada dispositivo.

A partir de ahora podrás configurar tus emails, para que se adapten a características específicas del equipo donde se está accediendo. Por ejemplo, la resolución, si se encuentra en modo portait o landscape (horizontal o vertical) o el tamaño exacto de pantalla.

El beneficio es que ahora podrás utilizar en los correos dirigidos a usuarios de Gmail todas las ventajas de uso responsivo que cuentas en una página web o en una landing page, que hasta ahora no se encontraban disponibles. En otras palabras, al poder  elegir cómo mostrar tu información con mayor perfección a tus lectores, podrás aumentar tu CTR, es decir tu efectividad en obtener clics en tus campañas, especialmente desde smartphones, contribuyendo así al incremento de tu ROI (Retorno de la inversión)

La mayoría de los atributos y media queries son soportados, y en caso que uno no lo sea, Gmail simplemente lo  ignorará.

Aquí te dejamos el listado de propiedades CSS soportadas por Gmail & Inbox:

  • azimuth
  • background
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-sizing
  • break-after
  • break-before
  • break-inside
  • caption-side
  • clear
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • direction
  • display
  • elevation
  • empty-cells
  • float
  • font
  • font-family
  • font-feature-settings
  • font-kerning
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-synthesis
  • font-variant
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-weight
  • height
  • image-orientation
  • image-resolution
  • isolation
  • letter-spacing
  • line-height
  • list-style
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • object-position
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • pause
  • pause-after
  • pause-before
  • pitch
  • pitch-range
  • quotes
  • richness
  • speak
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • stress
  • table-layout
  • text-align
  • text-combine-upwrite
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-style
  • text-indent
  • text-orientation
  • text-overflow
  • text-transform
  • text-underline-position
  • unicode-bidi
  • vertical-align
  • voice-family
  • width
  • word-spacing
  • writing-mode

Media queries Soportadas

Tipos:

  • all
  • screen

Queries Soportadas

  • min-width
  • max-width
  • min-device-width
  • max-device-width
  • orientation
  • min-resolution
  • max-resolution

Keywords soportadas

  • and
  • only

 

Visto en




Por:


Entradas Relacionadas

Deja un comentario