Podemos afirmar que, hoy en día, los usuarios digitales nos hemos vuelto tan, pero tan exigentes, que ya no nos andamos con rodeos: si recibimos -en nuestra bandeja de entrada de correo electrónico- unos 20 o 30 emails al día, y tenemos la «paciencia» de abrirlos todos, si uno de ellos no presenta un diseño responsive, lo más posible es que, directamente, lo tiremos a la papelera, ¿o no?

Por eso, se torna tan importante para las marcas contar, desde el inicio, con diseños de email totalmente responsive. Es más, no sería para nada sorprendente que, si vamos a diseñar -con nuestro equipo creativo-, ya sea una newsletter, post o incluso landing o página web, iniciemos nuestros wireframes y layouts directamente en formato mobile, adaptando después ese diseño al formato desktop. ¿Por qué? La respuesta a esto es fácil: porque, hoy en día, prácticamente todos los usuarios accedemos a nuestras consultas web a través de nuestro dispositivo smartphone.

E, impulsados por esta razón, en nuestro artículo de hoy vamos a darte una serie de tips para que sepas, perfectamente, cómo crear una newsletter responsive desde el principio.

Guía para crear emails responsive

Comienza con una plantilla de newsletter responsive

Antes de iniciar cualquier tipo de diseño, es importante partir de un layout que nos permita visualizar, esquemáticamente, el diseño de nuestro contenido; al igual que hacemos con los wireframes cuando vamos a empezar a diseñar y programar una landing page o página web.

Y, por supuesto, debemos tener muy presente que las pantallas de los dispositivos móviles cuentan con un diseño vertical, lo que nos obligará -queramos o no- a reducir el tamaño de todos aquellos recursos que dispongan de un tamaño mayor, o sumamente apaisado u horizontal.

#ctaText??#  Los beneficios desaprovechados de los emails de agradecimiento

Por tanto, a la hora de realizar nuestro layout te recomendamos optar por un diseño con una sola columna, ya que -de esta manera- te asegurarás que los navegadores y los servidores de correo electrónico se adapten a la perfección al diseño que estás mandando, y que será visualizado por tu comunidad de manera correcta.

Elige el tamaño adecuado de imágenes para tu diseño

Y, por supuesto, no olvides nunca incluir un Alt Text, que, dicho en otras palabras, hace referencia al texto alternativa que incluimos en una imagen, para que sea mostrado en el hipotético caso de que la imagen, por alguna razón, no pueda visualizarse en la pantalla del dispositivo del usuario. Así, le informarás de que, en ese lugar, debería aparecer una imagen pero que no es posible que se visualice.

También es importante que evites llenar o cargar demasiado tu newsletter de imágenes: porque, en primer lugar, el texto es necesario (aunque deba existir un equilibrio razonable, para que no «aburras» en exceso a tu usuario) y para que, también, evites -por ejemplo- el escenario de que el usuario, por cualquier razón, no pueda visualizar las imágenes y, como has cargado el diseño de estas, al final no pueda visualizar prácticamente nada de tu comunicado.

Tus llamadas a la acción (o CTA) deben ser ad hoc a una newsletter responsive

Como sabemos, uno de los elementos que nunca (bajo ninguna razón) deben faltar en una newsletter son los CTA, o llamadas a la acción que, dicho en otras palabras, se pueden definir como esos botones que, haciendo clic sobre ellos, nos llevarán a convertir la acción, ya sea para culminar una compra, cerrar un servicio, descargar un documento, etc, etc. Por eso, es importante que esos botones estén visibles en tu diseño y que, por supuesto, se adapten a tu formato responsive.

Porque, por ejemplo, imaginémonos que no tenemos en cuenta el formato responsive en una newsletter y lanzamos la misma sin pensar en que el usuario que está al otro lado no va a poder visualizar de primeras el CTA, teniendo que navegar o moverse dentro del propio diseño para llegar al botón. ¿No crees que, de primeras, esto ya generaría cierto rechazo por parte de éste? Te recomendamos que no dejes que esto llegue a suceder, y coloques tu CTA visible y centrado, directamente en un layout vertical adaptado a mobile.

#ctaText??#  ¿Emails en texto plano o HTML? Pros y contras

Adapta tus textos a un diseño responsive

Al igual que sucede con los CTA y las imágenes, también es importante que los textos que coloques en tu diseño cuenten con una jerarquía y prioridades predeterminadas que hagan que el mensaje quede claro de primeras, en el primer momento en que accede a tu email; es decir, que sin necesidad de hacer scroll down, pueda leer qué es lo que está ofreciéndole tu newsletter y qué beneficio le reportará el hecho de seguir leyendo.

El tipo y tamaño de letra también es importante, sobre todo para asegurarte que estás utilizando una letra adecuada como para evitar que el usuario, por la razón que sea, necesite ampliar o ponerse las gafas para echar un vistazo a lo que tienes que contarle 🙂

Y, con esto, nos despedimos por hoy.

¡Sigue nuestros consejos y logra una buena newsletter adapta a responsive!

¡Suerte y hasta la próxima, querido e-marketer!

Suscríbete a nuestra newsletter

    ¡Contacta con nosotros!




    Puedes consultar aquí cómo tratamos tus datos y nuestra Política de privacidad
    Al pulsar el siguiente botón aceptas recibir comunicaciones comerciales perfiladas y Newsletters sobre nuestros productos y servicios.

    ¿Qué empresa trata sus datos? MITTUM Marketing Relacional S.L.
    ¿Por qué tratamos los datos que le pedimos? Tratamos sus datos para poder prestarle nuestros servicios y enviarle información sobre nuestros productos y servicios.
    ¿Cuál es la legitimación para este tratamiento de sus datos? Estos datos son necesarios para llevar a cabo la prestación de los servicios que haya solicitado a través del Sitio Web.
    ¿Se van a hacer cesiones o transferencias con sus datos? No, sus datos no serán objeto de cesiones a terceras empresas.
    ¿Se utilizarán sus datos para hacer perfilados o segmentaciones? MITTUM Marketing Relacional S.L. podrá utilizar técnicas de profiling para poder ofrecerle publicidad acorde con sus intereses.
    ¿Tiene dudas? Tanto si tiene alguna, o sugerencia, como si quiere darse de baja póngase en contacto con nosotros enviando un email a la siguiente dirección: hola@mvtechs.net