Cómo diseñar un correo electrónico HTML receptivo
En los últimos años, el uso creciente de dispositivos móviles ha provocado una evolución, o quizás una revolución, en la forma en que nos acercamos a la entrega de contenido a los usuarios en línea. El objetivo final es una web fluida, móvil y independiente del dispositivo, y una escuela de pensamiento ha surgido como el medio ampliamente favorecido para este fin: el diseño receptivo. Sin embargo, mientras que el zeitgeist receptivo ha cobrado fuerza, el diseño y desarrollo del correo electrónico ha luchado por mantener el ritmo.
Esto se debe, en parte, al hecho de que los correos electrónicos HTML son un medio notoriamente complicado para que los desarrolladores trabajen. La tecnología arcaica del cliente de correo electrónico y la falta de estándares han hecho que muchas de las reglas del código semántico moderno sean inútiles. Pero el correo electrónico sigue siendo un canal de marketing clave demasiado importante para pasarlo por alto: durante un período de seis meses en 2012, Litmus informó un aumento del 80% en la apertura de correos electrónicos en dispositivos móviles. En el mismo año, Campaign Monitor reveló que, por primera vez, su tasa de apertura de correo electrónico móvil había superado el correo de escritorio y web.
Obviamente, es importante realizar un análisis adecuado de su audiencia antes de tomar la decisión de invertir en optimización móvil. Pero un diseño de correo electrónico receptivo bien ejecutado puede garantizar una excelente experiencia de usuario tanto para los usuarios de escritorio como para los usuarios móviles, y con la tecnología 4G generalizada a la vuelta de la esquina, la tendencia hacia los dispositivos móviles es inexorable, así que ¿por qué no prepararse para el futuro?
Clavija cuadrada, agujero redondo
Si alguna vez ha tenido la desgracia de abrir un correo electrónico de ancho fijo en un dispositivo móvil, comprenderá la necesidad de un diseño de correo electrónico receptivo. Los diseños de múltiples columnas y con estallido de pantalla pueden aparecer alejados para que los tamaños de fuente se reduzcan hasta el punto de ser ilegibles. Los usuarios pueden hacer zoom, pero luego se les pide constante y exasperantemente que se desplace horizontalmente de izquierda a derecha y viceversa para leer el contenido. Los enlaces parecen pequeños y congestionados, sin tener en cuenta los dedos gordos en las pantallas táctiles. Y los diseños de bajo contraste en las ventanas pequeñas, atenuados para ahorrar energía, a menudo se vuelven ilegibles. Claramente, la optimización móvil es importante, pero ¿cuál es la mejor manera de hacerlo?
Prácticas recomendadas para dispositivos móviles
Antes de escribir una sola línea de código, la consideración de las características de diseño puede mejorar enormemente la experiencia del usuario para aquellos en dispositivos móviles, aunque podría decirse que estas son concesiones recomendables independientemente del tamaño de la pantalla.
- Contenido claro y conciso: Las pantallas pequeñas significan que ahora es más importante que nunca involucrar al usuario de la manera más eficiente posible.
- Diseño de una sola columna: la simplicidad es clave. Los diseños de no más de 640 px se degradarán con gracia. Una sola columna garantiza que ningún contenido se pierda por completo fuera de la ventana gráfica cuando se amplía.
- Una línea de asunto atractiva: esta es una de las armas más efectivas del vendedor de correo electrónico en una bandeja de entrada abarrotada. Sea breve y ágil.
- Gran llamado a la acción (CTA): ¡No castigues los dedos gordos! Las pautas de la interfaz humana de iOS de Apple recomiendan un área objetivo mínima ‘pulsable’ de 44 × 44 puntos.
- Tamaños de fuente generosos: asegúrese de que su mensaje se pueda leer fácilmente.
- Pre-encabezado: otra área clave en lo que respecta a la visibilidad en la bandeja de entrada. Trate de evitar simplemente mostrar el texto «ver en el navegador».
- Texto alineado a la izquierda: Hay varias razones para alinear elementos importantes en el lado izquierdo del área de contenido. (La investigación de seguimiento ocular sugiere que los usuarios occidentales centran la mayor parte de su atención en el lado izquierdo del contenido del correo electrónico. Esto no es sorprendente, ya que leemos el texto de izquierda a derecha. Ciertos sistemas operativos, especialmente Android, no escalarán el contenido para que se ajuste la pantalla, por lo tanto, muestra solo la mitad izquierda de un correo electrónico. Desde una perspectiva ergonómica, la mayoría de los usuarios encontrarán más fácil interactuar con los elementos en la parte inferior izquierda / media de la pantalla de su dispositivo portátil).
- Jerarquía vertical: El espacio reducido de la pantalla otorga más crédito que nunca a la idea de «el pliegue». Los CTA importantes deben colocarse lo más cerca posible de la parte superior; si no se ven de inmediato, quizás no se utilicen.
- Utilice las imágenes con cuidado: no asuma que se verán las imágenes. La aplicación de correo electrónico nativa de iPhone mostrará imágenes de forma predeterminada, pero muchos clientes no lo harán.
Estos consejos pueden mejorar la experiencia del usuario para los clientes de dispositivos móviles, pero usted puede, y probablemente debería, optimizar aún más. Gracias al creciente soporte de CSS3 entre los clientes de correo electrónico móvil, ahora es posible el diseño de correo electrónico receptivo.
Empezando
Como mencioné anteriormente, los correos electrónicos HTML adolecen de una lamentable falta de estándares; para los no iniciados, gran parte de lo que sigue será un viaje en el tiempo hasta los primeros días del desarrollo web. Los diseños deben organizarse con tablas debido a los motores de representación HTML obsoletos de algunos clientes de correo electrónico y CSS debe aplicarse en línea. Varios clientes de correo electrónico ignorarán por completo cualquier declaración de estilo realizada en la sección
del documento.Hay algunas plantillas de correo electrónico fantásticas disponibles, recomiendo las excelentes Plantilla estándar de correo electrónico HTML como punto de partida, pero en aras de la demostración, comencemos desde cero.
Para aquellos de ustedes que les gusta seguir el código, pueden descargar una plantilla para este artículo desde aquí.
Doctype
Hotmail y Gmail insertarán automáticamente el tipo de documento XHTML 1.0 Strict. Por lo tanto, no es una mala idea usarlo, pero es importante probar a fondo su correo electrónico con y sin un tipo de documento, ya que muchos clientes de correo electrónico simplemente lo eliminarán por completo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Email on Acid ha realizado una investigación exhaustiva sobre tipos de documentos de correo electrónico aquí.
Preguntas de los medios
Ahora podemos insertar una metaetiqueta de ventana gráfica para asegurarnos de que nuestro correo electrónico se muestre correctamente en los dispositivos móviles. También es una buena idea especificar el tipo de contenido y una etiqueta de título. Estos serán ignorados por muchos clientes de correo electrónico, pero son una buena idea si planea proporcionar un enlace a una «versión del navegador» de su correo electrónico.
Dado que lo más probable es que se ignore el tipo de contenido, es recomendable codificar todos los caracteres especiales dentro de su correo electrónico como entidades HTML.
Además, incluiremos un par de restablecimientos de estilo sensatos para garantizar que nuestro correo electrónico se procese como queremos en todas las plataformas.
<head>
<meta name="viewport" content="width=device-width, initial scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Email subject or title</title>
<style type="text/css">
.ExternalClass {width:100%;}
img {display: block;}
</style>Tenga en cuenta que la metaetiqueta de la ventana gráfica tiene implicaciones negativas para Blackberry.
Ahora podemos insertar nuestras consultas de medios; cuántos depende del nivel de especificidad que desee entregar a cada dispositivo. En este ejemplo, usaremos solo uno, asumiendo razonablemente que la mayoría de los dispositivos con un tamaño de pantalla no mayor a 600px son modernos, móviles y de pantalla táctil y se beneficiarán de un estilo optimizado para dispositivos móviles. Además, asumiremos que al seguir las técnicas de mejores prácticas móviles universales, descritas anteriormente, los usuarios móviles en dispositivos más grandes que reciban el diseño de escritorio no encontrarán problemas importantes de usabilidad.
Utilizamos las consultas de medios de la misma manera que lo haríamos al crear un sitio web; si el tamaño de la ventana gráfica está dentro de las restricciones establecidas en la consulta de medios, aplique ese estilo.
@media only screen and (max-width: 600px) {
table[class="hide"], img[class="hide"], td[class="hide"] {
display:none!important;
}
}En el ejemplo anterior, estamos diciendo que algunos elementos con una clase de «ocultar» se muestren: ninguno en pantallas de menos de 600 px. La propiedad! Important garantiza que se anule cualquier estilo en línea. Este es el principio básico del diseño de correo electrónico receptivo: anular las declaraciones de estilo en línea realizadas en el cuerpo del documento HTML con declaraciones de estilo importantes realizadas en la sección
, y dirigir estas anulaciones de estilo a tamaños de pantalla específicos con consultas de medios. Una excepción evidente es la aplicación de Gmail que ignorará cualquier declaración de estilo en la sección . Sin embargo, la alineación concienzuda del contenido a la izquierda debería garantizar una experiencia de usuario satisfactoria para los fanáticos de Gmail en su lista de correo. Obviamente, esta no es una solución ideal, pero en la actualidad, el diseño de correo electrónico receptivo se trata tanto de compromisos considerados como de técnicas de vanguardia.Vale la pena señalar que estamos apuntando a nuestros elementos HTML con selectores de atributos CSS para superar un representación peculiar de Yahoo! Correo.
Entonces, podemos ver que las consultas de medios son una herramienta útil para mostrar contenido de manera selectiva, pero también podemos usarlas para manipular otras características de nuestro diseño. Quizás lo más importante es que podemos restringir el ancho de columna de nuestro correo electrónico, la clave para una excelente experiencia móvil.
@media only screen and (max-width: 600px) {
table[class="content_block"] {
width: 92%!important;
}
}Ahora hemos indicado en nuestra consulta de medios que todas las tablas con una clase de «content_block» deben escalar al 92% de ancho en dispositivos con un tamaño de pantalla de hasta 600px. Ahora todo lo que tenemos que hacer es especificar un atributo de ancho en línea (600px) para cualquier tabla con una clase de content_block y tenemos un contenedor de ancho fijo que luego escala proporcionalmente en pantallas de un tamaño determinado. Siempre que los atributos de ancho de los elementos secundarios de este contenedor se especifiquen como porcentajes, esta es una plantilla de correo electrónico receptiva básica.
Tenga cuidado al deshabilitar el ajuste automático del tamaño del texto de webkit en la etiqueta del cuerpo, como regla general, intente mantener los tamaños de fuente por encima de 12px como mínimo.
Botones
Las llamadas a la acción (CTA) suelen ser la parte más importante de un correo electrónico de marketing. Deben ser llamativos, estar bien situados y, sobre todo, utilizables. Los criterios para una gran llamada a la acción son diferentes dependiendo de si se va a seleccionar con un cursor o con un dedo. Ésta es una función poderosa del correo electrónico receptivo; para proporcionar a los usuarios de dispositivos de pantalla táctil más pequeños botones fáciles de usar que no se vean afectados por los bloqueadores de imagen.
Desafortunadamente, estos botones no se pueden mostrar universalmente ya que dependen de propiedades de relleno que no son compatibles con algunos clientes de correo electrónico de escritorio.
@media only screen and (max-width:600) {
a[class="button"]{
display: block;
padding: 7px 8px 6px 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff!important;
background: #f46f62;
text-align: center;
text-decoration: none!important;
}
}Las declaraciones de estilo anteriores transformarán las etiquetas con una clase de «botón», como la que se muestra a continuación, en botones grandes, atractivos y de colores que abarcan el ancho del área de contenido, siempre que el ancho de la pantalla del dispositivo no sea superior a 600 px. La compatibilidad con CSS3 no debería ser un problema, ya que podemos asumir que la tecnología móvil a la que nos dirigimos es razonablemente moderna.
<a href="https://www.webdesignerdepot.com/2013/06/responsive-html-email-design/#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>El estilo en línea es suficiente para los usuarios de mouse que pueden seleccionar enlaces con mayor precisión, pero anular estos estilos para hacer que los enlaces sean grandes y claros para los usuarios de pantallas táctiles disminuye la probabilidad de errores de interacción. Es importante destacar que este enfoque no se basa en imágenes y, por lo tanto, evita los problemas de usabilidad que de otro modo presentarían los bloqueadores de imágenes.
En conclusión
El diseño de correo electrónico receptivo sigue siendo un compromiso. La desconcertante variedad de diferentes dispositivos, clientes de correo electrónico y motores de renderizado presentan a los diseñadores y desarrolladores una tarea abrumadora. Pero a medida que avanza la tecnología, es cada vez más fácil proporcionar a los usuarios diseños adecuados con los que puedan consumir e interactuar sin esfuerzo. El creciente soporte para consultas de medios en el correo electrónico ha cambiado el panorama de la optimización del correo electrónico móvil y nos brinda una plataforma para mejorar drásticamente la experiencia del usuario en más dispositivos. Ahora depende de nosotros, los diseñadores y desarrolladores, experimentar con formas creativas de llegar a la audiencia móvil.
¿Ha diseñado para correo electrónico? ¿Usó un enfoque receptivo? Háznoslo saber en los comentarios.
Imagen destacada / miniatura, a través de mattw1ls0n
