Desarrollo Web Diseño Innovación

Entendiendo el emailing responsivo

05/12/2016

Hoy con el crecimiento en el uso de dispositivos móviles, se hace cada vez más necesario focalizar las estrategias de comunicación con buen funcionamiento en todas las plataformas.

DISEÑO DE EMAILINGS RESPONSIVOS

Seguramente habrás escuchado sobre el diseño de emailings responsivos. A pesar de que ya lleva en el mercado varios años el término responsivo aún provoca cierta confusión acerca de lo que verdaderamente significa.

En términos de comportamiento nosotros definimos un emailing responsivo de la siguiente forma:

UN EMAILING QUE USA TABLAS FLUIDAS, IMAGENES FLUIDAS Y MEDIA QUERIES PARA CONTROLAR LA DIAGRAMACIÓN DE UN EMAIL A TRAVÉS DE VARIOS DISPOSITIVOS Y PANTALLAS.

Los emailings responsivos son directos descendientes de las páginas web responsivas, popularizadas por el diseñador Ethan Marcotte en su libro Responsive Web Design. Por lo tanto en web y en mailings la implementación mantiene básicamente los mismos conceptos.

Es decir, emails responsivos usan tablas fluidas e imágenes para lograr que el contenido flote y se adapte a los distintos tamaños y dispositivos. ¿Cómo se logra esto? Mediante el correcto uso de las reglas de estilo CSS y las condicionales que ofrece el uso de media queries.

EL PROBLEMA INICIAL

El problema inicial con el que los diseñadores y desarrolladores se encontraron fue con lo siguiente:

Si tenemos contenedor de un color plano completo al 100%, y dentro de él tenemos una tabla de ancho fijo de 600px que tiene una imagen de 600px, en escritorio se vería así:

hybrid-responsive-1

Si lo llevamos directamente a un dispositivo móvil sin utilizar los estilos correctos, lo veríamos así:

hybrid-responsive-mobile

La tabla con ancho fijo esta evitando que la imagen y su contenedor se adapten a la resolución de la pantalla. ¿Cuál fue la solución que se encontró para este problema inicial? Usar media querys, una regla de estilos CSS que condiciona ciertas reglas al tamaño del dispositivo desde el que se esta visualizando la web o emailing.

HACIENDOLO RESPONSIVO

Los media queries nos permiten especificar la forma en que las cosas deben verse frente a diferentes circunstancias. Cada media querie esta asociado a una seria de reglas de estilo CSS que se aplicarán cuando esa media querie se active según su condicional. En el caso de los emailings y webs responsivas esas condicionales son los tamaños de pantalla de los dispositivos.

Volvamos a nuestro ejemplo:

Si tenemos un contenedor de max-width: 600px podemos condicionarlo gracias a los media queries que responda frente a pantallas de menos de 600px de ancho, y que permita renderear de diferente forma las tablas y su contenido.

Podemos comenzar a agregar estilos como responsive-table responsive-image a nuestros desarrollos, permitiendo que tanto las tablas como las imágenes se comporten dentro del standar responsivo desarrollado por Bootstrap.

Revisemos un ejemplo de 2 media querie con reglas especificas de CSS.

@media screen and (max-width: 600px) {
  .responsive-table {
    display: block;
    width: 100% !important;
  }
   
  .responsive-image {
    height: auto;
    max-width: 100% !important;
  }
}

De esta forma, en los clientes de correo que soporten media queries, veremos nuestro mailing de esta forma.

hybrid-responsive-mobile-good

Esta misma técnica es utilizada para la variedad de elementos que un mailing puede contener, no solo imágenes o tablas.

Pros y Contras

La mayor ventaja es el control sobre la visualización en distintos dispositivos, y el hecho de poder ofrecer una respuesta verdaderamente responsiva frente al crecimiento y avance del mercado.

El mayor contra, es que este estandar responsivo no tiene soporte en todos los dispositivos. El problema más notable esta en la aplicación de Gmail que no soporta el uso de media queries.

Frente a este problema ¿Cuál es la forma correcta entonces?

Programación híbrida de un mailing

La programación híbrida de un mailing es la respuesta frente a la falta de soporte de los media queries. Popularizado por Fabio Carneiro diseñador de Mailchimp y tambien por Mike Ragan and Nicole Merlin.

La programación híbrida de un mailing es el uso de tablas fluidas, imágenes fluidas pero a diferencia de el email responsivo tradicional estas imágenes están en estado fluido por defecto, no condicionadas a un media querie. El proceso es algo inverso, las condicionales en este caso se utilizan para restringir las imágenes y tablas fluidas en pantallas de tamaños más grandes, no menores.

Los principios de esta técnica se pueden definir de la siguiente manera:

  1. Tablas y elementos fluidos por defecto
  2. Max-width en CSS para restringir los tamaños en escritorio
  3. Comentarios y condicionales MSO para restringir tamaños en Outlook

Este tipo de código funciona dentro de un estandar bastante positivo en los clientes más usuales, con clientes más antiguos de Outlook se ha tenido que agregar una nueva capa de condicionales, que solo Outlook puede leer.

Esto es simplemente una rápida y simple explicación de como funciona un mailing híbrido, el detalle es un poco más complejo que esto.

PROS & CONS

La programación híbrida es la mas amplia forma de construir un mailing, es la que responde de manera mas completa al avance del mercado en cuanto a dispositivos móviles. Ya que todo ocurre en el body del correo, los clientes que no leen las condicionales del header, funcionan correctamente con este tipo de programación

A pesar de esto hay varios dispositivos que aun no soportan este tipo de programación. Además, este tipo de programación esta pensada para mailings de diseño simple, sin muchas columnas, ya que la programación es muchísimo más compleja que en otro tipo de soluciones.

 

You Might Also Like

No Comments

Leave a Reply