Plantillas de Email Responsive
Yacarlí Carreño · 28 Sep, 2015 · Recursos · 4 min
Con la variedad de dispositivos desde los cuales nos conectamos en la actualidad, adaptarse es obligatorio. Por eso te damos consejos para hacer email marketing con plantillas de email responsive.
Cada vez coexisten mayor variedad de dispositivos desde los cuales nos conectamos a Internet. Cada vez más emails son abiertos desde dispositivos móviles. En esta era multidispositivos y de hiperconexión, la realidad demanda emails responsive: que puedan ser leídos correctamente desde cualquier dispositivo, sin perder el mensaje ni el diseño.
Email Marketing y plantillas responsive
Como sabes, nuestras plantillas se adaptan automáticamente a cada dispositivo, para una visualización óptima. Entra en nuestra plataforma, regístrate gratis (si aún no eres miembro) y revísalas.
Ya hemos hablado de la importancia del móvil para las ventas a través del email marketing y dejado algunos consejos. También hemos comentado sobre la nueva tendencia: el email marketing wearable, o para llevar. En esta ocasión, queremos profundizar en las claves de las plantillas responsive.
El diseño responsive:
Se consigue a través de una mezcla de técnicas, media queries, plantillas y fluid images, para garantizar la óptima visualización en diversas plataformas.
¿Por qué el diseño responsive?
Cada vez más emails se abren desde los móviles, y aún muchos de ellos son leídos con dificultad. Cada vez más veces al día revisamos nuestros correos desde dispositivos diferentes. La mayoría de los correos que vemos desde el móvil, no pueden ser visualizados correctamente.
¿Qué es posible gracias a las plantillas responsive?
- Cambiar las jerarquías y organización de los contenidos de acuerdo al dispositivo desde el cual se visualice.
- Revolucionar la experiencia de navegación.
- Ampliar fuentes adaptándose a las necesidades de las pantallas.
- Cambiar los colores.
- Cambiar el diseño.
- Readaptar el tamaño de las imágenes (escalar).
- Completar y armonizar los espacios (llenos y en blanco).
- Cambiar o esconder contenidos.
- Crear una única newsletter independiente del dispositivo y la resolución del mismo ahorrando costes.
- Mejorar la legibilidad y usabilidad en dispositivos móviles, al evitar que tener que hacer zoom para para leer correctamente la newsletter o poder pulsar en el botón o enlace de acción de una forma más sencilla.
¿Cómo implementar las plantillas de email responsive?
- A la hora de hacer una newsletter responsive, ten en cuenta el tamaño de la pantalla de los dispositivos móviles, y que estos son táctiles.
- Haz el tamaño de la letra más grande para que sea visible sin dificultad desde un móvil. Se recomienda que la fuente sea de al menos 14px.
- Agranda el tamaño de los botones y enlaces de acción para que el usuario no tenga problemas a la hora de pulsarlo con el dedo en un dispositivo táctil.
- Escala las imágenes para que se adapten a la resolución de la pantalla del dispositivo.
- Cambia la estructura para que sea de una columna y lineal para facilitar la lectura desde móviles.
- Elimina el contenido que no sea indispensable como anuncios o contenido relacionado poco relevante.
- Haz un diseño simple y con un mensaje conciso y claro que se vea en el primer pantallazo para que llame la atención del lector y provocar que pulse el botón de acción.
- Declarar la meta etiqueta viewport en el <head>, con los valores width=device-width para que el dispositivo use su ancho real e initial-scale=1 para que por defecto se cargue el email sin zoom.
- Los emails con responsive hacen uso de las media queries de CSS, que son una serie de reglas condicionales que se basan en la resolución de la pantalla del dispositivo para aplicar unas reglas de estilos u otras. Mediante el uso de las media queries conseguimos adaptar el diseño de nuestros emails a cualquier dispositivo.
- Los tamaños de corte que se suelen tomar como mínimo suelen ser 480px, 768px y 1024px. Siendo 480px el corte para móviles en vertical, 768px el corte para tablets en vertical y móviles en panorámico y 1024px el corte para escritorio y tablets en panorámico.
- Para que no se estire a todo el ancho de la pantalla en monitores con resoluciones grandes, podemos limitar el ancho del email utilizando el atributo max-width en nuestra tabla o elemento contenedor, estableciendo el número de píxeles al que queremos que se extienda como máximo.
- Para hacer que las imágenes se escalen y se adapten al ancho de su contenedor tenemos que establecer su ancho al 100%.
- En los emails, las pantallas son las que definen el media query (CSS) que se usa, sobre la base de su tamaño.
- Puede haber muchos o pocos estilos, según el estilo establecido para el tamaño de la pantalla.
- Cada media query (CSS) específica el tipo de elemento que debe contener (la tabla entera o solo una de las celdas). Todo esto debe ser predefinido en el HTML.
- No olvides probar la visualización de tu email desde varios dispositivos y clientes de correo para verificar que los mensajes se desplieguen tal y como lo has planeado.
- Con la ayuda de estas plantillas es posible simplificar tu mensaje y hacerlo más amigable para leer e interactuar incluso desde pequeñas pantallas.
- El diseño responsive te permite incrementar la usabilidad de tu email, aumentar tus tasas de apertura, e incluso mejorar el CTR.
Dispositivos:
Las plantillas de emailing responsive son soportadas por:
- iOS mail app.
- Android 4.X Email/OEM app.
- Windows phone 7.5.
- Blackberry 057 + Z10.
Cuidado:
No son soportados por:
- iPhone Gmail app.
- iPhone Mailbox app.
- iPhone Yahoo! Mail app.
- Android Gmail app.
- Android Yahoo! Mail app.
- Blackberry OS 5.
- Windows Mobile 6.1.
- Windows Phone 7.
- Windows Phone 8.
Muchas veces se cree que es el dispositivo o su sistema operativo los que determinan la configuración de la plantilla y no es así. Es la aplicación usada para visualizar los emails la que lo determina.
Para crear tus plantillas de email responsive, no esperes más: entra en nuestra plataforma, crea tu campaña, ¡y prueba! Con nuestro editor responsive crear una compleja newsletter te resultará muy sencillo; arrastra los módulos que quieras y personalízalos a tu gusto. Además, puedes utilizar multitud de plantillas prediseñadas que ofrecemos para evitar que pierdas tu tiempo en crear una desde cero. No te preocupes por donde van a leerse tus emails, el boletín se adapta a cualquier dispositivo y resolución, gracias a nuestras plantillas responsive.
Tú creas el contenido. Nosotros lo enviamos.
