La guía definitiva para listas con viñetas en correo electrónico HTML
La guía definitiva para listas con viñetas en correo electrónico HTML
Publicado: 2019-09-06
Las listas con viñetas pueden ser increíblemente útiles para la jerarquía de contenido. Permiten a los suscriptores leer rápida y fácilmente los puntos clave de su correo electrónico y pueden diferenciar la información importante del resto de su contenido.
Pero, como ocurre con tanta frecuencia en el desarrollo del correo electrónico, algo que suena tan simple (agregar una lista con viñetas no puede ser ciencia de cohetes, ¿verdad?) Resulta ser más complicado de lo que piensas. No todos los clientes de correo electrónico presentan listas con viñetas de la misma manera. Por lo tanto, algunos desarrolladores simplemente evitan el uso de listas con viñetas o usan tablas para forzarlas a tomar forma, una táctica que puede causar grandes dolores de cabeza a los suscriptores que usan lectores de pantalla.
Si está buscando incluir listas con viñetas en sus correos electrónicos de una manera que los haga accesibles y a prueba de balas en todos los clientes de correo electrónico, tenemos la solución para usted.
Usar etiquetas de lista para listas con viñetas
Aquí en Litmus usamos etiquetas de lista cuando codificamos listas con viñetas en nuestros correos electrónicos:
<ul> indica una lista desordenada o una lista de elementos con viñetas
<ol> indica una lista ordenada o una lista numerada de elementos
<li> indica una línea de pedido en una lista ordenada o desordenada de elementos
Si está interesado en implementar etiquetas de lista en sus correos electrónicos, ¡siga leyendo!
Cómo empezar con listas semánticas con viñetas
Para comenzar con listas con viñetas en sus correos electrónicos, aquí está el código mínimo que necesita para que funcionen.
En este código, notará un par de cosas que nos hemos asegurado de incluir. Uno de ellos es identificar el tipo específico de viñeta que nos interesa incluir en nuestra lista, con un atributo de tipo definido en las etiquetas <ul> y <ol>. Para <ul>, hemos especificado un botón de estilo de disco. Para <ol>, hemos especificado "A", por lo que los elementos de la lista se identificarían con A, B, C, etc., pero los números y las letras mayúsculas y minúsculas y los números romanos también se pueden usar en listas ordenadas. Aquí está la lista completa de opciones de atributo de tipo que puede usar en el correo electrónico:
Opciones de tipo de lista desordenada
disco (leído como "viñeta" •)
círculo (léase "círculo blanco" ○)
cuadrado (se lee como "cuadrado negro" ■)
Opciones de tipo de lista ordenada
1 (número decimal predeterminado)
A (alfabeto en mayúsculas)
a (alfabeto en minúsculas)
I (número romano en mayúsculas)
i (número romano en minúscula)
Hay un par de cosas a tener en cuenta sobre cómo hemos diseñado el margen en estas listas. También hemos incluido " margen izquierdo " en ambas listas. Eso es para asegurarse de que las viñetas se procesen dentro de los límites de su contenedor en lugar de desalinearse o no aparecer en absoluto.
Consideraciones de Gmail
En particular, correo web Gmail (pero no la aplicación Gmail para móviles) es el cliente que no necesita margin-left para asegurar las balas hacen dentro de los límites correctos, lo que significa que sus listas incluirán dicha escotadura adicional izquierda. Si es absolutamente necesario que sus listas con viñetas estén alineadas con el margen izquierdo de su contenedor, puede restablecer el margen izquierdo a cero con un código específico de Gmail así:
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
Como puede ver, incluimos la consulta de medios de respuesta móvil para asegurarnos de que el restablecimiento del margen no afecte la aplicación Gmail en el dispositivo móvil. Además, tenga en cuenta el orden en el que se escribe el CSS . Si coloca el CSS que responde a dispositivos móviles antes que el CSS de escritorio, entonces el CSS que responde a dispositivos móviles se anulará debido a la cascada.
PD: Las listas semánticas con viñetas responden naturalmente a los dispositivos móviles , ¡así que todos ganan con los beneficios de accesibilidad!
Diseñando tus balas
Si cree que necesita mantener sus listas con viñetas simples (estamos pensando en negro, viñetas redondas o solo 1, 2, 3), ¡está equivocado! Puede hacer prácticamente cualquier cosa con las viñetas que pueda hacer en los mensajes de texto de los correos electrónicos. ¿Quieres cambiar el color para que coincida con la guía de estilo de tu marca? Adelante. ¿Tiene una lista ordenada y desea utilizar una fuente personalizada para que coincida con el resto de su correo electrónico? Definitivamente puedes y debes. Para cualquier lista, puede cambiar el tamaño y el color de sus viñetas, y para las listas ordenadas, puede cambiar la fuente y también poner en negrita o cursiva sus números o letras.
Veamos qué le hace parte de ese estilo a nuestro código original de antes.
Sin embargo, este estilo aún no es del todo correcto. Si observa, el estilo de fuente global que establecimos anteriormente para cada lista fue anulado por el estilo que agregamos a las viñetas. Solo desea actualizar el estilo de la viñeta , no la copia que viene después. Esta es una solución rápida: simplemente envuelva el texto de los elementos de la lista en una etiqueta <span> con estilo para restablecer la copia a su estilo de fuente deseado.
Mucho mejor: ahora puede diseñar listas semánticas con viñetas sin comprometer el estilo del contenido de la lista.
Anidando tus listas
Ahora que sabe cómo incluir una lista semántica con viñetas en su correo electrónico, ¿qué tal una lista anidada ?
No es tan difícil como cree incluir listas anidadas sin tablas. Simplemente necesita codificar su lista anidada como lo haría normalmente, pero asegúrese de que esté anidada dentro de una etiqueta <li> en lugar de afuera; de lo contrario, es posible que vea algunas viñetas falsas en clientes de correo electrónico como Gmail IMAP (GANGA). Así es como se vería ese código:
Las listas anidadas heredan el estilo global de las listas principales, por lo que no necesita ningún espacio o estilo adicional para mantener la coherencia de las listas. Sin embargo, el espaciado puede resultar complicado (sorpresa, sorpresa) en Outlook. Estos son nuestros consejos para asegurarse de mantener el espaciado de la manera que desea:
Para el espaciado horizontal , agregue padding-left: #px; con la dimensión correcta para la etiqueta <li>. Esto ayudará a controlar el espacio entre la viñeta y la copia. Además, no olvide incluir el puntero de margen izquierdo mencionado al principio de esta guía para asegurarse de que sus viñetas no se muestren lejos de su copia.
Nota: Desafortunadamente, esto no funciona para Outlook para Windows.
Para el espaciado vertical , agregue margin-bottom: #px; con la dimensión correcta para la etiqueta <li>. Esto ayudará a aumentar el espacio vertical entre cada elemento de la lista.
Usar símbolos o imágenes personalizados para viñetas
Has diseñado tus viñetas, ahora prueba a usar imágenes o íconos.
A diferencia de diseñar sus viñetas con un tamaño o fuente personalizados, los símbolos personalizados y las viñetas de imágenes no son tan universalmente compatibles con los clientes de correo electrónico, así que asegúrese de proceder con precaución y utilice una herramienta como las vistas previas de correo electrónico de Litmus para asegurarse de que sus listas se visualicen bien en su dispositivos de los suscriptores.
Para nuestro código, cambiaremos nuestras listas con viñetas para incluir corazones, así como nuestro propio logotipo de Litmus para algunas imágenes personalizadas.
<head> Metadatos
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Outlook para Windows (2007, 2010, 2013, 2016, 2019)
Windows 10
Aplicación de Gmail
Aplicación de Outlook
Outlook.com
Gmail
Por qué el método de la tabla no es ideal para la accesibilidad
Nos ha escuchado decir que debe evitar el uso de tablas al codificar listas con viñetas. ¿Pero por qué?
Es posible que sepa o no que la popularidad de los lectores de pantalla está aumentando drásticamente: se prevé que 275 millones de personas los usarán en 2023. Es posible que sus suscriptores estén usando lectores de pantalla porque tienen una discapacidad que lo requiere o porque quieren escuchar qué correos electrónicos tienen mientras se cepillan los dientes por la mañana.
Cuando se trata de la jerarquía de contenido de su correo electrónico, recomendamos el uso de etiquetas semánticas tanto como sea posible, es decir, el uso significativo e intencional de <h1>, <h2>, etc., en lugar de <p> y <span genéricos. > etiquetas. Pero cuando se trata de etiquetas semánticas, un punto de fricción para los desarrolladores de correo electrónico es la lista desordenada o con viñetas.
Los lectores de pantalla tienen problemas para leer los correos electrónicos con tablas. Si un lector de pantalla identifica una tabla en el código de su correo electrónico, se leerá en voz alta como una. Literalmente le informará sobre la posición y el contenido de todas y cada una de las filas y columnas. Esto puede ser demasiado para los suscriptores que escuchan sus correos electrónicos, y ciertamente les dificulta obtener el contenido deseado. Veamos esta lista con viñetas:
Codificado con tablas, sonaría un poco así:
Eso ... no es genial , ¿verdad? Cuando se trata de listas con viñetas, muchos desarrolladores resuelven el problema visual codificando listas con viñetas falsas en tablas. Pero si usted supiera esas tablas sonado así, ¿seguiría código de sus listas de esa manera?
A diferencia de las tablas, las etiquetas <ul>, <ol> y <li> son mucho más fáciles de entender para un lector de pantalla. Cuando un lector de pantalla ve estas etiquetas en un correo electrónico que está leyendo en voz alta, leerá esto a sus suscriptores:
Para comenzar una lista, le dirá cuántos elementos hay en la lista.
Describirá el tipo de viñeta que se utiliza para indicar cada elemento de la lista, de los siguientes:
Listas desordenadas: " viñeta " para tipo = "disco" , " viñeta blanca " para tipo = "círculo", " cuadrado negro " para tipo = "cuadrado"
Listas ordenadas: el carácter alfanumérico o el número romano asociado (por ejemplo: " a ", " 2 ", " IV ")
Para finalizar una lista, dirá " fuera de lista "
Por ejemplo, aquí hay una lista con viñetas accesible, leída por un lector de pantalla:
Eso suena mucho mejor que escuchar un montón de filas y columnas, ¿no es así? Es mucho más fácil entender el contenido de las listas cuando se lee en voz alta de la misma manera que leería la lista dentro de su cabeza, como si estuviera mirando el correo electrónico en sí.
¿Está listo para hacer accesibles sus listas con viñetas?
¿Está motivado para hacer que la lista con viñetas de su correo electrónico sea accesible y desea asegurarse de que se muestre bien en todos los dispositivos y clientes de correo electrónico? El uso de una herramienta como las vistas previas de correo electrónico de Litmus lo ayudará a asegurarse de que su lista con viñetas sea a prueba de balas. Además, nuestras nuevas comprobaciones de accesibilidad en la lista de verificación de Litmus lo ayudan a ver instantáneamente si sus correos electrónicos siguen las mejores prácticas de accesibilidad clave y obtener consejos prácticos sobre cómo puede hacer que sus correos electrónicos sean más inclusivos.
