O guia definitivo para listas com marcadores em e-mail HTML
O guia definitivo para listas com marcadores em e-mail HTML
Publicados: 2019-09-06
Listas com marcadores podem ser incrivelmente úteis para hierarquia de conteúdo. Eles permitem que os assinantes leiam de forma rápida e fácil os pontos-chave em seu e-mail e podem definir informações importantes além do resto do seu conteúdo.
Mas, como acontece com frequência no desenvolvimento de e-mail, algo que parece tão simples - adicionar uma lista com marcadores não pode ser uma ciência do foguete, pode? - acaba sendo mais complicado do que você imagina. Nem todos os clientes de e-mail processam listas com marcadores da mesma maneira. Portanto, alguns desenvolvedores simplesmente evitam usar listas com marcadores ou usar tabelas para forçá-los a entrar em forma - uma tática que pode causar grandes dores de cabeça para assinantes que usam leitores de tela.
Se você deseja incluir listas com marcadores em seus e-mails de uma forma que os torne acessíveis e à prova de balas em clientes de e-mail, nós temos a solução para você.
Usando tags de lista para listas com marcadores
Aqui no Litmus, usamos tags de lista quando codificamos listas com marcadores em nossos e-mails:
<ul> indica uma lista não ordenada ou uma lista de itens com marcadores
<ol> indica uma lista ordenada ou uma lista numerada de itens
<li> indica um item de linha em uma lista ordenada ou não ordenada de itens
Se implementar tags de lista em seus e-mails é algo de seu interesse, continue lendo!
Como começar com listas com marcadores semânticos
Para começar a usar listas com marcadores em seus e-mails, aqui está o código mínimo necessário para fazê-los funcionar.
Neste código, você notará algumas coisas que nos certificamos de incluir. Um deles é identificar o tipo específico de marcador que estamos interessados em incluir em nossa lista, com um atributo de tipo definido nas tags <ul> e <ol>. Para <ul>, especificamos um botão de estilo de disco. Para <ol>, especificamos “A” - portanto, os itens da lista seriam identificados com A, B, C e assim por diante - mas os números, letras maiúsculas e minúsculas e numerais romanos também podem ser usados em listas ordenadas. Aqui está a lista completa de opções de atributo de tipo que você pode usar no e-mail:
Opções de tipo de lista não ordenada
disco (leia como “marcador” •)
círculo (leia como “círculo branco” ○)
quadrado (leia como “quadrado preto” ■)
Opções de tipo de lista ordenada
1 (numeral decimal padrão)
A (alfabeto maiúsculo)
a (alfabeto minúsculo)
I (numeral romano maiúsculo)
i (numeral romano minúsculo)
Há algumas coisas a serem observadas sobre como estilizamos a margem nessas listas. Também incluímos “ margem esquerda ” em ambas as listas. Isso é para garantir que os marcadores sejam renderizados dentro dos limites do contêiner, em vez de desalinhados ou não aparecerem.
Considerações sobre o Gmail
Notavelmente, webmail Gmail (mas não Gmail app para celular) é o cliente que não precisa margin-left para garantir as balas tornar dentro dos limites corretos, o que significa que as suas listas irá incluir o recuo adicional esquerda. Se você realmente precisa que suas listas com marcadores estejam alinhadas com a margem esquerda do seu contêiner, você pode redefinir a margem esquerda para zero com o código específico do Gmail como este:
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
Como você pode ver, incluímos a consulta de mídia responsiva para celular para garantir que a redefinição de margem não afete o aplicativo Gmail no celular. Além disso, observe a ordem em que o CSS foi escrito . Se você colocar o CSS responsivo a dispositivos móveis antes do CSS da área de trabalho, o CSS responsivo a dispositivos móveis será anulado devido à cascata.
PS: Listas com marcadores semânticos são naturalmente responsivas aos dispositivos móveis , então todos ganham com os benefícios de acessibilidade!
Modelando suas balas
Se você acha que precisa manter suas listas com marcadores simples (estamos pensando em marcadores pretos, redondos ou apenas 1, 2, 3), você está errado! Você pode fazer praticamente qualquer coisa com os marcadores que pode fazer com o texto em e-mails. Quer mudar a cor para combinar com o guia de estilo da sua marca? Vá em frente. Você tem uma lista ordenada e deseja usar uma fonte personalizada para combinar com o resto do seu e-mail? Você definitivamente pode e deve. Para qualquer lista, você pode alterar o tamanho e a cor dos marcadores - e para as listas ordenadas, você pode alterar a fonte e colocar em negrito ou itálico seus números ou letras também.
Vamos ver o que parte desse estilo faz com nosso código original anterior.
No entanto, este estilo ainda não está certo. Se você notar, o estilo de fonte global que definimos anteriormente para cada lista foi substituído pelo estilo que adicionamos aos próprios marcadores. Você só deseja atualizar o estilo do marcador , não a cópia que vem depois dele. Esta é uma solução rápida - simplesmente envolva o texto dos itens da lista em uma marca <span> estilizada para redefinir a cópia para o estilo de fonte pretendido.
Muito melhor - agora você pode ter listas com marcadores semânticos estilizados sem comprometer o estilo de seu conteúdo listado.
Aninhando suas listas
Agora que você sabe como incluir uma lista com marcadores semânticos em seu e-mail, que tal uma lista aninhada ?
Não é tão difícil quanto você pensa incluir listas aninhadas sem tabelas. Você simplesmente precisa codificar sua lista aninhada como faria normalmente, mas certifique-se de que ela está aninhada dentro de uma tag <li> em vez de fora - caso contrário, você poderá ver alguns marcadores desonestos aparecerem em clientes de e-mail como Gmail IMAP (GANGA). Veja como esse código ficaria:
As listas aninhadas herdam o estilo global das listas pai, portanto, você não precisa de nenhum espaçamento ou estilo adicional para manter as listas consistentes. No entanto, o espaçamento ainda pode ser complicado - surpresa, surpresa - no Outlook. Aqui estão nossas dicas para garantir que você mantenha o espaçamento da maneira que deseja:
Para espaçamento horizontal , adicione padding-left: #px; com a dimensão correta para a tag <li>. Isso ajudará a controlar o espaçamento entre o marcador e a cópia. Além disso, não se esqueça de incluir o ponteiro de margem esquerda mencionado no início deste guia para garantir que seus marcadores não sejam renderizados longe de sua cópia.
Nota: Infelizmente, isso não funciona para Outlook para Windows.
Para espaçamento vertical , adicione margin-bottom: #px; com a dimensão correta para a tag <li>. Isso ajudará a aumentar o espaçamento vertical entre cada item da lista.
Usando símbolos personalizados ou imagens para marcadores
Você estilizou seus marcadores - agora tente usar imagens ou ícones, em vez disso!
Ao contrário de estilizar seus marcadores para um tamanho ou fonte customizada, os marcadores de símbolo e imagem customizados não são universalmente suportados em clientes de e-mail, então certifique-se de prosseguir com cuidado e usar uma ferramenta como o Litmus Email Previews para garantir que suas listas sejam bem processadas em seu dispositivos dos assinantes.
Para nosso código, vamos mudar nossas listas com marcadores para incluir corações, bem como nosso próprio logotipo Litmus para algumas imagens personalizadas.
<head> Metadados
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Outlook para Windows (2007, 2010, 2013, 2016, 2019)
Windows 10
App Gmail
Aplicativo Outlook
Outlook.com
Gmail
Por que o método da tabela não é ideal para acessibilidade
Você nos ouviu dizer que deve evitar o uso de tabelas ao codificar listas com marcadores. Mas por que?
Você pode saber ou não que a popularidade dos leitores de tela está aumentando drasticamente - a previsão é de que 275 milhões de pessoas os usem até 2023. Seus assinantes podem estar usando leitores de tela porque têm uma deficiência que o exige ou porque querem ouvir quais e-mails eles têm ao escovar os dentes pela manhã.
Quando se trata da hierarquia de conteúdo do seu e-mail, defendemos o uso de tags semânticas o máximo possível, ou seja, o uso significativo e intencional de <h1>, <h2> e assim por diante, em comparação com genéricos <p> e <span > tags. Mas quando se trata de tags semânticas, um ponto crítico para os desenvolvedores de e-mail é a lista com marcadores ou não ordenada.
Os leitores de tela têm problemas para ler e-mails com tabelas. Se um leitor de tela identificar uma tabela no código do seu e-mail, ele será lido em voz alta como uma. Ele irá literalmente falar sobre cada linha e posição e conteúdo da coluna. Isso pode ser um pouco demais para os assinantes que ouvem seus e-mails e certamente torna mais difícil para eles coletar o conteúdo pretendido. Vejamos esta lista com marcadores:
Codificado com tabelas, seria um pouco assim:
Isso ... não é ótimo , não é? Quando se trata de listas com marcadores, muitos desenvolvedores resolvem o problema visual codificando listas com marcadores falsos em tabelas. Mas se você soubesse essas tabelas soavam como esse, você continuaria a código de suas listas de que maneira?
Ao contrário das tabelas, as tags <ul>, <ol> e <li> são muito mais fáceis para um leitor de tela entender. Quando um leitor de tela vê essas tags em um e-mail, ele está lendo em voz alta, para seus assinantes:
Para começar uma lista, ele dirá quantos itens existem na lista
Ele descreverá o tipo de marcador usado para denotar cada item da lista, a partir do seguinte:
Listas não ordenadas: “ marcador ” para tipo = ”disco” , “ marcador branco ” para tipo = ”círculo”, “ quadrado preto ” para tipo = ”quadrado”
Listas ordenadas: o caractere alfanumérico associado ou numeral romano (por exemplo: “ a ”, “ 2 ”, “ IV ”)
Para terminar uma lista, dirá " fora da lista "
Por exemplo, aqui está uma lista com marcadores acessível, lida por um leitor de tela:
Isso soa muito melhor do que ouvir um monte de linhas e colunas, não é? É muito mais fácil entender o conteúdo das listas quando ele é lido em voz alta, da mesma maneira que você leria a lista dentro da sua cabeça, como se estivesse olhando o próprio e-mail.
Pronto para tornar suas listas com marcadores acessíveis?
Motivado para tornar acessível a lista com marcadores de seu e-mail e quer ter certeza de que ela funcionará bem em clientes e dispositivos de e-mail? Usar uma ferramenta como o Litmus Email Previews ajudará você a garantir que sua lista com marcadores seja à prova de balas. Além disso, nossas novas verificações de acessibilidade na Lista de verificação Litmus ajudam você a ver instantaneamente se seus e-mails seguem as principais práticas recomendadas de acessibilidade e obter conselhos acionáveis sobre como tornar seus e-mails mais inclusivos.
