Cómo diseñar correos electrónicos para un primer enfoque móvil
Publicado: 2015-05-21Estamos peleando la buena batalla, que es la batalla interminable del flujo constante de correo electrónico. No importa a dónde vayamos o qué dispositivo tengamos, los correos electrónicos pueden encontrarnos en cualquier lugar. Lo más probable es que reciba diez correos electrónicos más después de leer este artículo. Y como diseñadores, estamos en ambos lados de la bandeja de entrada: recibimos correos electrónicos constantemente, pero también somos responsables de diseñar y crear los diseños de correo electrónico reales.
No importa a quién se dirija con su correo electrónico, el objetivo es brindar la mejor experiencia de usuario al enviar correos electrónicos a suscriptores, clientes y prospectos. Y debido a que la mayoría de los correos electrónicos se abren en dispositivos móviles, debemos diseñar correos electrónicos que se adapten a cualquier dispositivo en el que puedan abrirse.
Nos hemos acostumbrado tanto al diseño web receptivo y a las aplicaciones móviles de primer nivel que a menudo damos por sentado que podemos elegir cualquier dispositivo y diseñar una experiencia a medida. Con el correo electrónico, las cosas no son tan cortas y secas. En términos de tecnología, está a años luz del diseño web moderno. Necesitamos diseñar con atributos HTML, diseños basados en tablas y estilos en línea, que no se garantiza que se comporten de la misma manera en cada cliente de correo electrónico.
Diseño de correo electrónico para todos los dispositivos, ¿cuáles son mis opciones?
Antes de ir y desempolvar su colección de CD-ROM, recuerde que existe la esperanza de diseñar un correo electrónico "receptivo" exitoso, incluso con las limitaciones. La creación de un correo electrónico realmente receptivo es sin duda una opción, pero es importante considerar estos tres enfoques al crear un primer diseño móvil exitoso:
- Diseño escalable
- Diseño fluido
- Diseño de respuesta
Para elegir el enfoque que mejor se adapte a sus necesidades, es importante comprender las diferencias y limitaciones entre estas tres formas de diseño. Tomar una decisión requiere conocimiento sobre su audiencia y qué dispositivos y clientes de correo electrónico utilizan. Debido a que no todos los clientes de correo electrónico ofrecen la misma compatibilidad con CSS, esto ayudará a determinar qué enfoque servirá mejor a sus usuarios.
Diseño escalable
Los diseños de correo electrónico escalables son versátiles porque se pueden leer y hacer clic en todos los tamaños de pantalla. Esta es una excelente opción si su audiencia tiende a abrir sus correos electrónicos en una variedad de dispositivos: móvil, tableta y computadora de escritorio.
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <p>Email content goes here.</p> </table>
Esta opción suele ser la más fácil de implementar, ya que no utiliza consultas de medios y no hay anchos de tabla que deban ajustarse. Una ventaja es que no hay una gran curva de aprendizaje al diseñar este tipo de correo electrónico. En la mayoría de los casos, el dispositivo móvil es el dispositivo más común para leer el correo electrónico, y esto hace que sea fácil asegurarse de que las consideraciones móviles se hagan primero. Los botones más grandes, el texto fácil de leer y las llamadas a la acción claras dan prioridad a los dispositivos móviles para adaptarse a las necesidades de un tamaño de pantalla más pequeño.
El diseño de correo electrónico escalable puede ser limitante en el hecho de que tiene que ser de una sola columna para que funcione bien en todos los dispositivos. La razón es que, si el diseño tuviera varias columnas, estas se volverían muy pequeñas en los dispositivos móviles, lo que afectaría la legibilidad. Sin embargo, si se desplaza por su bandeja de entrada, verá muchos diseños de una sola columna porque son muy comunes.
El contenido es clave para cualquier correo electrónico, por lo que el tamaño del texto debe tener un tamaño que funcione bien para dispositivos móviles y también en pantallas más grandes. Con la mayoría de los clientes de correo electrónico, todo el correo electrónico llenará la pantalla para que el usuario no tenga que desplazarse verticalmente. Sin embargo, aún se recomienda que la información clave y la llamada a la acción se coloquen en la parte superior izquierda del correo electrónico, en caso de que el correo electrónico no llene la pantalla como se esperaba.
Diseño fluido
Es posible que esté familiarizado con los diseños "líquidos" del diseño web. Los componentes de diseño tienen anchos porcentuales y se ajustan a la resolución de la pantalla del usuario, manteniendo esos mismos anchos. El diseño de correo electrónico fluido utiliza esta misma idea.
Esta opción de correo electrónico cierra la brecha entre una opción escalable y una verdaderamente responsable. Se debe hacer un diseño más inicial que con la opción escalable. La razón de esto es que el tamaño basado en porcentajes hace que el ancho de las tablas y las imágenes se adapten al tamaño de pantalla en el que se ve el correo electrónico. Las tablas no alteran el diseño en diferentes tamaños, pero el contenido fluye y llena el espacio. Esta es una excelente opción para los correos electrónicos que contienen mucho texto, ya que hay menos control sobre cómo se relacionan la copia y las imágenes entre sí. Todavía es una buena idea mantener el diseño simple, preferiblemente un diseño de tabla única para mantener la legibilidad del correo electrónico como primera prioridad.
¿Recuerdas que dijimos que esto cierra la brecha entre fijo y receptivo? La razón es que el tamaño debe restringirse para pantallas más grandes. Si el correo electrónico se vuelve demasiado ancho, las líneas de texto se vuelven demasiado largas visualmente y queremos asegurarnos de que nuestros lectores puedan leer fácilmente nuestro correo electrónico. Envolver el contenido de su correo electrónico en una tabla contenedora de ancho fijo ayudará a que aparezca en pantallas de mayor tamaño. Luego, una útil consulta de medios apuntará a tamaños de pantalla más pequeños.
<table border="0" cellpadding="0" cellspacing="0" width="525" class="wrap"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <p>Wrapping table will help on larger screens.</p> </table> </td> </tr> </table>
Ejemplo de consulta de medios para dispositivos móviles:
@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}
correo electrónico receptivo
Tomemos lo que sabemos de los correos electrónicos escalables y fluidos y agreguemos algunas reglas más. Responsive le permite tener más control sobre lo que se presenta en diferentes puntos de interrupción con consultas de medios CSS. Con esta opción, se pueden cambiar los diseños y también se pueden personalizar otros elementos con estilos condicionales para puntos de interrupción específicos.
Aquí hay un ejemplo de una consulta de medios para un diseño receptivo:
@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
Al igual que las otras opciones, no está limitado a una columna o diseños simples. Los correos electrónicos pueden ser más complejos, con menos restricciones en el diseño y la cantidad de imágenes. Por ejemplo, los diseños de correo electrónico pueden tener varias columnas en dispositivos más grandes, pero una sola columna en dispositivos móviles. El tamaño del texto, las imágenes y casi todo lo demás se puede optimizar para obtener la mejor experiencia.
Antes de crear diseños complejos con múltiples consultas de medios, es importante hablar sobre algunas de las ventajas y desventajas. Las consultas de medios no funcionan en todos los clientes de correo electrónico. De hecho, el soporte es bastante limitado. De acuerdo con la lista de soporte de consulta de medios de Litmus, la aplicación Android Outlook.com, el cliente nativo de Android 4.x y iOS (iPhone/iPad) actualmente los admiten. Estos se pueden utilizar al máximo de su potencial si la mayoría de sus espectadores son usuarios de dispositivos móviles y tabletas.
Otras consideraciones de diseño
Antes de comenzar a crear el diseño de su correo electrónico, es importante observar los análisis para determinar qué clientes de correo electrónico y dispositivos utilizan sus usuarios. Se recomienda verificar esto con frecuencia y dejar que su enfoque de diseño evolucione a medida que cambian las cosas. Incluso con limitaciones, el correo electrónico está evolucionando, por lo que es importante mantenerse al día con lo que se admite actualmente.
Aquí hay algunos recursos excelentes para leer más:
- CSS específico para móviles
- Futuro del correo electrónico
- Correos electrónicos de iPhone y Android
La buena noticia es que es posible un primer enfoque móvil con las limitaciones actuales de los correos electrónicos. Incluso si el diseño no es la forma más real de "responsivo", con solo unos pocos porcentajes específicos y algunas consultas de medios, creará un diseño de correo electrónico que seguramente impresionará, sin importar el dispositivo. En la mayoría de los casos, la mayoría de los usuarios revisan el correo electrónico en dispositivos móviles, por lo que adoptar un primer enfoque móvil se convierte en una base sólida para el diseño de su correo electrónico.