Lo que los diseñadores de correo electrónico pueden aprender de los desarrolladores

El diseño de correo electrónico se ha quedado rezagado con respecto al diseño web durante años. Gran parte de esto se debe a que los clientes de correo electrónico no se han optimizado tan rápidamente para el cambiante panorama del diseño digital (especialmente el crecimiento del diseño receptivo).

Sin embargo, durante los últimos cinco años, los clientes de correo electrónico han comenzado a admitir funciones originalmente reservadas para la web. En primer lugar, fue anuncio en 2016 que Gmail ahora manejará CSS incrustado y consultas de medios, dos herramientas que permiten el diseño receptivo.

Los diseñadores de correo electrónico finalmente tienen la capacidad de autoinforme, lo que los desarrolladores web han aprendido durante las últimas dos décadas sobre el diseño moderno. Esto es lo que los diseñadores de correo electrónico pueden aprender de los desarrolladores web.

Proporcionar un diseño receptivo, especialmente en dispositivos móviles.

En 2019, se abrieron más correos electrónicos en dispositivos móviles que en la computadora. Los diseñadores de correo electrónico de hoy deben priorizar cómo se procesa el correo electrónico en dispositivos móviles sin sacrificar la legibilidad en computadoras de escritorio o tabletas.

Aquí es donde entra en juego el diseño receptivo. El diseño receptivo significa que el diseño se adaptará al tamaño de la pantalla y la resolución del dispositivo en el que se lee.

Le recomendamos que siga el ejemplo de los creadores de sitios web y cree tres plantillas diferentes para cada correo electrónico (o cada plantilla de correo electrónico): una para dispositivos móviles, una para computadora y otra para tabletas.

Entonces usa consultas de los medios para indicarle al diseño cómo renderizar en función de factores como el tamaño de la pantalla o el uso método líquido para clientes de correo electrónico que no admiten consultas de medios.

Echemos un vistazo a la diferencia. El correo electrónico que no responde se puede procesar en un dispositivo móvil con texto pequeño que es difícil de leer:

El diseño de correo electrónico receptivo, por otro lado, parece estar optimizado para la lectura móvil:

Mantenga el diseño simple para mejorar la legibilidad

Los desarrolladores web saben que cuando se trata de legibilidad en dispositivos móviles, lo mejor es un diseño simple. Las pantallas más pequeñas impiden una navegación cómoda en varias columnas o fuentes y diseños creativos.

Estas son las mejores formas de simplificar su diseño:

Utilice un diseño de una sola columna

Diseños de una sola columna aparentemente se procesan en pantallas más pequeñas como dispositivos móviles. Además, permiten a los diseñadores crear un único flujo de información que guía a los lectores a realizar la acción deseada (como hacer clic en un botón).

Este único flujo de información también es una mejor experiencia de usuario que tener que desplazarse por una página o hacer zoom en la pantalla de un teléfono inteligente pequeño para acceder a todo su contenido.

Reducir el desorden visual

Lío visual es cualquier elemento de diseño que se puede eliminar sin cambiar el impacto del mensaje.

Por ejemplo, las particiones que separan secciones en lugar de espacios en blanco pueden considerarse un desastre visual. Del mismo modo, los estilos de fuente como negrita, cursiva y varios títulos pueden considerarse un desastre si no son absolutamente necesarios para transmitir su mensaje.

Intente crear el diseño más limpio posible y probablemente mejorará la experiencia del usuario.

Solo tiene un botón de llamada a la acción

Habiendo dominado el arte del diseño orientado a la conversión, los desarrolladores saben que es muy importante no pedirles a sus lectores que elijan entre una variedad de acciones para realizar. En cambio, los diseñadores solo deben tener una llamada a la acción para que quede claro qué deben hacer los lectores a continuación.

Además, configure el CTA como un botón de contraste más grande, no como un texto con hipervínculo. El botón es más fácil de tocar con un dedo en un dispositivo móvil o tableta que el texto con un hipervínculo.

Por ejemplo, este correo electrónico de una columna de Planoly es visualmente mínimo y conduce directamente a un solo botón de llamada a la acción:

Tome prestadas estrategias avanzadas de diseño receptivo de la web

La creación de un diseño de una sola columna para dispositivos móviles es lo mínimo que los diseñadores de correo electrónico deben hacer para crear un correo electrónico receptivo. Sin embargo, los diseñadores que buscan mejorar aún más la experiencia del usuario en todos los dispositivos pueden utilizar estas estrategias un poco más avanzadas:

Utilice la divulgación progresiva en correos electrónicos con mucho texto

Cuando los correos electrónicos se escriben como un mini-ensayo, los lectores experimentan un desplazamiento de texto aparentemente interminable en un dispositivo móvil, aunque el correo electrónico no parece largo en una computadora.

Para resolver este problema, los diseñadores de correo electrónico pueden pedir prestado “Divulgación progresiva” estrategia de los desarrolladores web. Esto sucede cuando ciertos elementos del correo electrónico (como las secciones de texto) se ocultan debajo de elementos interactivos (como los encabezados) y solo se revelan cuando el lector los toca.

La divulgación progresiva permite a los lectores ver el correo electrónico como estructurado y mínimo y pasar a la sección que desean leer.

Superposición de texto sobre imágenes con texto en vivo + imágenes de fondo

Anteriormente, cada vez que un diseñador de correo electrónico quería mostrar texto superpuesto en una imagen, tenía que crear un gráfico independiente para la imagen y el texto superpuesto, y luego insertar ese gráfico en una plantilla de correo electrónico.

Esto funciona bien a menos que su cliente de correo electrónico no represente sus gráficos correctamente, y luego, de repente, a su mensaje le falta un encabezado clave. Además, requiere que los diseñadores creen diferentes gráficos para la red troncal de cada dispositivo, lo que supone un tiempo adicional.

En cambio, los diseñadores pueden tomar prestada una estrategia de los desarrolladores web: Utilice texto en vivo y antecedentes imagen para crear superposiciones de texto. Como resultado, la imagen de texto superpuesto se adapta automáticamente a cada dispositivo, sin riesgo de fallas en la reproducción.

Por ejemplo, Royal Children’s Hospital usó texto en vivo en una imagen de fondo para redactar este correo electrónico dinámico:

Fuente

Fin

Los clientes de correo electrónico finalmente se están poniendo al día con las plataformas web en términos de opciones de diseño. Los diseñadores de correo electrónico deben recurrir a los desarrolladores web para aprender cómo aprovechar estas nuevas oportunidades para crear correos electrónicos más receptivos, atractivos y fáciles de convertir.