Diseño responsive para email marketing y landing pages

En digitalDot tenemos claro que el diseño responsive es fundamental. La forma de visualizar los sitios webs ha evolucionado enormemente en los últimos años, el número de distintos dispositivos con distintas resoluciones de pantalla ha obligando a las webs a tener un comportamiento dinámico adaptando los diferentes elementos del sitio a todas las resoluciones posibles.

Esta variedad de dispositivos no solo afecta al diseño web sino que se debe tener en cuenta en la creación de campañas de email marketing o las landing pages.

Si lo que queremos es obtener más conversiones debemos poder mostrar nuestra landing page o nuestros mailings con el mejor diseño posible en todos los dispositivos, ya que habrá quien los visualice desde su móvil, tablet, ordenador portátil, de sobremesa con monitor full HD o incluso monitores retina o 4k.

El espectro de resoluciones es amplísimo y el diseño responsive trata de abarcarlo al completo.

Diseño responsive para email marketing

El email marketing es la técnica de comunicación directa con nuestros potenciales clientes, a través de esta estrategia de marketing online podemos ofrecerles ofertas, descuentos y otras fórmulas para la fidelización y el reconocimiento de marca.

Que estas newsletter sean responsive significa que se podrán ver perfectamente desde un ordenador, una Tablet o un móvil (el 55% de emails son abiertos desde smartphones o tablets y esta tendencia sigue en aumento).

El 55% de emails son abiertos desde smartphones o tablets ¡tenlo en cuenta para el diseño de tus campañas de #emailmarketing Compartir en X

Debemos procurar que el mensaje principal que queremos hacer llegar al cliente pueda ser visualizado y entendido perfectamente desde cualquier dispositivo, mediante un diseño armonioso, manteniendo su intencionalidad en todos los casos.

Existen diversas plataformas para crear email marketing que nos permiten desarrollarlos con un diseño adaptable a los distintos dispositivos, donde nosotros mismos podremos modificar los parámetros para adecuarlos a cada tamaño de dispositivo y que siempre tenga el aspecto atractivo y funcional que debe. Una de estas plataformas es Stripo.

Para diseñar una campaña de email marketing es necesario conocer los estándares que definen los distintos grupos de resoluciones de pantalla: De 320px a 768px sería móvil, hasta 1200px Tablet, hasta 1440 HD y de 1440 a 1920 Full HD.

Las newsletter que creamos en digitalDot cumplen estos principios:

• Una jerarquía visual limpia.
• Dos fuentes distintas: una para el título y otra para el texto.
• 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 utilizar este color mientras el resto de los elementos usarían uno complementario.

El diseño responsive para una landing page

Una landing page, o página de aterrizaje, tiene como finalidad que el usuario realice una determinada acción. En la mayoría de los casos lo que se pretende es que nos dejen sus datos para, posteriormente, utilizarlos para campañas de publicidad, como el envío de promociones o información. Si queréis diseñar vosotros mismos una página de aterrizaje lo podéis hacer siguiendo este tutorial: Cómo crear una langing page con WordPress.

No olvidéis 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 atractivas, con las que se identifique el usuario, sin olvidarnos de la resolución y que se vean perfectas.
• La importancia de la elección del color y que volvemos a recalcar porque, los colores, como sabemos, influyen en la toma de decisiones por parte del usuario.

Hemos de trabajar el diseño responsive de una landing page para un móvil, tablet y escritorio y tomarnos el tiempo necesario para probar una y otra vez como cada cambio se ve en esos tres formatos.

En la medida de lo posible, debemos atender 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 a 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.

Si queréis tener mejores conversiones en vuestras campañas de marketing digital, no dudéis en contactar con el equipo de digitalDot, además de resolver vuestras dudas os harán diseños de landing page y email marketing más atractivos.