Frustrado com links azuis no e-mail? Conquiste-os para o bem

Abordamos muitas maneiras de lidar com links azuis do iOS no passado. Felizmente, tudo o que você precisa fazer agora é definir como alvo os elementos com atributos específicos e substituir o estilo desses elementos.

No bloco de estilo do seu e-mail, adicione o seguinte para direcionar os links adicionados pela Apple e forçar esse texto a herdar o estilo de seu elemento pai:

A funcionalidade ainda estará lá, mas o texto terá o estilo que você pretendia originalmente.

Para garantir que as pessoas saibam que o conteúdo é clicável, altere o valor da cor de herdar para um código de cor hexadecimal que corresponda ao design de sua marca (por exemplo, # 77d6fc para azul claro) e altere o valor de decoração de texto para sublinhado.

Substituindo links azuis no Gmail

Em vez de adicionar atributos ao texto vinculado automaticamente, o Gmail faz algo totalmente diferente. Ao processar o HTML de um e-mail, o Gmail converterá o doctype em um elemento sublinhado (u). Sabendo disso, você pode adicionar um gancho em seu próprio HTML para direcionar elementos apenas para o Gmail. Normalmente, isso é feito adicionando um ID ao elemento do corpo.

Embora existam algumas maneiras de corrigir links azuis do Gmail, esta é nossa recomendação: Segmente todos os links contidos no corpo do Gmail com o seguinte em sua tag de estilo, substituindo qualquer estilo adicionado no processo:

Ele usa exatamente as mesmas propriedades CSS do truque do Apple Mail, apenas aplicado especificamente ao Gmail.

Lembre-se de atualizar os valores de cor e decoração de texto para tornar óbvio para os assinantes que eles podem clicar nos links automáticos. Novamente, algumas pessoas preferem a opção, portanto, não a esconda delas.

Substituindo links azuis no Samsung Mail

Samsung Mail usa uma técnica semelhante ao Gmail. Em vez de converter um elemento em outro, porém, o Samsung Mail adicionará um ID específico ao e-mail chamado “MessageViewBody”. Assim como no Gmail, segmente esse ID e todos os links contidos em seu bloco de estilo:

Novamente, exatamente as mesmas propriedades CSS são usadas como antes. E você vai querer trocar pelo valor da cor da sua marca e sublinhar o link se isso fizer parte do seu guia de design.

Todos juntos agora

Embora seja conveniente encadear todos os seletores CSS acima em uma regra, o Gmail remove o CSS usando seletores de atributo, de modo que a correção seria removida do Gmail, permitindo que os links azuis circulem livremente.

Portanto, você deve manter todas as três regras separadas. A boa notícia é que, depois que eles são adicionados aos modelos de e-mail, você não precisa fazer nada adicional em seu código para remover links azuis da maioria dos clientes de e-mail.

Combinado, seu HTML pode ser assim:

Aqui está um exemplo de como isso poderia parecer se você não fizesse nada (sem correção), removesse o estilo padrão sem adicionar o seu próprio (com correção) e substituísse o estilo padrão pelo seu próprio (com correção de estilo):

Sem conserto	Com correção	Com correção estilizada

Lidando com casos extremos para o codificador just-in-case (e Outlook)

Como você deve saber, sempre há casos extremos quando se trata de design de e-mail. Links azuis não são diferentes. Alguns clientes de e-mail ainda irão vincular o texto automaticamente. E como os aplicativos de e-mail mudam a cada 1-2 dias, os três clientes acima podem facilmente apresentar uma atualização que quebra essas correções.

Para esses casos extremos, você pode adotar uma abordagem diferente.

Essa técnica envolve envolver os candidatos de link automático com um elemento que é direcionado via CSS no cabeçalho de um e-mail. O elemento contêiner tem uma classe aplicada para segmentação. Antes que os designers descobrissem que poderiam usar o hack x-apple-data-detectectors, esse truque era comumente usado para links azuis do Apple Mail, então você normalmente verá algo como “appleLinks” usado para a classe, mas pode ser qualquer coisa.

Em nosso exemplo, usaremos a classe “blueLinks”:

Uma vez que os clientes de e-mail irão adicionar um link dentro desse elemento, direcione-o no CSS no bloco de estilo do seu e-mail e substitua as propriedades CSS específicas:

Esta pode ser uma solução muito robusta, mas requer mais manutenção. Como o conteúdo de um e-mail pode mudar com frequência, rastrear onde essas classes são aplicadas e garantir que todo o texto suspeito seja contabilizado pode consumir muito tempo e estar sujeito a erros.

É por isso que normalmente recomendamos o uso das três soluções CSS incorporadas acima, voltando para a solução baseada em classe apenas quando o teste mostra a necessidade dela.

Sua correção para clientes de desktop do Outlook

Os aplicativos móveis do Outlook podem ser corrigidos com a solução de casos extremos acima, mas essa correção não funcionará com os clientes de desktop do Outlook.

Para clientes da área de trabalho do Outlook, URLs e endereços de e-mail sempre aparecerão como cores padrão se você não os envolver em <a> tags. Na maioria dos casos, você vai querer que eles tenham um link para a página da web ou endereço de e-mail que é apresentado, portanto, adicionar a tag <a> com o atributo href e estilizá-lo como um link contribui para uma boa experiência do assinante.

Se você não quiser que ele se pareça com um link, você ainda pode adicionar a tag <a> e estilizá-lo para se parecer com o resto da cópia.

Em casos extremos, você pode ter um cliente que precisa que o URL se pareça com uma cópia normal e não esteja vinculado. Nesse caso, a única maneira de conseguir isso é adicionando muitos juntadores de largura zero ao longo do link:

www.litmus. com torna-se w & zwj; ww & zwj;. & zwj; litm & zwj; us. & zwj; com

Isso não é a coisa mais bonita, mas funciona. No entanto, pode causar atrito com seus assinantes se eles tentarem copiar e colar o URL. Às vezes, o & zwj; aparecem estranhos ou interferem quando colados em programas diferentes. Por exemplo, copiar e colar o URL quando codificado como está acima na barra de endereço no Firefox resulta em uma pesquisa do Google em vez de levá-lo diretamente para Litmus.com:

Portanto, isso é o que eu chamo de conserto de último recurso-o-último-recurso-cliente-que-não-escuta-a-razão.

Essa correção não funciona para endereços de e-mail e, em minha experiência, não encontrei uma solução para criar um endereço de e-mail sem estilo e não clicável que funcione para todos os provedores de serviço de e-mail (ESP). Para alguns ESPs, você pode usar uma tag <a> sem um atributo href ou <a href=”#”>. Mas alguns ESPs não permitem que você envie um e-mail com esses hacks.

Corrija o estilo, não a funcionalidade

Embora você possa querer remover os links automáticos azuis por causa de um design com pixels perfeitos, lembre-se de quem é seu e-mail: seus assinantes. Os clientes de e-mail têm boas intenções em tornar itens como endereços, datas e números de telefone clicáveis ​​- e muitas pessoas gostam e esperam usá-los dessa forma. Não os esconda. Em vez disso, transforme-os para corresponder ao design do seu e-mail. Você deixará seus stakeholders e assinantes felizes.

Crie e-mails sobre a marca e sem erros com o Litmus Veja a aparência dos seus e-mails (chega de links azuis, certo?) Em mais de 100 clientes de e-mail, aplicativos e dispositivos. Diga adeus aos e-mails quebrados. Uau! Comece seu teste grátis →

Publicado originalmente em 2 de julho de 2019, por Jason Rodriguez. Última atualização em 23 de julho de 2021.