El diseño responsive es vital a día de hoy por los distintos formatos a los que se enfrenta un usuario desde su tablet, móvil e incluso ordenador. Ese diseño responsive en el email marketing y las landing pages es más que importante para una comunicación omnicanal con nuestros clientes.
Así que hay que tomárselo bien en serio para tomar distintas plantillas con distintos anchos para hacer llegar con el mejor diseño posible esas newsletters o esa landing page donde aterrizarán futuros clientes que queramos que conviertan desde nuestros anuncios en Google o en Facebook.
Diseño responsive en email marketing
El email marketing es una de las vías con las que anunciar ofertas en productos o esos nuevos posts creados en nuestro blog para así estrechar de una manera más profunda con todos nuestros seguidores.
Que esas newsletters sean responsive significa que se podrán ver perfectamente desde un móvil, una tablet o un ordenador. Así que hemos de procurar de tener las herramientas necesarias para que todos los elementos visuales sean lo suficientemente armoniosos para una lectura fácil de la newsletter.
Newsletter de IKEA
Responsive significa que siempre sea correcta la visualización de una página en distintos dispositivos. Para ello tenemos herramientas de email marketing que nos ayudan a probar la newsletter creada en distintos formatos y así ir modificando valores como el padding o el margen para así se vayan recolocando perfectamente según vayamos reduciendo el ancho de nuestro navegador.
En el diseño web con CSS se usan las «Media Queries» para diseñar un sitio web según el formato. Hasta 360px sería para un móvil, y desde las 360px hasta los 650px podríamos hacer modificaciones para todos aquellos usuarios que ven nuestra web desde una tablet.
Algunos de los principios para nuestras newsletters en email marketing son:
- Una jerarquía visual limpia: un título en H2 para dejar el texto en formato párrafo.
- Dos fuentes distintas: una para el título y otra para el texto consigue que se pueda leer mejor nuestra newsletter.
- El uso del color para diferenciar título, texto y otros elementos: gradualmente podemos pasar de un gris oscuro a uno más claro.
- Un CTA (Call to action) claro y que se distinga: si el logotipo de nuestra empresa es en rojo, el CTA podría en este color mientras el resto en un color complementario.
Os ponemos un claro ejemplo de un gran diseño responsive en una newsletter llevado a cabo por Filmin y que podéis ver en la imagen aportada. Tipografía clara en color blanco, y el texto en un gris muy claro pero que permite visualizar rápidamente los distintos espacios en los que se nos invita a leer si así lo queremos. El CTA no es que sea de otro mundo, pero ayuda con ese icono de reproducción y que nos hace ver lo que nos espera.
Los espacios suficientes en los márgenes, el blanco como el color principal para el texto y que se compagina perfectamente con el del logo de la marca; rodeado de ese gris que lo hace resaltar. Una imagen llamativa y que pone el punto a una newsletter que engancha desde el primer momento. También se dejan sus espacios en los laterales para que no se «coma» todo el ancho de la pantalla.
En la versión de escritorio se mantienen esos principios, incluso dejando un mayor espacio en los textos y dejando un gran margen en cada lateral:
El diseño responsive en una landing page
Los mismos principios pueden ser usados en el diseño responsive de una landing page. Es sumamente importante tomarse todo el tiempo del mundo en elegir adecuadamente la plantilla y seguir algunas reglas en el diseño:
- Simplicidad en lo visual: hablamos de mantener espacios en blanco para poner el foco sobre los CTAs.
- Imágenes bonitas y que enganchen al lector, sin olvidarnos de la resolución y que se vean perfectas.
- La importancia del color y que volvemos a recalcar.
Hemos de trabajar el diseño responsive de una landing page para un móvil, tablet y escritorio. Tomarnos el tiempo necesario para probar una y otra vez como cada cambio se ve en esos tres formatos, ya que podemos confiarnos y olvidarnos de que esos cambios hechos en CSS se verán de forma horrible en un móvil.
Landing Page de Hotjar
Es un trabajo que puede ser tedioso, pero es vital que nos tomemos el tiempo necesario para probar cada cambio. El uso de los márgenes laterales e intentar, en la medida de lo posible, de no faltarnos las reglas en los CTAs o botones de acción:
- Que la distancia en relación con el texto y el margen del botón sea progresiva en los tres formatos. Ni quede pequeño ni grande y que esté en la misma altura.
- La relación en el tamaño del botón CTA con el resto de los elementos donde esté ubicado ha de ser proporcionada.
Un claro ejemplo de ello es el trabajo hecho por Shopify en su landing page en escritorio y en la que podéis ver en la versión móvil. Atención al uso de los colores, los espacios en blanco y esos textos con sus apropiados tamaños y tipografía:
Una serie de consejos para tener una mejor landing page para vuestro negocio o tienda online y esas newsletter tan importantes para hacer llegar las actualizaciones y esas promos a vuestros usuarios.