Emailing
Domina el diseño adaptativo de email en los proveedores más populares
Los proveedores de email móviles son la principal herramienta que usamos para abrir emails. Para que se vean correctamente, necesitamos que sean adaptativos
¿Recuerdas aquellas cajas de cereales con sorpresa en su interior? Al no saber qué regalo te ibas a encontrar, terminabas comiéndote toda la caja de una sentada. Aunque el elemento sorpresa fuera excitante durante esos días de tu infancia, no lo es tanto en el email marketing.
No dejes al azar que el GIF de tu última newsletter sea renderizado o no. Dado que cada proveedor de email tiene distintas reglas, hemos resumido las de aquellos más populares para recomendarte un diseño adaptativo a cada uno.
Tabla de contenidos
Principales proveedores de email
Aunque hay muchos proveedores en el mercado, los 5 más usados cuentan con una cuota de mercado del 73 %. Una vez que hayas dominado estos, la adaptabilidad de tu email estará bien encaminada. Esta observación la realizó Litmus, que analizó mil millones de emails en marzo de 2015. En esta entrada nos centraremos en los siguientes 5 proveedores:
• Apple iPhone – 28% • Gmail – 17% • Apple iPad – 12% • Outlook – 8% • Apple Mail – 8%
¿Por qué es tan importante el diseño adaptativo?
Como hemos mencionado antes, los proveedores de email móviles son la principal herramienta que usamos para abrir emails. Para asegurarnos de que nuestros emails se vean correctamente en los teléfonos móviles y, específicamente, en los últimos modelos de iPhone, necesitamos que sean adaptativos. Un email adaptativo es aquel que cambia su forma y tamaño para poder ser mostrado apropiadamente en pantallas de diversos tamaños. Hay tutoriales online muy útiles para aprender HTML, que enseñan técnicas sencillas para crear emails adaptativos.
Para dar estilo y formato a los emails se ha usado tradicionalmente CSS, un lenguaje popular en diseño web. Todavía podemos usar CSS para crear plantillas de email adaptables a móvil, pero hay un problema. Gmail y otros proveedores de email no se llevan bien con CSS y pueden quitar tus etiquetas <style> arruinando el look de tus emails.
¿Cómo puedo diseñar mis emails para que se vean bien en todos los proveedores?
En este punto puede que te estés preguntando qué técnica puedes usar para que tus emails tengan una buena apariencia en todas las plataformas principales. A continuación te muestro algunos consejos:
Apple iPhone – Al diseñar emails para iPhones, y sobre todo para los últimos modelos de iPhone 6, debes hacer hincapié en la anchura de tu email. Diseñar tus emails con el tamaño de pantalla en mente es la clave. Para asegurarte de que muestras tus emails correctamente en todos los dispositivos móviles, usa @media queries a fin de indicar a tu email que debe ajustarse al tamaño de pantalla del dispositivo.
Gmail – Como comentábamos antes, Gmail no es un fan de CSS, así que para poder mostrar tu email en móviles y también en Gmail necesitamos usar la opción de estilo Inline. En Litmus puedes ver una rápida demostración de cómo usarlo.
Así es como se ve tu CSS integrado en tu email.
<html> <head> <meta charset=utf-8> <style type="text/css"> .ReadMsgBody {width: 100%;} .ExternalClass {width: 100%;} </style> </head> </html>
Así es como quieres que tu CSS se vea, cuando está “Inline”.
<span style="font-size: 22px; font-family: Arial, sans-serif; color: #222222;" >Hello!</span>
Apple iPad – En este caso usamos una técnica muy similar a la optimización para móviles. Al mirar en tus informes de campaña puedes ver qué modelo y dispositivo usa cada uno de tus clientes para abrir su email. Ten en cuenta la dimensión de los dispositivos más populares y usa @media query para asegurarte de que tus emails se muestren correctamente en iPads o cualquier otra tablet que usen tus clientes.
Outlook – Nacido en 1997, Outlook es uno de los clientes más antiguos que todavía persisten. Desde entonces ha sufrido una gran serie de cambios, sobre todo en 2007. Outlook 2003 usaba Internet Explorer para mostrar emails, sin embargo la siguiente edición empezó a utilizar Microsoft Word. Actualmente sigue siendo así, por lo que hay muchas propiedades CSS que Outlook no reconoce. Hay muchos artículos que detallan cómo dar estos pasos, sin embargo lo principal para que Outlook muestre tus emails correctamente es incluir tu CSS como inline y no en el “header”. Hay muchas herramientas gratis para hacer esto fácilmente.
Apple Mail – Apple Mail usa Webkit para mostrar sus emails. Este es también usado en exploradores como Google Chrome y Apple Safari. Apple Mail es uno de los proveedores de email más robustos y populares y rara vez te encontrarás con problemas de renderizado con él.
¿Cómo puedo hacer felices a todos los proveedores de email?
Una cosa que debes recordar es que no podrás lograr que tus emails sean renderizados al 100% en todos los clientes sin invertir horas de diseño y comprobaciones. Averigua cuales son los 2 o 3 proveedores que usa la mayoría de tus clientes y diseña tus emails para ellos.
Para evitar duplicar esfuerzos, crea plantillas de email que puedas editar y reusar en tus campañas habituales.
Es probable que ya hayas notado una tendencia en mis entradas de blog: haz pruebas, pruebas y más pruebas. Una vez que hayas creado estas plantillas, ¡asegúrate de ponerlas a prueba en diferentes plataformas y dispositivos para comprobar que estén optimizadas para tus clientes!
