Como corrigir links em azul e sublinhados no Gmail

Dinamize EspecialistasCapa, Dica, Dicas do Mail2Easy PRO, Dicas do MKT2Easy

Como corrigir links em azul e sublinhados no Gmail

Recentemente o Gmail lançou uma atualização para usuários do Google Suite, no 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.


o azul sublinhado someGostou deste artigo?

Faça o download



Post por Felipe Cardoso
Diagramação por Tamiris Arias


Fontes:

https://gsuiteupdates.googleblog.com/2017/09/Gmail-will-convert-addresses-phone-numbers-and-contacts-into-links.html


Conteúdo relacionado

Deixe um comentário