Configurações

Envio

Como corrigir links em azul e sublinhados no Gmail

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


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


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


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


Classe CSS


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


exemplo de código


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


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.