Blog de Email Marketing

Templates

Formate os links do seu Email Marketing

Juliana Padron Por Juliana Padron em 11.08.2011

Formatar links num arquivo HTML é algo muito simples de fazer. Agora, formatar links de um arquivo HTML que será enviado por email é algo mais trabalhoso. Isso, claro, devido às inúmeras diferenças de renderização apresentadas pelos diversos programas de email que existem por aí.

Vamos começar, então, pelo básico, explicando as mais simples maneiras de formatar um link. Vamos lá!

Alterando a cor do link

Para não usar aquela cor azul padrão de links, você pode formatar seus textos usando CSS, que já é suportado pelos principais programas de email. No exemplo a seguir, temos um texto com link que está dentro de uma célula de tabela (td):

Perceba que a cor foi definida tanto na tag a de link quanto na tag span dentro dela. Em email marketing, infelizmente, precisamos trabalhar com esse tipo de redundância devido às diferenças de renderização de HTML apresentadas pelos programas de email. Mais adiante neste post, você verá um exemplo de problema que ocorre quando essa redundância não é utilizada.

Alterando o sublinhado do link

Além da cor, a tag de link também deixa o texto sublinhado por padrão. Se você quiser removê-lo, use o código apresentado neste exemplo:

O valor none para a propriedade CSS text-decoration remove o sublinhado do link. O valor underline para esta propriedade deixa o link com o sublinhado. Além destes dois valores, você pode testar outros efeitos visuais usando os valores blink, linethrough e overline da propriedade text-decoration.

Links em datas, endereços e telefones no iOS

Se você costuma conferir a visualização de seus templates de email marketing nos programas de email antes de enviar – e se você inclui as aplicações mobile da Apple nessa rotina de testes -, deve ter percebido que alguns trechos de texto aparecem com link, mesmo que você não os tenha criado.

Esses links aparecem em textos escritos no formato de data, endereço e telefone para mostrar ao leitor que ele pode interagir com essas informações dentro do email.


Se o leitor tocar no link de uma data, por exemplo, o iCal será aberto para que ele crie um evento no dia em questão. Se o link tocado for de um endereço, o Maps será aberto para que o leitor localize a região no mapa ou trace uma rota. Já o link de telefone permite uma discagem imediata para aquele número.

Não se pode negar que são recursos de usabilidade muito práticos, mas é compreensível que você queira remover esses links ou, ao menos, deixá-los com a mesma aparência dos demais links de seu template.

Na verdade, modificar a aparência desses novos links é a única que podemos fazer, já que os textos continuarão a ser clicáveis para que o leitor interaja com outras aplicações do iPad, iPhone ou iPod.

A solução proposta por Tony Linnabery é a criação de uma classe chamada appleDevice e a estilização livre da tag a dentro dessa classe. Assim:

Esse trecho de código deve ser incluído dentro de head no HTML. Faça isso sem medo porque todas as aplicações da Apple suportam folha de estilos incorporadas no cabeçalho do HTML.

Depois, em seu conteúdo, formate com esta classe os textos que, muito provavelmente, se tornarão links (telefones, endereços e datas):

A Litmus também propôs uma mesma solução baseada na sugestão de Tony, mudando apenas o nome da classe para appleLinks:

Porém, há uma nova sugestão, no caso de você ter links de cores diferentes em seu template. Supondo que você tenha um endereço escrito em fundo preto, se ele receber essa classe que criamos, o texto não será legível, porque a cor definida para ele também é preto. Para esses casos onde é necessário usar alto contraste, adicione uma nova classe:

Este trecho de código também deve ser inserido entre <head> e </head> e, no corpo do template, você pode chamar essas classes dentro de uma tag div, span,, td etc.

Para entender melhor como funcionam esses e outros links especiais nas aplicações baseadas em iOS, você pode ler o trecho da documentação oficial que fala sobre isso.

Links no Yahoo! Mail

Um problema que afeta o Yahoo! Mail Beta (e não o Yahoo! Mail Classic) é a renderização de links dos emails em HTML em um tom específico de azul (#366388), independente a formatação que você tenha inserido em seu template.

Para resolver esse problema, existem duas soluções, ambas definindo a formatação dos links no cabeçalho do código, entre <head> e </head>.

1. Uso da classe .yshortcuts

No cabeçalho do seu código HTML, inclua esse trecho:

Nas tags de link do corpo do template, não precisa chamar essas classes, só ter esta declaração no cabeçalho é suficiente.

2. Redefinição do elemento a e seus pseudo-elementos com !important

A segunda solução é mais consistente porque não formata uma classe específica, que pode ser alterada a qualquer momento pelo Yahoo! Mail, mas apenas reforça a formatação dos links do template redefinindo a tag a e seus pseudo-elementos:

O sublinhado que continua azul mesmo com o texto em outra cor

Talvez você já tenha visto links em emails em HTML que se apresentam dessa forma:

A cor do texto é vermelha, mas o traço do sublinhado continua com aquela cor azul característica de links. E isso ocorre em qualquer aplicação de email, seja ela mobile, web (Internet Explorer ou Firefox) ou desktop.

O motivo é a formatação apenas do texto do link, e não da tag de link como um todo. Provavelmente, o código é algo parecido com isso:

No lugar da tag span, também pode ter sido utilizada a tag font. Dessa forma, apenas o texto dentro do link é formatado, não tendo instrução alguma de formatação dentro da tag a.

Para corrigir esse problema, basta adicionar as propriedades de formatação de aparência também na tag de link, desta forma:

Note que a tag span, formatando o texto interno do link, permanece.

Links de opt-out

O CAPEM sugere que o remetente ofereça, em sua mensagem, ao menos 2 formas de opt-out para os usuários. Nós sugerimos o uso de um link para o opt-out automático (que é o método padrão das plataformas de envio de email marketing) e um endereço de email para o qual o destinatário pode escrever solicitando expressamente o cancelamento de seu cadastro.

Link para opt-out automático

Se você contratou uma plataforma de envios para realizar suas ações de email marketing, ela já deve inserir automaticamente no seu template, no momento do envio, os links de preview e de opt-out. Porém, como é uma inserção automática, ela sempre tem a mesma aparência, que pode não estar de acordo com o design do seu template.

Em algumas plataformas, você pode alterar a aparência desses links e até mesmo o texto proposto pelo sistema, de forma que fiquem totalmente de acordo com o seu design.

Para isso, você precisa conhecer quais são os parâmetros dos links de preview e de opt-out utilizados pela plataforma para poder inseri-los e formatá-los manualmente no template. Esses parâmetros são informados pela área técnica da plataforma de envios em questão, e você só precisa saber se o modo de uso é como um endereço de link ou se é como uma tag, assim:

Perceba que, em vez de constar como um destino da tag a, o parâmetro que faz funcionar o link de preview da mensagem se parece com uma tag: webversion. Tanto que, se você tentar validar o código HTML do template no W3C, ele irá apontar um erro nesta linha, dizendo que a tag webversion não existe.

Fique tranquilo, pois no momento do envio do email marketing, esta tag estranha será substituída por uma tag normal de link com um endereço normal no href, e seu código HTML será válido – caso não tenha sido apontado nenhum outro erro na validação.

Na plataforma de email marketing da Templateria, os links de preview e de opt-out são parâmetros inseridos dentro do atributo href da tag a, desta forma:

Só é preciso personalizar a tag a com o atributo style do CSS para formatar cada link com a cor desejada.

Email para solicitação de opt-out e/ou contato

Em alguns templates, você também já deve ter visto uma frase de opt-out assim: “Solicite o cancelamento de seu cadastro escrevendo para o email exemplo@example.com”.

Este endereço de email contém um link para uma tela do programa de email de composição de uma nova mensagem, já com este endereço preenchido no campo Destinatário. Se você não criar um link neste endereço de email no momento em que estiver editando seu template, os programas de email, quando receberem sua mensagem, irão incluir o link automaticamente, porém, com aquela formatação padrão de link: azul e com sublinhado.

Se você não quiser esse efeito visual, é melhor formatar o link deste email enquanto estiver editando seu template. Para criar um link para um endereço de email no seu template, use o seguinte exemplo de código:

Note que você precisará alterar o endereço de email que aparece na frase e também o endereço do email no destino do link apontado na tag a, dentro do atributo href. Mantenha o mailto: que aparece antes, pois é essa instrução que diferencia um link para endereço de email de um link para endereço da web (que começa com http://www).

Para alterar a aparência deste link, use todas as dicas que citamos anteriormente neste post.

Viu só, como formatar links de um email marketing pode se tornar algo bem trabalhoso (pra não dizer “irritante”)? Só lembre de aplicar todas as recomendações que fizemos e você não terá problemas. Alguém tem sempre que fazer o trabalho sujo, não?

Assine Nossa Newsletter


Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações