Bea Redondo Tejedor

Bea Redondo Tejedor

Head of Content

Antes, cuando recibía un correo electrónico que no se leía bien, le echaba la culpa al teléfono, lo sacudía o incluso recurría a la clásica, aunque milagrosa técnica de cerrar y volver a abrir la aplicación.

Eso era antes, cuando mi bandeja de entrada aún parecía algún tipo de paraíso digital inaccesible. Ahora, ¿cuántos correos electrónicos recibes al día? ¿20, 30, 100? Yo no sabría ni contarlos. Desde hace algún tiempo, si recibo un correo electrónico con una apariencia rara, con imágenes recortadas y bloques alineados de una forma tan extraña que recuerda a un Picasso, los elimino sin más. Y no soy la única: el 80 % de la gente eliminaría un correo electrónico que no se mostrase bien en su dispositivo móvil.

Por ello, en un mundo en el que gobierna lo móvil, en el que la gente como yo no valora todo el esfuerzo que hay detrás de tus boletines informativos y tus campañas, que se eliminan sin el menor atisbo de remordimiento, el diseño responsivo es crucial.

No obstante, escribir el código de un correo electrónico responsivo puede resultar confuso e indudablemente difícil de aprender. Por suerte, existen alternativas para lograr que el diseño de un email responsive resulte una tarea intuitiva. Cuando te sientes a diseñar tus correos electrónicos adaptativos, existe una serie de detalles en los que debes fijarte:

 

    1- El alineamiento es fundamental

A veces, al diseñar un correo electrónico, nos creemos unos artistas con nuestras columnas múltiples, fondos alucinantes con fotos y gifs de gatos… Todo eso para acabar tirando nuestro trabajo por la borda cuando los mensajes se abran en tabletas y teléfonos inteligentes.

Al optar por un diseño con una sola columna, evitarás tener que reajustar el diseño cuando el tamaño de la pantalla sea más reducido. En cuestión de dispositivos móviles, ¡la sencillez es tu aliada!

Echa un vistazo a algunos de los fallos que hemos sacado directamente de nuestra bandeja de entrada.

Aligment

 

    2- Proporción de imágenes y texto

Las imágenes (y también los gifs) son una forma fantástica de separar trozos grandes de texto. Sin embargo, las imágenes pueden ser un arma de doble filo en potencia. Aquellas que no se representan correctamente pueden aparecer demasiado grandes o pequeñas en algunos dispositivos, y pueden arruinar un fondo increíble o convertir tu anuncio en algo que no se puede leer.

Yeezy 10.04.43

También debes prestar atención a aquellas imágenes que sean demasiado grandes y no se carguen bien al utilizar planes de datos sin 4G. Edita y optimiza las imágenes para la Web antes de cargarlas y no olvides incluir texto alternativo.

IMG_2150 10.04.43

 

    3- Llamadas a la acción

Si no incluimos unas instrucciones claras para nuestros destinatarios, resultará difícil invitarles a nuestro sitio web o a las páginas del producto. En este punto es donde debemos estar más atentos a los lugares en los que colocamos enlaces a nuestras campañas de correo electrónico.

También es el motivo por el que las llamadas a la acción y los enlaces se deben poder identificar fácilmente y estar perfectamente orientados. Debemos pensar en el tamaño y en la posición: ni demasiadas, ni demasiado próximas.

Convierte las principales llamadas a la acción en botones de manera que se puedan pulsar fácilmente con un dedo en teléfonos y tabletas. Atención al tamaño, ¡todos sabemos que por ahí hay dedos bastante grandes! Intenta ser creativo en otros ámbitos y utiliza enlaces como llamadas a la acción secundarias dentro del texto, o convierte imágenes en enlaces en los que se pueda hacer clic.

IMG_2151 10.04.43

 

    4- Cuidado con el texto

Más de la mitad de los correos electrónicos que enviamos se abren en dispositivos móviles, a pesar de que un teléfono no es el mejor lugar en el que leer textos muy largos.

Antes de que lo adaptativo se convirtiera en un estándar, los correos electrónicos y los sitios web que se optimizaban para dispositivos móviles mostraban todos los elementos muy apretados en la pantalla, y no se hacían cambios adicionales en la disposición, el contenido ni las imágenes. Ahora hemos aprendido la importancia de los emails responsive y de adaptar estos elementos para asegurarnos de que nuestros mensajes se muestren de la mejor forma posible en cualquier dispositivo y en pantallas de todos los tamaños.

El texto es uno de los aspectos que deberíamos adaptar para asegurarnos de que la gente que abra nuestros mensajes en estos dispositivos no se sienta abrumada por fuentes de tamaños pequeños y párrafos interminables.

Sin embargo, aún hay por ahí correos electrónicos que parecen capítulos de una novela. Asumámoslo: nadie se va a leer esto.

IMG_2149 10.04.43

Consejo: Incluye un fragmento del texto e invita a los destinatarios a leer el artículo completo en tu blog.

 

    5- Jerarquía y prioridades

En un navegador web, existen distintas técnicas para captar la atención de los lectores: utilizar colores, imágenes llamativas, fuentes elegantes, etc. No obstante, cuando se trata de pantallas más pequeñas, como las de los teléfonos inteligentes, la jerarquía debe quedar clara para asegurarnos de que los lectores captan la esencia de nuestro mensaje, incluso aunque no lleguen hasta el final de la página.

Dado que la gente recibe un montón de correos electrónicos todos los días, la competencia es enorme y cada vez es más difícil que la gente lea los correos electrónicos enteros. Ese es el motivo por el que siempre deberíamos diseñar nuestros correos electrónicos teniendo en cuenta el orden de importancia, situando los elementos más relevantes en primer lugar.

 

¡EXTRA!

Estamos a punto de terminar: hemos creado un correo electrónico bonito y lo hemos probado en varios dispositivos; estamos listos para enviar… Espera. ¿Y las páginas de aterrizaje?

Aunque lo hayamos hecho muy bien y hayamos logrado captar la atención de los lectores, ¡todo el esfuerzo se puede ir al traste si la página de aterrizaje no es responsiva! Los estudios demuestran que aunque la mayoría de emails son abiertos en dispositivos móviles, en realidad la mayoría de las conversiones tienen lugar en las versiones de escritorio. Pon las cosas fáciles a tus lectores y asegúrate que de que se lleven una experiencia agradable, independientemente del dispositivo que utilicen.

 

¿Habías probado antes alguna de estas técnicas? ¿Tienes algún consejo para asegurarte de que los correos electrónicos sean responsivos? ¡Comparte tus ideas con nosotros en el foro de la Comunidad Mailjet y las incluiremos en las próximas publicaciones!