El diseño de los emails también debe ser responsivo. Con aproximadamente una tasa de apertura del 20%* en dispositivos móviles (y subiendo), el diseño responsive de los emails ya ha dejado de ser un tema “que tenemos que mirar”, y ha pasado a ser algo totalmente prioritario: “para ya” ;)
Nuestra primera recomendación a la hora de diseñar un correo electrónico es hacer 2 bocetos: uno para web y otro para móvil. De esta manera ya tendremos claro desde el principio la forma en la que se adaptará la creatividad en cada dispositivo (ordenador, tablet, smartphone...) y tendremos claro como maquetarlo.
Teniendo esto en mente, os damos algunos consejillos. ¡Vamos allá!
-
Keep it simple!
La primera cosa a tener en cuenta, tanto en el diseño como en el código HTML es la simplicidad. Una columna mejor que dos; si podemos quitar información redundante, la quitamos; call to action bien claro y visible... -
Del cursor al dedo
No olvidemos que no es lo mismo hacer clic con un cursor que con un dedo. Por ello, intentemos que los botones tengan un tamaño suficientemente grande como para poder ser tocados por un dedo. Nosotros recomendamos un alto de unos 45px. -
Lo importante, arriba
Al tener la limitación de ancho, es muy probable que el e-mail se alargargue. Para evitar que el usuario no vea la información más importante, es mejor situarla al principio. -
Mediaqueries
Las mediaqueries son una potente herramienta para adaptar nuestro contenido a los diferentes dispositivos. Además son muy fáciles de utilizar, solo tenemos que definirlos en la hoja de estilos y a partir de ahí jugar con los elementos. -
Flexibilidad
Un diseño flexible combinado con los mediaqueries hará que nuestro diseño se adapte a cualquier dispositivo. -
Si lo necesitas, esconde el contenido no esencial
Para las resoluciones de pantalla más pequeñas podemos aplicar una clase especial para que los elementos menos importantes se escondan. -
Hay cosas que no cambian
Como siempre, debemos seguir utilizando tablas, no utilizar estilos en línea, no utilizar javascript... Vamos, lo que todos ya sabemos :) -
Después de todo...
¿Hay algo que no funciona? Revisa que tengas puesto el meta viewport en el <head> de tu HTML...
Finalmente, decir que con todas éstas medidas conseguiremos que un email responsive pero siempre estaremos supeditados a las limitaciones de algunos webmails... Incluso en algunos casos nos lo podrían enviar a SPAM :(. Conociendo los pros y contra, toca valorar si se prefiere que el email se vea de forma óptima en cualquier dispositivo; o si se prefiere asegurar la recepción al 100%, aunque luego la visualización en algunos dispositivos no sea la ideal... Ya lo dicen, “no se puede tener todo en ésta vida”! ;)
* Datos de apertura de una newsletter durante el mes de enero de 2013, suma de las aperturas en Blackberry, Mobile Safari y Android.
