5 secretos del e-mail responsive

 
 

En el entorno actual hiperconectado, los marketers utilizan todas las armas disponibles en su arsenal para conseguir que los mensajes lleguen a los destinatarios. A pesar del crecimiento de las redes sociales, el correo electrónico sigue siendo la herramienta más importante, ya que el 59 % de los departamentos de marketing de empresas B2B lo consideran el canal más efectivo para generar beneficios (BtoB Magazine).     

Sin embargo, teniendo en cuenta que el consumidor medio recibe entre 200 y 300 correos electrónicos al día (una cifra que no para de subir), hoy se requiere mucha más puntería para acertar en el blanco deseado.

Antes de disparar, los marketers tienen que tener en cuenta dos tendencias muy vinculadas entre si que afectan al e-mail:

■ El 48 % de los mensajes se consultan en un dispositivo móvil (Litmus).

■ El 71,2 % de los usuarios elimina los correos electrónicos si estos no se muestran correctamente (BlueHornet).

Vaya… Si tenemos en cuenta estas cifras, la conclusión parece bastante clara, el diseño responsive aplicado al correo electrónico es clave. Básicamente, nos referimos a newsletters con un diseño fluido que se adapte a cualquier dispositivo y con un aspecto atractivo que se muestre sin problemas.

Un número creciente de marketers ya ha captado este mensaje. En un estudio reciente de Forrester Research, el 72 % de los departamentos de marketing que utilizaban newsletters aseguraron que ya están utilizando diseños responsive. Asimismo, el 27 % afirmó que estaban planeando recurrir a este tipo de diseño o se encontraban interesados en hacerlo muy pronto.

¿Cómo se puede aplicar el diseño responsive a los correos electrónicos? Hay un gran número de elementos a tener en cuenta como DOCTYPE, media queries, viewport rendering y el uso de HTML, entre otras opciones. Todas estas prácticas recomendadas se recogen en el documento gratuito  "Diseño responsive aplicado al correo electrónico".

Mientras tanto, estos 5 secretos del diseño responsive en la creación de newsletters te ayudarán a dar los primeros pasos:

1. Utilizar un diseño de columna única

El correo electrónico se ve en una pantalla horizontal cuando se consulta en un ordenador. Por ese motivo, situar el texto y las tablas en paralelo es la mejor opción ya que permite optimizar el uso del espacio. Sin embargo, en el caso de los dispositivos móviles, no es una buena idea. En este entorno, los e-mails se muestran mejor en una sola columna, de arriba a abajo, ya que los usuarios tienden a situar sus smartphones en posición vertical.

Para poder adaptarse a estos consumidores, es recomendable diseñar en primer lugar la versión móvil del correo electrónico empleando un diseño de columna individual sin ancho fijo. Lo mejor es utilizar una estructura sencilla y alinear el contenido mediante tablas anidadas, imágenes o elementos cambiantes que añadan creatividad al diseño. 

2. Sacar partido a los pre-headers

El escenario típico de consulta del correo electrónico es aquel en el que un usuario se sienta temprano por la mañana a examinar los e-mails del día y desde la bandeja de entrada, selecciona los mensajes que va a abrir y los que va a eliminar. Para inclinar la balanza hacia tu lado, es recomendable diseñar un pre-encabezado potente. El pre-header es el resumen de texto que aparece junto al asunto del correo electrónico en la bandeja de entrada.

Es la ubicación ideal en la que incluir un argumento convincente que lleve al usuario a hacer clic en el mensaje. Entre las opciones disponibles, se puede resumir el contenido del mensaje (comenzando por la primera frase del correo electrónico), incluir los subtítulos del mensaje o reforzar la línea de asunto mediante un call to action  (CTA) convincente. Si decides utilizar esta última estrategia, es importante contar con un asunto igualmente atractivo para captar la atención de los lectores. 

3. Usar fuentes de GRAN tamaño y calls to action destacados

Utiliza fuentes de gran tamaño en el cuerpo del mensaje, para facilitar su legibilidad, e intercala títulos en negrita y subtítulos con colores. Asimismo, no olvides alinear el texto a la izquierda, ya que no todos los sistemas operativos ajustan el contenido para adaptarlo al tamaño de la pantalla. También es importante mantener una jerarquía vertical y situar los mensajes más importantes en la parte superior.

Invita a los usuarios a que toquen y cliquen las zonas correspondientes a los call to action, llamadas a la acción. Para estos CTA, las directrices sobre interfaz de usuario de iOS de Apple recomiendan un tamaño mínimo de 44 x 44 píxeles. Si lo hacemos de un tamaño adecuado, sin tener que ampliar el contenido, los usuarios podrán activar botones como "HAZ CLIC EN EL BOTÓN 'ME GUSTA' EN NUESTRA PÁGINA DE FACEBOOK", "SÍGUENOS EN TWITTER" o "DESCUBRE NUESTRAS NOVEDADES".

4. Usar las imágenes de forma responsable

Al incluir imágenes en el diseño de un correo electrónico, tenemos que tener en cuenta que no todos los gestores de correo electrónico las muestran de forma automática (algunos requieren autorización por parte del usuario), por lo que no es recomendable incluir todo el contenido del mensaje en imágenes. Asimismo, si no hay un contenido de texto mínimo, lo más probable es que se active el filtro de correo no deseado y el mensaje acabe en la carpeta de spam.

Además, los diseñadores para entornos móviles con experiencia prefieren utilizar en sus mensajes imágenes pequeñas, que consumen menos ancho de banda. Esto puede conseguirse incluyendo un media query para determinar cuál es el dispositivo de visualización, con instrucciones para mostrar imágenes de menor tamaño para su visualización en dispositivos móviles, con el fin de evitar tiempos de carga demasiado prolongados (puede encontrar más información sobre este punto en nuestro PDF gratuito "Diseño responsive aplicado al correo electrónico").

5. Probar el diseño antes de que llegue a los usuarios 

Aunque pueda parecer algo obvio, la mejor forma de evitar #displayfails es utilizar una herramienta para probar el diseño del e-mail. Hay herramientas de marketing digital como  Selligent Campaign que cuentan con opciones que permiten simular el contenido de los mensajes de correo electrónico en un entorno seguro antes de enviarlos a sus destinatarios.

Las siguientes páginas web también ofrecen entornos de prueba:

mattkersley.com/responsive Introduce la URL con el diseño responsive y podrás ver una vista previa disponible en varios tamaños.

resizemybrowser.com No todos los desarrolladores cuentan con todos los dispositivos necesarios para probar su diseño. Esta web cambia la escala del navegador a la resolución deseada.

pxtoem.com Convierte los píxeles a porcentajes para así poder elaborar un diseño responsive óptimo.
 

 ¿Listo para aprender más sobre cómo conseguir que tus correos electrónicos destaquen tanto en ordenadores como en dispositivos móviles? Descarga nuestro documento gratuito de directrices "Diseño responsive aplicado al correo electrónico".
 

 

Fuente de la imagen: Shutterstock (autor: Rawpixel)