Desde los colores y tipografías hasta las imágenes y la disposición del contenido, el diseño influye en cómo los destinatarios perciben tus campañas de email marketing. La clave está en lograr un equilibrio entre lo estético y lo funcional: un correo bonito es genial, pero debe ser fácil de leer y llevar al usuario a realizar la acción que deseas (clic, compra, registro, etc.). 😉
¿Por qué importa el diseño?
El diseño de tu email es como la primera impresión en una entrevista: abre o cierra puertas. Un correo visualmente atractivo tiene más posibilidades de captar la atención del lector, transmitir tu mensaje y fomentar la interacción. Además, un buen diseño refuerza tu marca y genera confianza.
Vamos a ver porqué importa tanto el diseño a base a ejemplos de errores en campañas de mailings.
Error #1: Diseñar una plantilla de email en versión desktop
Ya lo habrás leído mil veces, pero lo repito. Tendemos a diseñar los emails en versión desktop (para ordenador, es decir la versión de 600px), cuándo tendríamos que hacerlo directamente en versión móvil. En el 2023, el 55% de los correos se abrieron desde dispositivos móviles (fuente: eMarketer), así que asegúrate de que tu diseño se adapte tanto a móvil cómo desktop.
Vamos a ver el ejemplo de Tripadvisor:
En este caso, para mejorar este email, podrían haber hecho:
- Un gif / hero que sea solo para versión móvil (ir rotando cada imagen). Se puede tener una imagen diferente para cada aparato/device. Si eso implica mucho trabajo (yo no soy partidario de hacerlo), se puede pensar una imagen que sea responsive, por ejemplo un gif con una imagen por segundo. ¿Pesará más? Sí. Pero también se verá.
- Texto (font-size) mínimo 16px para pantallas menores de 300px (o que no sea proporcional).
Y seguro que me dejo ideas de mejorarlo. También me diréis que el usuario puede hacer zoom. Claro. Pero no todos hacemos zoom.
Vale, otros tips para tener un template orientado a móvil:
- Utilizar una estructura de una sola columna para facilitar la lectura en pantallas pequeñas (en este caso, Tripadvisor sí lo hace).
- Imágenes y los botones se deben ajustar automáticamente al tamaño del dispositivo (no es el caso con Tripadvisor).
En general, tienes que tener en cuenta que cada proveedor de servicios de email (ESP) (como Gmail, Hotmail, etc.) lee de manera diferente el HTML y por lo tanto se visualiza de manera diferente en cada uno de ellos, ya sea en la App, en versión desktop o en versión móvil. Vaya, un quebradero de cabeza para diseñadores de plantillas para enviar emails.
Error #2: Que no sea responsive en Dark Mode
Otro error clásico. Aunque este “error” es aceptable. No todo el mundo utiliza dark mode (yo soy un pelín friki en este sentido, y si hay dark mode, pues mejor para mis ojos). Consulta qué es el dark mode, si no tienes ni pajotera idea de lo que te estoy hablando.
En Gmail lo puedes utilizar, y si no adaptas tu diseño a dark mode, pueden pasar cosas como estas:
¿Soluciones? En base mi experiencia, varios truquillos:
- Testea cómo se ve primero (si no puedes vivir con ello, pues tocará hacer hacerlo responsive)
- Usa sombra o bordes en las imágenes cómo logos: como en el caso del email de Mailchimp. Al haber un fondo claro, se le podría dar un borde negro o oscuro que daría mayor visibilidad.
- En Gmail por ejemplo puedes forzar el background en el color que quieras (muy útil para los headers). Es el caso del email de Idealista, al usar un logo negro, podrían haber forzado el color del header en lima.
Lectura obligatoria para los que quieren tener un master en dark mode:
Error #3: Un “above the fold” poco atractivo
¿Todavía importa el Above the Fold en email marketing?
Según un estudio de Nielsen Norman Group, aunque las personas pasan más tiempo viendo contenido «debajo del fold» (del 20% al 43% en una década), la mayor parte de la atención aún se concentra en las primeras pantallas de un correo (81%). En esencia, el «fold» ha evolucionado de ser un límite físico a unas pocas deslizadas del pulgar, pero sigue siendo un factor importante en cómo los usuarios interactúan con los emails.
Por esta razón, en email marketing sigue siendo clave colocar los elementos más importantes —como mensajes principales o llamadas a la acción (CTA)—en la parte superior del correo, ya que afecta de manera tremenda los principales KPIs de los emails, cómo el CTR y CTOR . Aunque el renacimiento de los emails largos demuestra que los usuarios están dispuestos a desplazarse, no hay garantía de que lleguen al final. Si envías un email – asegura que el mensaje que quieres transmitir está al principio.
Pero, si vas a hacer un email más extenso, estrategias como líneas diagonales, encabezados claros o avances interesantes en el asunto te ayudarán a animar a los lectores a seguir leyendo.
Recursos:
- Otra guía más de Litmus: Fold
Error #4: Usa fuentes legibles y responsive
Elige una tipografía como máximo y sigues estos consejos:
- Usa fuentes legibles (como Arial, Verdana o Roboto).
- Asegúrate de que el tamaño del texto sea cómodo para leer en cualquier dispositivo (16px para el cuerpo suele ser ideal). Este es el mismo caso que en el email de Tripadvisor que te he comentado más arriba.
- Evita abusar de las MAYÚSCULAS o cursivas, ya que pueden dificultar la lectura o tu email también puede acabar en el spam.
Error #5: Separación entre elementos o secciones
Otra clave en el diseño. La separación de los bloques o elementos de un email. Me da un ataque cuándo no se puede respirar entre sección y sección.
O cuándo todo está junto.
Lo que está claro, es que los bloques de contenido dentro de un email tienen que quedar claramente separados, para que el usuario entienda que vamos a otra sección o a otro tema. Dejar respirar a cada tema.
Dos maneras que se me ocurren:
- Usar un padding divisible entre 8 para separar elementos. Y ser consistente. Utiliza al menos un padding de 24 o 32px, dependiendo de tu estilo.
- Usa un color de fondo diferente en cada sección (en las webs se ve mucho).
Otro consejo más: No llenes cada rincón del correo con contenido. Los espacios en blanco ayudan a:
- Hacer más legible el contenido: el usuario no se siente abrumado.
- Dirigir la atención a lo importante (como los botones o las ofertas).
Error #6: Accesibilidad
Otro error muy pero que muy común y que no tenemos muy presente, es no cumplir con las reglas de accesibilidad. En 2025, la Directiva Europea de Accesibilidad (Directiva 2019/882) entrará en vigor. ¿Qué significa?
La UE se propone que, respetando el principio de igualdad de trato, las personas de edad avanzada y las personas con discapacidad tengan mejor acceso a distintos productos y servicios.
Vale. Entonces, ¿qué implica la ley de accesibilidad para los diseños en los emails?
Así en palabras mayores, podríamos decir que es necesario dar una mejor experiencia de usuario. Al email esto se traduce en:
- Mejores copies
- Mejores diseños
- Mejor código
Si la gente tiene problemas para ver, leer, hacer click o entender tu campaña de email entonces vamos mal. Para entender porqué hay que hacerlo (y no solo por el hecho de que es lo que hay que hacer), aquí van varias razones:
- Al menos 2,2 billones de personas en todo el mundo tiene algún problema de visión.
- En la tierra, 1 de cada 12 hombres y 1 de cada 200 mujeres experimentan daltonismo (en diferentes niveles)
- Entre 5 y 10% de la población es disléxica.
Vale, no vamos a enrollarnos más, porque sobre la accesibilidad en el email podemos dedicarle todo un artículo. Así que varias cosas a tener en cuenta para diseñar emails accesibles:
- Asuntos de los emails y textos deben ser concisos y fáciles de entender
- Utilizar una fuente fácil de leer
- Subrayar enlaces
- NO añadir textos en imágenes
- Utilizar texto alternativos para imágenes (útil si las imágenes no cargan o para usuarios con discapacidad visual)
- Separación entre contenidos
- Usar colores con contraste
Recursos:
Error #7: Diseño del CTA
Otro clásico. Los botones son los verdaderos protagonistas de tus emails: ¡guían al usuario hacia la acción que quieres que realice!
- Hazlos visibles: usa colores contrastantes que llamen la atención.
- Incluye suficiente espacio alrededor del botón para que sea fácil hacer clic, especialmente en móviles.
- Posición del CTA: Coloca al menos un botón cerca del principio y otro al final del correo para que el lector no tenga que hacer scroll de nuevo para arriba.
Bonus: Que tu email no sea un popurrí de colores
Elige colores que representen tu identidad visual y usa siempre la misma fuente. Evita utilizar miles de colores o diferentes tonos. Cuántos menos colores uses, más fácil será para tu lector y más fácil para ti.