Como corrigir links em azul e sublinhados no Gmail

Compartilhe este conteúdo

Facebook
Twitter
LinkedIn

Como corrigir links em azul e sublinhados no Gmail

Recentemente o Gmail lançou uma atualização para usuários do Google Suite, na qual endereços e números de telefones são automaticamente vinculados nos e-mails. Ao clicar nos endereços, o usuário é encaminhado para o Google Maps e ao clicar no telefone é direcionado diretamente para o aplicativo de discagem do celular.

Esta atualização foi feita para agilizar o uso de e-mails no celular e navegadores, para que ao invés de copiar os dados e colar no navegador, o usuário seja direcionado diretamente aos aplicativos apenas com um clique.

Links em endereços e telefones

Mas, para os designers de email marketing, esta atualização não foi muito boa, isso porque estes link de redirecionamento ficam com um sublinhado e na cor azul, desconfigurando o layout do e-mail programado.

Por que as informações se tornam azuis?

Quando o Gmail localiza um endereço ou número de telefone em um email, ele adiciona automaticamente uma declaração de estilo extra, que formata qualquer link no email, que não tem nenhum estilo inline anexado a ele, como azul:

classe css
classe css

A classe .ii refere-se à classe dada à div que contém todo o email, nos clientes de e-mail do Gmail. A [href] é um seletor de atributos CSS. No Gmail, este seletor de atributo CSS está declarando que qualquer link na classe .ii precisa ser da cor azul.

Abaixo um exemplo de como o envio ficou no Gmail:

Exemplo de email
Exemplo de email


O que podemos fazer para impedir que estes links fiquem em azul?

Os links em azul podem parecer feios, mas eles são importantes. Eles se tornam mais convenientes para os contatos que recebem seu e-mail, seja para navegar ao local que você adicionou ou para realizar uma ligação rápida, então a funcionalidade continua, mas podemos corrigir esta formatação em azul, para mantermos nosso layout.

Para evitar esta formatação, deve-se adicionar duas funções em seu HTML:

1- Adicione no head de seu HTML a propriedade de style abaixo:

código css
código css

2- E, antes do texto, adicionar na célula <td>, a classe criada no head.

Classe CSS
Classe CSS

Abaixo um exemplo de como o HTML ficou configurado para retirar a formatação em azul:

exemplo de código
Exemplo de código

Abaixo um exemplo de como o HTML ficou no Gmail após a formatação informada:

Exemplo correto
Exemplo correto

Com a configuração apresentada acima, o azul e o sublinhado não aparecem mais em seu HTML, mas as informações ainda funcionam como link.




Post por Felipe Cardoso
Diagramação por Tamiris Arias


Fontes:

Google Workspace Updates: Addresses, phone numbers, and contacts now converted to links in Gmail and Inbox to save users time


Newsletter

Cadastre-se para receber dicas de marketing e vendas, cases e muito mais por

Utilizamos cookies para melhorar a sua experiência em nosso site. Para mais informações, visite nossa Política de Privacidade.