Formatação do texto alternativo no email

Dinamize EspecialistasDinamizeLeave a Comment

Formatação do ALT Text no HTML

Peça chave do conteúdo do email marketing, o texto alternativo tem a função de instigar a curiosidade, despertando o interesse do contato para acessar seu conteúdo de forma completa.

O texto alternativo, ou ALT text, é uma mensagem exibida quando uma imagem é bloqueada na caixa de email do contato, servindo como uma identificação para o que deveria estar sendo mostrado. Este texto pode ser formatado para que seja exibido da forma que você deseja, com tamanho, cor e estilo da sua escolha.

O texto alternativo é inserido nas imagens e só aparecerá para seu contato quando o seu provedor de email não realizar o download do conteúdo de forma automática. Este texto será mostrado então como forma de convite, para que o contato autorize o download das imagens ou até mesmo para que possa ler o conteúdo do seu envio, mesmo que não baixe as imagens.

Neste exemplo abaixo, mesmo que o usuário não baixe as imagens, ele consegue ler todo o conteúdo da mensagem através da combinação de texto e texto alternativo com estilo definido.

Texto alternativo

Esta utilização também é bem importante para usuários que possuem deficiência visual, pois o ALT é utilizado pelos leitores de tela para descrever a imagem do envio. É também um fator essencial para os filtros anti-spam de provedores de email identificarem que seu conteúdo é confiável ou não a partir do texto inserido.


Configurando o ALT text Padrão

Definir o texto ALT nas imagens de um HTML é simples, já que o atributo ALT é uma informação padrão na configuração de imagem dos HTMLs.

Ele pode ser definido no HTML de seu código desta forma:

<img src=”http://dl.dnzdns.com/v/Axczd2ABF0416″ width=”400″ height=”149″ alt=”O Inbound marketing simples, fácil de usar e que entrega.”>

Quando o contato receber sua mensagem e tiver baixado as imagens por padrão em seu gerenciador de email, aparecerá da seguinte forma:O Inbound marketing simples

Ou seja, o texto configurado no ALT não será visível para o usuário final. Mas caso ele não baixe as imagens por padrão, exibirá o conteúdo desta maneira:

Veja como a imagem aparece no Gmail ao ser bloqueada

Adicionando Estilo ao Texto Alternativo

Agora que você já sabe como funciona o ALT no conteúdo da sua mensagem, vamos explicar como adicionar estilo a este texto alternativo, adicionando um comando de CSS Inline para alterar cor, tamanho, estilo e peso do texto.

Veja esse exemplo de imagem com o atributo ATL personalizado:

<img src=”http://dl.dnzdns.com/v/Axczd2ABF0416″ width=”500″ height=”462″ style=”width: 100%; height: auto; display: block; color: #ffffff; font-size: 36px; font-family: sans-serif; background: #333333;” alt=”O Inbound marketing simples, fácil de usar e que entrega.”/>

O mesmo texto que foi exibido no exemplo anterior está sendo exibido de maneira mais legível e dinâmica para seu usuário final. Isso é resultado da aplicação de estilo no atributo ALT.

O inbound marketing simples e que entrega

Entretanto, nem todos os navegadores e provedores de e-mail aceitam esta configuração, veja abaixo quais são as restrições dos webmails mais conhecidos:

O Internet Explorer é o exemplo de navegador que não possui total responsividade quanto à formatação do atributo ALT. Somente é aplicada a formatação das cores, porém a fonte e outras estilizações não são compatíveis; e dessa forma, acabam sendo ignoradas.

O programa de gerenciamento de email Microsoft Outlook possui limitação na leitura do estilo da formatação do atributo ALT. Somente a versão 2010 permite que seja inserida cor neste texto, outras estilizações não são permitidas pelo programa. As demais versões do programa não leem a estilização dessa tag.

No geral, a tag ALT é altamente utilizada pelos provedores de emails mais populares, e ajudará não somente a passar a mensagem que você quer transmitir no seu email, mas também no download das suas imagens.

Receba o conteúdo no email

Saiba quais as configurações essenciais para envios de email marketing


Post por Marcelly Rick e Felipe Cardoso
Diagramação por Tamiris Arias