Si quieres aprovechar del email marketing para empujar tu negocio online, tienes que poner mucha importancia en el diseño web. En particular, hay que trabajar para que tu correos tengan un responsive design (o sea, un diseño receptivo).

El email marketing hoy en día es muy utilizado para fidelizar los clientes y crear conversiones. El estudio Impact of Mobile Use on Email Engagement de Litmus y Mailchimp afirma asimismo que los correos con responsive design reciben más de 15% de clic con respecto a los correos con diseño no receptivo.

Por eso, en esta guía vamos a presentarte consejos y estrategias con el fin de ayudarte a mejorar el design de los correos que envías y, en consecuencia, aumentar las converciones.

Qué es el responsive design web en email marketing

Empezamos aclarando qué es el diseño web responsive.

La palabra “responsive” fue creada en 2010 por Ethan Marcotte y literalmente significa “adaptativo”, o sea capaz de adaptarse con facilidad al contexto. Esta palabra fue imaginada en relación al diseño de los sitios web, y sólo después utilizata en email marketing.

Los correos con resposive design son correos en los que el diseño se adapta y cambia correctamente en función del tamaño de una pantalla (desktop, mobile, etc). El objetivo es hacer que la visualización del mensaje sea eficaz evitando, por ejemplo, que el texto sea demasiado pequeño o que la imagen sea tan grande que el usuario tenga que reducirla para verla en su móvil.

Entonces, el design es responsive cuando el mensaje es simple para leer independientemente del dispositivo.

Elementos esenciales para visualizar un correo

La correcta visualización del diseño de un correo depende de dos elementos básicos:

• TAMAÑO DE LA PANTALLA: el tipo de dispositivo es el factor principal que considerar. Leer un correo en ordenador es diferente que leerlo en móvil, tableta o reloj digital. En el móvil o reloj, de hecho, las imágenes son más pequeñas y el texto comprimido.
• EMAIL CLIENT: se trata de los clientes que permiten enviar y recibir correos (Gmail, Outlook y Apple Iphone son los más famosos). Hay que tenerlos en cuenta porque cada uno presenta el correo en forma distinta y, en fase de creación del diseño, tienes que adaptarlo a cada cliente.

Elementos claves de un correo con responsive design

Entonces, ¿cuáles son los aspectos que cambian adaptándose a la pantalla? Aquí un pequeño elenco de los elementos principales:

• Tamaño y posición de las imágenes
• Tamaño y posición de las llamadas a la acción (los botones son visibles, bien posicionados y grandes)
• Texto: la fuente y el interlínea cambian en función de la pantalla para que el texto sea siempre claro y visible.
• Contenidos: los bloques de contenido se adaptan y se organizan, por ejemplo poniéndose en columna.

Responsive design: un poco de técnica

¿Cómo es posible que el contenido se adapte automaticamente a la pantalla?

Esto es posible gracias a las medias query CSS. Estas, en función del tamaño de una pantalla, son capaces de activar reglas diferentes.

Por ejemplo la regla puede ser: “si el correo se lee en una pantalla de 800 pixel, emplear el siguiente CSS”. Entonces, gracias a las indicaciones de las medias query, los elementos de un correo serán adaptados: ampliados, ordenados en columna o a lado, escondidos, resaltados, etc

¿Por qué es importante crear email con responsive design?

Ya está claro que cuanto más un correo es accesible y simple en la lectura, tanto más es capable de generar clic y conversiones. Pero, además de crear convesiones, existen también otras razones para que tu diseño necesita ser receptivo:

#1 Crece el número de personas que utilizan el móvil.
Es indispensable crear un diseño web responsive, sobre todo porque cada vez más personas utilizan el móvil en el día a día, también para leer los correos. La investigación realizada por Litmus, de hecho, afirma que en 2019 el 42% de los correos se abren por móvil.

#2 El responsive design permite la comprensión de los contenidos
Si envias boletines informativos o creas campañas DEM, para que el usuario realice la acción que deseas, es necesario que lea el contenido del correo. Entonces, es importante que todo sea perfectamente organizado en la pantalla, que existe la correcta proporción entre altura y anchura de las imágenes y que el dispositivo tenga una buena resolución. Gracias a estas indicaciones, el responsive design hace que el contenido se adapte y garantiza una comprensión clara.

#3 Reduce el porcentaje de rebote
Si el usuario no visualiza bien el contenido de un correo es muy probable que, en consecuencia, no va a responder a la llamada a la acción y, sobretodo, que va a eliminar el mensaje. De esta manera, puede realizarse un porcentaje de rebote muy alto.
Crear un diseño responsive puede evitar este problema.

¿Quieres más detalles sobre el porcentaje de rebote? ¡Lee nuestro artículo!

Best practice para un responsive design de éxito

En relación a lo que ya hemos dicho, está claro que para crear un correo con diseño web responsive es necesario tener en cuenta algunos elementos esenciales: el layout, las imágenes, las llamadas a la acción, etc.

Si quieres construir un diseño que se adapte a cada dispositivo tienes que seguir unas reglas básicas. Vamos a ver juntos las principales.

Tipo de layout

El layout de un correo accesible por el ordenador puede ser de qualquier tipo. En cambio, los dispositivos móviles tienen un diseño de pantalla vertical, por eso la solución es elegir entre dos tipos de layout:  

• Layout en columna: todos los elementos se posicionan en una sola columna y ocupan todo el espacio disponible. Es simple para leer y auyda el storytelling.
• Layout híbrido: eficaz para crear una jerarquía, tiene un header al principio y, a continuación, columnas con los otros contenidos.

De esta manera estás seguro de que los clientes vean el contenido del correo con la proporción correcta.

Llamada a la acción

La llamada a la acción (CTAUna Call to action (CTA), o llamada a la acción en español, es un botón con un mensaje textual sencillo y breve que invita al usuario a realizar una acción.... en inglés) es esencial para empujar los usuarios a realizar la acción deseada.

Por esta razón, cuando un usuario abre un correo tiene que entender pronto qué acción puede realizar y cómo puede hacerlo. Por lo tanto, el botón de la llamada a la acción tiene que ser visible.

Es aconsejable que el botón se encuentre en la parte alta de la pantalla para que sea visible cuando el usuario abre el mensaje, pero que no sea demasiado grande (en ordenador serà aceptable, en cambio en el móvil resultará molesto). Acuérdate también que no sea un botón textual y que sea escrito en HTML.

Imágenes

Las imágenes son eficaces para crear un correo dinámico y llamativo. No obstante, para que un diseño web sea responsive, es mejor crear equilibrio entre texto y contenido visual y, sobretodo, optimizar las imágenes. De hecho, estas necesitan pesar menos de 50 KB y tener una resolución de 72 dpi.

Estos datos son importantes porque si las imágenes son muy pesadas, puede ser dificil cargarlas y, en consecuencia, el usuario puede aburrirse en la lectura y eliminar el correo.

Además, a veces puede pasar que los usuarios no vean las imágenes. Los responsables, en este caso, son los email client que prefieren bloquear la visualización del contenido visual. Para superar este obstáculo es útil el Alt Text (texto alternativo), o sea un texto que describe la imagen y comunica la información contenida en esta.

Texto

En cuanto al texto, es conveniente que no sea largo. En el móvil, textos largos o con muchos cuadros de promoción contribuyen a crear un correo demasiado grande que puede aburrir el usuario.

Es importante que el lector entienda la esencia del mensaje, aunque no llegue al final del correo. Por eso, te aconsejamos que resumas las informaciones más importantes y útiles para lograr tu objetivo de negocio y que pongas los elementos relevantes en primer lugar. Además, utiliza una fuente legible y con un tamaño adecuado.

Gráfico

A nivel gráfico es oportuno crear una plantilla que en general sea coherente con la comunicación gráfica de la marca, del sitio web o del e-comercio. En esta manera, cuando un usuario abre un correo puede reconocer con más facilidad la marca y tener la confianza para seguir leyendo.

Otro consejo es evitar que se utilicen demasiados fondos. Utilizar una imagen de fondo puede ser una estrategia para que la pantalla nunca se quede en blanco. Pero, acuérdate de utilizarlos sólo para adornar el texto y no con un fin comunicativo.

Clientes de email

¡No te olvides de los clientes de email! Ya hemos dicho que es fundamental adaptar los correos a cada cliente. En el mercado hay muchos proveedores de email, por eso nuestra estrategia es adaptar el correo por lo menos a aquellos con la cuota de mercado más alta. Según la investigación de Litmus, estos son:

• Gmail – 27.8%
• Apple iPhone – 27.6%
• Outlook – 9.1%
• Apple iPad – 8.5%
• Apple Mail – 7.5%
• Yahoo! Mail – 6.3%

Cómo crear correos con responsive design

Crear correos con diseño web responsive no es simple porque, además de conocer todas las estrategias gráficas, es necesario conocer muy bien el código HTML.

Si no conoces este lenguaje, la solución es aprovechar de editors y software que pueden ayudarte en la creación de diseños receptivos. Mailsenpai, por ejemplo, es una plataforma de envío de newsletters que sirven a gestionar tus campañas de email marketing. Es útil para crear correos y bolentines informativos integrados, personalizados y con diseño adaptativo a cada tipo de pantalla.

Conclusiones

A conclusión, podemos afirmar que crear correos con responsive design es una gran oportunidad para desarrollar tu negocio online y offline.

Por eso, un pequeño resumen a seguir:

• Trabaja siempre pensando a todos los dispositivos (ordenador, móvil, tableta, reloj, etc.)
• Piensa en los diferentes clientes de email
• Crea equilibrio entre texto, imagen y llamadas a la acción
• Acuérdate de tamaño y la calidad de los elementos
• Utiliza toda tu creatividad de manera funcional

Y si tienes problemas, ¡dejate ayudar por Mailsenpai!
¿Ya lo has probado? ¡Dedica un momento para darnos tu opinión!

Si este artículo te ha gustado, ¡puedes compartirlos en todas tus redes sociales!