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.
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:
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:
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:
2- E, antes do texto, adicionar na célula <td>, a classe criada no head.
Abaixo um exemplo de como o HTML ficou configurado para retirar a formatação em azul:
Abaixo um exemplo de como o HTML ficou no Gmail após a formatação informada:
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:
