David Andersen

David Andersen

No tenemos que decirte cuán importante es tener un diseño que sea amigable con todos los dispositivos – los números hablan por sí mismos. Hoy en día, 65% de los correos electrónicos son abiertos primero en un dispositivo móvil. Y con el 75% de los lectores con una alta probabilidad de eliminar correos que no están optimizados para la tercera pantalla, la verdad es que sólo tienes una oportunidad de transmitir tus mensajes a tu público. Eso significa: adáptate a tu entorno.

Aquí hay algunos consejos sobre cómo diseñar tus correos de forma adaptable y así hacer que sean más eficientes en todos los tipos de plataformas:

Manténlo sencillo

Desde el momento en que estás comenzando a crear los primeros bocetos para el diseño gráfico de tu correo, ten una palabra en mente: simplicidad. Mantener tu diseño sencillo es el primer paso hacia crear un diseño de correo que funcionará en la mayor cantidad posible de dispositivos y resoluciones de pantalla. Y cuando decimos sencillo, queremos decir eliminar cualquier elemento innecesario del diseño gráfico. Piensa en las partes esenciales de tu diseño y quédate con ellas. Deshazte de todo lo que sea redundante o irrelevante para el mensaje central de tu correo.

Esto también se aplica al uso de imágenes. Asegúrate de que tu correo no esté atiborrado de imágenes e intenta limitar la cantidad usada en tu diseño. También considera el uso del texto: haz que sea corto y preciso, y utiliza párrafos cortos de manera que los lectores pueden ojear tu correo de manera fácil y rápida. Quizás quieras probar cuál es el largo de texto apropiado para tus lectores y después de cuánto tiempo la atracción comienza a decaer.

Ejemplos:

square

Aquí hay un ejemplo de un diseño de correo sencillo, hecho por Square. El correo sólo contiene las imágenes y bloques de texto esenciales, y funciona bien sobre un dispositivo móvil, como se ve aquí.

amazon

Este correo de Amazon hace uso de una variedad de elementos diferentes – textos de diferentes tamaños, enlaces, botones, imágenes – sin embargo, no está optimizado para una pantalla pequeña.

Adapta un diseño de una sola columna

Debido a que la mayoría de los dispositivos actuales tienen un diseño de pantalla vertical y son más bien usados mientras se sostienen verticales, no hay mucho espacio para diseños de correo amplios. Por lo tanto, los correos que son diseñados con columnas múltiples pueden ser un tema complicado cuando son visualizados en estas pantallas más pequeñas. Para manejar un diseño amplio, los navegadores móviles de correo encogen todo en los correos, lo cual hace la lectura difícil para los usuarios.
Como solución, diseña tus correos solamente con una columna. Al hacer esto, puedes estar seguro que los navegadores móviles y los clientes del correo puedan visualizar los contenidos de tu correo de manera correcta y en las proporciones adecuadas. Un correo de una sola columna es similar a las aplicaciones móviles nativas ya que los usuarios sólo deben desplazarse hacia arriba o abajo, así haciendo la experiencia más sencilla e intuitiva para el usuario.

Ejemplos:

ryanair-copy

Este ejemplo de Ryanair muestra cómo un correo de columnas múltiples se ve en una pantalla más pequeña. El teléfono ha sido astutamente programado para encoger automáticamente las imágenes y el texto para que quepan en la pantalla, pero esto hace que el correo sea difícil de leer.

producthunt

Este boletín informativo de Product Hunt utiliza una sola columna, haciendo que el correo sea fácil de leer en dispositivos móviles.

Haz que tus llamadas a la acción sean claras y fáciles de cliquear

Un elemento crucial de cualquier diseño de correo es la llamada a la acción (CTA, siglas en inglés), la cual se añade para alentar a los lectores a cliquear sobre el botón o imagen. Al diseñar los CTA para diseños adaptables, es especialmente importante tener en cuenta las diferentes pantallas y plataformas en las que tu correo puede verse para asegurarse que el CTA funciona en una variedad de dispositivos.

Al crear tu diseño gráfico, asegúrate de que tus botones CTA sean grandes y destaquen con un color que contraste con el fondo de manera que se puedan identificar fácilmente en tu correo. Para hacer que tu CTA funcione tanto en dispositivos móviles como en ordenadores, asegúrate de que sea lo suficientemente grande como para ser pulsada por un dedo.

Ejemplos:

airbnb
duolingo

Aquí hay buenos ejemplos de Airbnb y Duolingo que hacen uso de CTA que llaman la atención y son lo suficientemente grandes para que los usuarios móviles las pulsen en una pantalla más pequeña.

Consejo adicional:

No te olvides de probarlo

Una vez que has creado tu diseño, es esencial que lo pruebes en diferentes escenarios. Visualiza tu diseño en una variedad de tamaños de pantalla, resoluciones y dispositivos para ver cómo funciona. Esto te dará la oportunidad de hacer cambios donde sean necesarios antes de que tu diseño sea implementado.