Como consertar links azuis do Gmail para um sonho de e-mail se tornar realidade

Publicados: 2021-07-16

Frustrado com links azuis aparentemente aleatórios e fora da marca ao testar o controle de qualidade de seu e-mail perfeito no Gmail? Esteve lá. Fiz isso. As boas notícias? Você não fez nada de errado. Desde 2017, o Gmail transforma automaticamente algumas de suas cópias - como endereços de e-mail, números de telefone, endereços físicos e horários - em elementos clicáveis, às vezes tornando-os azuis. E como o segundo cliente de e-mail mais popular com mais de 30% dos e-mails é aberto, de acordo com nossos dados, você não pode ignorar o Gmail.

Apesar do que são links azuis e do motivo, você precisa que seu e-mail se pareça com o que foi aprovado. Ou pelo menos os links devem ser da marca. Felizmente, remover o estilo padrão não é tão difícil. Orientaremos você sobre como surgem os links azuis - e o que você pode fazer para alterá-los de acordo com o design do seu e-mail. Tudo isso mantendo os links fáceis de usar para o seu público do Gmail.

Seus e-mails têm links azuis?

Sempre saiba quando os clientes de email atualizam sua renderização de email com o Litmus Email Previews. Visualize seus e-mails em todos os clientes e dispositivos de e-mail populares - incluindo Gmail - e identifique os erros antes de enviar.

Saiba mais →

Lembre-se de acessibilidade

Em primeiro lugar, é importante lembrar que os links azuis têm um propósito importante. Eles tornam mais conveniente para seus assinantes agirem em seu e-mail - por exemplo, para navegar até um local que você incluiu ou fazer uma ligação rápida. Ambos ótimos para usabilidade e acessibilidade.

bluelinks — Sim, tínhamos alguns links azuis em nossos e-mails também

No entanto, esses links automáticos podem vir com o estilo padrão: sublinhado e azul. Isso pode entrar em conflito com o design do seu e-mail e até mesmo torná-lo menos acessível se os links tiverem uma cor de fundo que não contraste bem com eles.

rodapé — O link azul aqui é quase imperceptível

Portanto, você deseja manter a funcionalidade do link, mas estilizá-lo de forma que corresponda melhor ao design do seu e-mail e seja legível.

A anatomia de um e-mail quebrado (2ª edição)

Cuidado: Existem outros culpados por um e-mail corrompido

Os erros de e-mail fazem você estremecer? Os links azuis são apenas uma das maneiras pelas quais seu e-mail pode parecer quebrado. Mergulhe profundamente no que pode corromper seu e-mail e nas dicas e truques para se manter fiel.

Revele problemas comuns e soluções →

Três maneiras de alterar a cor do link azul no Gmail

Para mudar a cor do link azul, você precisa entender por que isso acontece. Quando o Gmail identifica um endereço ou número de telefone em um e-mail, ele adiciona automaticamente uma declaração de estilo extra, que formata qualquer link no e-mail como azul se não houver estilos embutidos anexados a ele:

.ii a[href] { color: #15c; }

A classe .ii se refere à classe dada ao div que contém o e-mail completo no Gmail. O a [href] é um seletor de atributos CSS. Isso declara que qualquer link na classe .ii precisa ser da cor azul.

Endereços e números de telefone não costumam ser vinculados a e-mails. No entanto, o Gmail os reconhece e os transforma em um link, quer você goste ou não. Como esses links são criados dinamicamente, eles não têm nenhum estilo embutido anexado a eles e, portanto, o estilo padrão acima é usado.

Existem três métodos que você pode usar para impedir que os links fiquem azuis, dependendo se você deseja que eles tenham a mesma aparência ou sejam diferentes dos outros links em seu e-mail.

Opção 1: use o método <span>

O método <span> é a técnica mais simples para impedir que números de telefone e endereços fiquem azuis no Gmail. É perfeito se você deseja estilizá-los de forma diferente de seus outros links , mantendo sua funcionalidade. Veja como:

Envolva o número de telefone ou endereço em um <span> </span>
Dê a <span> uma aula, por exemplo: <span class = ”contact”> </span>
Declare a classe na seção <style> do seu e-mail para estilizar o número de telefone ou endereço como quiser
Lucro!

Aqui está um exemplo de HTML em que o endereço aparece no e-mail:

<span class="contact">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</span>

E aqui está um exemplo de declaração de estilo para a classe “contato” no bloco <style> no <head> do seu e-mail, onde definimos o link como preto (# 000000) e sublinhado:

<style type="text/css">
    .contact a {color: #000000!important; text-decoration: underline!important;}
</style>

Altere a cor preta em nosso código de exemplo, trocando o # 000000 por um código hexadecimal de cor que se adapta à sua marca. Se você não quiser que seu link seja sublinhado, altere o sublinhado em seu código para nenhum.

A criação de um <span> com um nome de classe em torno do endereço ou número de telefone fornece algo para direcionar usando CSS. Apenas direcionar o <span> propriamente dito não estilizará o link. Ele estilizará apenas o texto desvinculado, enquanto o link dentro de <span> ainda terá o estilo azul padrão. Portanto, para direcionar o link dentro do intervalo, a declaração de estilo inclui o nome da classe, bem como “a”.

Isso é especialmente bom para números de telefone se você deseja adicionar <a href=”tel:XXX-XXXX”> diretamente aos números de telefone, mas não quer que o número de telefone tente abrir um aplicativo de telefone no desktop. E então você começa a ter que ocultar e mostrar conteúdo para desktop vs. celular. Basta ignorar a dor de cabeça e aproveitar o fato de que um cliente de e-mail está finalmente fazendo algo para ajudá-lo.

Opção 2: substituir todos os estilos de link

Outra opção é definir seu próprio estilo padrão, que se aplicará a todos os links em um e-mail. Essa opção é perfeita se você deseja que seus links de endereço ou número de telefone sejam iguais aos de seus outros links, mantendo a funcionalidade que o Gmail oferece.

Adicione esta declaração de estilo específica do Gmail ao seu bloco <style> no <head> do seu e-mail, da seguinte forma:

<style type="text/css">
    u + #body a {
    	  color: inherit;
    	  text-decoration: none;
    	  font-size: inherit;
    	  font-family: inherit;
    	  font-weight: inherit;
    	  line-height: inherit;
    }
</style>

Em seguida, adicione o ID “body” à tag body:

<body id="body">
</body>

O sublinhado “u” é um método de segmentação para o Gmail. Ele converte o doctype em uma tag sublinhada, e o Gmail é o único cliente que se comporta dessa forma. Portanto, usar a tag underline com o seletor irmão adjacente de um div ou id / class nesse div no CSS é um método exclusivo de direcionar apenas os clientes do Gmail (pelo menos por enquanto). Neste exemplo, usamos um id de "corpo".

Com este método, se você quiser que os links em seu e-mail tenham estilos ligeiramente diferentes, isso precisará ser adicionado in-line a esses links específicos, uma vez que a técnica acima estilizará todos os links conforme foram definidos na declaração de estilo.

No entanto, há uma pequena advertência com esse método.

Não funciona quando os usuários do Gmail desativam as imagens por padrão e as ativam. Isso ocorre devido a um bug no Gmail que altera o estilo de maneira inadequada quando as imagens são ativadas. O desenvolvedor de email Remi Parmentier tem mais alguns detalhes sobre esse bug.

Opção 3: adicionar a tag <a> e torná-los links você mesmo

Ao vincular proativamente os elementos que o Gmail vincularia automaticamente, você tem mais controle sobre seus estilos e cores. Esta opção é perfeita se você também deseja alterar para onde o conteúdo está vinculado , Talvez você tenha uma página de contato em seu site para a qual prefere levar os assinantes em vez de que eles abram automaticamente o aplicativo de navegação do telefone ou liguem diretamente para você.

<a style="color:#4B525D; text-decoration:none;" href="https://www.litmus.com/contact-us/">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</a>

No exemplo acima, o endereço físico está estilizado em cinza sem sublinhado e está vinculado à página de contato do nosso site. Isso impedirá que o Gmail aplique seu estilo e funcionalidade padrão.

Adeus, links azuis do Gmail

Com qualquer um dos nossos três métodos, os links azuis não vão mais atrapalhar o design do seu e-mail e fazê-lo parecer quebrado no Gmail. E isso é ótimo - porque e-mails quebrados podem prejudicar o engajamento e as conversões (e você definitivamente não quer isso).

Tem dúvidas sobre nossos métodos? Ou tem outra solução para compartilhar? Deixe-nos saber nos comentários abaixo.

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 90 clientes de e-mail, aplicativos e dispositivos, incluindo o Gmail. Diga adeus aos e-mails quebrados. Uau!

Comece seu teste grátis →

Publicado originalmente em 13 de outubro de 2017, por Jaina Mistry. Última atualização em 16 de julho de 2021.

Compartilhe, obrigado!

O que você precisa saber para gerenciar os três tipos de assinantes de e-mail inativos

Aprenda como abordar assinantes inativos com base em que tipo de assinante de email inativo eles são, para que você possa criar uma estratégia de reengajamento eficaz.
consulte Mais informação

Nossos exemplos e estratégias de marketing por e-mail no dia dos solteiros favoritos

Os e-mails do Dia dos Solteiros estão se popularizando em todo o mundo (não apenas na China). Veja 8 exemplos de e-mail para inspirar sua campanha e estratégias para começar a planejar.
consulte Mais informação

Matriz holística de métricas de e-mail: você está vendo o quadro todo?

Veja a imagem completa do desempenho do marketing por e-mail com métricas holísticas de e-mail de curto e longo prazo. E crie campanhas de alto desempenho hoje.
consulte Mais informação

Como eliminar os e-mails da Black Friday e da Cyber Monday (BF / CM) fora do parque

Destaque-se e converta assinantes com essas estratégias testadas e comprovadas para e-mails da Black Friday Cyber Monday e exemplos perfeitos para se inspirar.
consulte Mais informação

Renderização de e-mail do Outlook: como aprendi a parar de me preocupar e amar o Outlook

Quer saber por que seus e-mails ficam ruins no Outlook? Saiba mais sobre os problemas de exibição e processamento de e-mail que você pode enfrentar e como corrigi-los para perfeição no e-mail.
consulte Mais informação