Google expandió el uso de CSS Media Queries a Gmail y a Inbox by Gmail. Entérate en qué beneficia este cambio a tus campañas de email marketing, y cómo implementarlo.
Tus campañas de email marketing se leen en múltiples dispositivos, y para lograr impresionar a tus lectores es ideal que aproveches al máximo las capacidades de cada uno de ellos. El pasado 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. Esta novedad es fundamental para todo marketer dedicado al emailing, ya que ahora tendrá nuevos elementos para llamar la atención y aprovechar su creatividad y originalidad, en busca de generar nuevas oportunidades de negocio para las marcas.
1. ¿Cuál es el cambio que implementó Google en Gmail?
Gmail ha incorporado este mes 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.
CSS3, para completar la explicación , es el estándar que se utiliza para las hojas de estilo CSS de la web, y es definido por el World Wide Web Consortium, dirigido por Tim Berners-Lee, creador tanto del protocolo HTTP , como del HTML.
2. ¿En qué beneficia el cambio de Gmail a tus campañas de email marketing?
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)
3. Ejemplo de “Antes y Después” de este cambio
Con el siguiente ejemplo, Google ha ilustrado el beneficio de la incorporación de CSS Media Queries a Gmail
La nueva funcionalidad permite por ejemplo – como en este caso – focalizar en un elemento en particular cuando el tamaño es más reducido
4. ¿Cómo incorporar esta mejora a las plantillas de Email Marketing?
Para ellos tienes que utilizar los bloques <style> , además de CSS Standard. La mayoría de los atributos y media queries son soportados, y en caso que uno no lo sea, Gmail simplemente lo ignorará.
El siguiente código HTML muestra como un texto de tu email se muestra en color azu si el el ancho del dispositivo es menor 500 px, y en caso contrario se desplegará en rojo
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
5. ¿Dónde puedes obtener más información Media Queries para email marketing?
Accede a la Guía de Desarrolladores de Gmail para envío de email para obtener más detalle técnicos
La entrada Descubre los últimos cambios de Gmail que beneficiarán tus campañas de email marketing aparece primero en Email Marketing efectivo. EnvialoSimple.com by Dattatec.