16.11.2012 Views

fatos - All In Mail

fatos - All In Mail

fatos - All In Mail

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Série Manuais<br />

Manual para<br />

montagem de<br />

e-mail marketing


www.allinmail.com.br<br />

introdução<br />

Como seus clientes recebem seus e-mails?<br />

web<strong>Mail</strong><br />

Gmail<br />

web<strong>Mail</strong><br />

Yahoo! <strong>Mail</strong><br />

web<strong>Mail</strong><br />

uol e bol<br />

Cliente de e<strong>Mail</strong><br />

windows <strong>Mail</strong><br />

Cliente de e<strong>Mail</strong><br />

Microsoft Outlook<br />

Cliente de e<strong>Mail</strong><br />

thunderbird e terra<br />

ConCluSão<br />

O que tiramos de tudo isso?<br />

aPêndiCe 1<br />

Guia de Suporte CSS em e-mail<br />

em caso de dúvidas, estamos à disposição em nossos canais de atendimento:<br />

• Telefone: 11 3627-3677 • E-mail: suporte@allin.com.br<br />

(de segunda a sexta, das 9h às 19h)<br />

<strong>All</strong> <strong>In</strong> <strong>Mail</strong> é uma ferramenta de entrega e gerenciamento de campanhas<br />

de e-mail Marketing, que atende a cada cliente como se fosse o único.<br />

Nosso objetivo é entregar resultado para o cliente e gerar resultado efetivo<br />

tanto na abertura quanto na venda.<br />

Última atualização deste manual: 08 de junho de 2011<br />

3<br />

6<br />

13<br />

16<br />

21<br />

25<br />

33<br />

38<br />

40


“O e-mail quando feito com responsabilidade e enviado apenas para os usuários que realmente<br />

querem receber seus e-mails, torna-se uma ferramenta de marketing direto sem comparação,<br />

<strong>fatos</strong><br />

principalmente por causa do avanço da tecnologia antispam” - Victor Popper, CEO da <strong>All</strong><strong>In</strong>.<br />

Como seus clientes recebem seus e-mails?<br />

Com a crescente participação do e-mail na vida das pessoas, ele passou a ser uma<br />

importante ferramenta de comunicação, que merece muita atenção e cuidado para ser<br />

utilizado da forma correta.<br />

atualmente existem inúmeros clientes de e-mail, divididos entre webmails e versões<br />

para desktop. Como cada um deles possui particularidades, explicaremos por partes as<br />

suas diferenças, com o objetivo de auxiliar o profissional no desenvolvimento de<br />

templates para o e-mail marketing.<br />

W E b m a i l s<br />

Gmail<br />

iG<br />

ibest<br />

Yahoo!<br />

C l i E n T Es d EskTo p<br />

thunderbird<br />

Microsoft Outlook 2003<br />

Microsoft Outlook 2007<br />

Yahoo! <strong>Mail</strong> beta<br />

bol<br />

uol<br />

windows live<br />

outlook express<br />

windows <strong>Mail</strong><br />

windows live <strong>Mail</strong><br />

Para facilitar a compreensão, serão abordados os seguintes tópicos para cada webmail e<br />

cliente desktop:<br />

• Suporte a CSS<br />

• Suporte aos atributos de tags HtMl<br />

• Suporte a formulários<br />

• Suporte a vídeos<br />

• Suporte a animação<br />

• Codificação de caracteres (suporte à acentuação)<br />

• bloqueio de imagens<br />

• Painel de pré-visualização (preview pane)<br />

• exibição do assunto e remetente<br />

• espaço disponível para exibição do template<br />

Hotmail<br />

terra<br />

apple <strong>Mail</strong><br />

As informações necessárias para a criação do design e para a renderização de<br />

templates são fundamentais para que o e-mail marketing chegue a caixa de entrada<br />

do destinatário, sem defeitos e da forma como foi criado.<br />

3


Todos nós queremos construir nossas bases e enviar nossas mensagens para o máximo de pessoas<br />

possível, e também assegurar que as pessoas em nossa lista se importem com o que estamos<br />

<strong>fatos</strong><br />

enviando. Mas o crescimento de usuários na base nunca é igual ao crescimento do engajamento.<br />

Como seus clientes veêm seus e-mails?<br />

Para entender o motivo das diferenças entre clientes de e-mail, é preciso entender que<br />

o mercado evolui e se transforma mais a cada dia. Por um lado, designers e receptores<br />

de e-mail são beneficiados pelos avanços na criação dos templates. Por outro, as<br />

mudanças fazem com que cada cliente de e-mail se adapte a elas de alguma forma.<br />

Citaremos como exemplo, o uso da formatação Css, considerado inviável até alguns anos<br />

atrás. Hoje, já é aceito por alguns clientes de e-mail. atualmente, apenas o apple mail,<br />

Thunderbird, Yahoo! e Windows live suportam propriedades como float, margin e padding,<br />

de forma que, exclusivamente para eles, é possível criar templates em tableless.<br />

Como mencionado anteriormente, não são todos os clientes que se adaptam às<br />

mudanças na plataforma web. É o caso do Lotus Notes, Gmail e Outlook 2007 que, por<br />

não oferecerem suporte a esses padrões de desenvolvimento, necessitam do uso de<br />

técnicas ultrapassadas de codificação HTML.<br />

Para evitar problemas decorrentes dessas diferenças foi criado o projeto internacional<br />

E-mail standards. Ele contribui para a evolução de aplicações web, melhorando seu<br />

suporte e acessibilidade, por meio do trabalho conjunto entre desenvolvedores de<br />

aplicações e designers. Unindo esses dois profissionais é possível conciliar a importância<br />

da elaboração do design com a consistência da renderização, e assim evitar possíveis erros.<br />

Na criação do e-mail marketing é importante que o Web Standards, conjunto de normas<br />

estabelecidas pela W3C, seja seguido. Com ele é possível alcançar, entre diversos<br />

benefícios, melhorias na usabilidade da mensagem. Ao formatar no padrão recomendado<br />

para o e-mail marketing, HTML 4.01 Transitional, é utilizada a tag font, a qual possibilita<br />

a determinação por size, que varia entre 1 e 7 (sendo 1=9 px e 2=13px).<br />

arial<br />

VErdana<br />

TaHoma<br />

TimEs<br />

GEorGia<br />

rEndErização Em sizE = 1 rEndErização Em fonT-sizE: 9px<br />

4


Separe as pessoas que estão abrindo e clicando suas mensagens com mais freqüência. Estes são<br />

os seus clientes mais ativos, os que se preocupam mais com o que você está enviando e que<br />

<strong>fatos</strong><br />

realmente optam por se envolver com suas mensagens e, por extensão, com a sua empresa.<br />

Como seus clientes veêm seus e-mails?<br />

embora o tamanho da fonte pareça ser o fator de maior impacto na leitura do e-mail<br />

marketing, deve-se ressaltar a importância da escolha da família. A tabela na página 4<br />

mostra que algumas delas são mais legíveis do que outras, por apresentarem<br />

características distintas como, por exemplo, a presença ou não de serifas. <strong>In</strong>clusive,<br />

é constatado que fontes com serifa são ideais para leitura de impressos e as sem, ideais<br />

para leitura em tela.<br />

Para ilustrar essa afirmação, compare a leitura de fontes diferentes no mesmo tamanho<br />

e repare como no size 1, a família Verdana, é muito mais legível do que a Times.<br />

esse foi apenas um exemplo de que não só o tamanho, mas também a escolha da<br />

família são importantes para criar um template legível e adequado.<br />

Por outro lado, o design proposto e a identidade visual do cliente devem ser preservados,<br />

de forma que essa escolha não seja baseada somente no que permite melhor leitura,<br />

mas sim num conjunto de decisões relacionadas ao briefing.<br />

O fato de o size 1 corresponder a 9 px e o size 2 corresponder a 13 px demonstra a<br />

existência de uma grande diferença de tamanhos entre eles e ausência de um<br />

meio-termo. Com isso, por vezes deve-se optar por uma fonte menor ou maior do que<br />

a desejada, uma vez que não é possível utilizar tamanhos intermediários como 10px,<br />

11px e 12px.<br />

Esses foram alguns exemplos relevantes de particularidades sobre as aplicações do<br />

e-mail marketing. É necessário, no entanto, entender mais sobre cada cliente de e-mail<br />

para minimizar problemas decorrentes de renderizações mal feitas, garantindo o envio<br />

correto da mensagem ao destinatário. Com isso, o sucesso do trabalho é resultado do<br />

conhecimento adquirido sobre os métodos e ferramentas de codificação, associados à<br />

análise de sua base de dados.<br />

5


Ainda se retirarmos o envio de spam do volume total de e-mails trafegados globalmente (que pode<br />

chegar a 90%), nós verificaremos que o tráfego mensal ainda é infinitamente superior a qualquer<br />

<strong>fatos</strong><br />

ferramenta de mídia social, já que o Twitter só recentemente chegou ao POST de número 20 bilhões.<br />

webmail: Gmail<br />

i n T rodução<br />

Existem duas versões do Gmail: uma mais antiga que ainda pode ser acessada por meio<br />

de um link na página inicial e a mais recente, utilizada pela maioria de seus usuários.<br />

A versão antiga é a mesma utilizada atualmente pelo IG e iBest. Por este motivo, a<br />

análise a seguir será divida em Gmail - versão antiga e Gmail - versão recente, de forma<br />

a tratar das características dos três webmails.<br />

C s s (H T m l)<br />

As duas versões de Gmail possuem restrições quanto à renderização de estilos.<br />

A formatação só será funcional caso seja utilizado o CSS inline em todos os elementos,<br />

evitando a atribuição de estilos automáticos para a tag .<br />

Diferente do UOL/BOL, se ela não for feita dessa forma, o Gmail irá renderizar os<br />

elementos HTML automaticamente, mantendo a estrutura compreensível, sem aplicar<br />

sua própria formatação. Ou seja, ele não impõe fontes e tamanhos e possibilita uma<br />

formatação onde a hierarquia de títulos é identificada e a leitura não é comprometida.<br />

além disso, o CSS não possui suporte para background-image, de forma que a utilização<br />

de uma imagem de fundo só ocorra quando é atribuída a determinado elemento e sua<br />

tag (exceto para ). Porém, é importante ressaltar que a imagem de fundo irá se<br />

repetir na horizontal e na vertical.<br />

Para utilização de background as restrições se repetem, uma vez que todas as formatações<br />

serão ignoradas, caso o atributo seja agrupado a todas as formatações de fundo. Sendo<br />

assim, excluindo alternativas como background-image e, consequentemente,<br />

background-position, background-repeat, background-attachment, que também se<br />

referem ao uso de imagem, a única opção é utilizar o background-color. Por não suportar<br />

o background-image, a formatação de listas com bullets se restringe ao uso do atributo<br />

list-style-type, determinando caracteres específicos como ícones da lista.<br />

Voltando ao assunto formatação, pode-se verificar que na versão anterior do Gmail<br />

e, portanto, nas versões atuais do iG e ibest, todos os textos precisam ser formatados<br />

separadamente. Pode-se perceber que a nova versão aceita, sem problema algum, a<br />

aplicação de estilos de texto em tag para todos os elementos textuais, enquanto<br />

a antiga encontra uma série de dificuldades. A renderização ocorre corretamente em<br />

ambas as interfaces, somente se cada linha de texto for individualmente formatada,<br />

utilizando uma das formas a seguir:<br />

6


Não compre banco de dados, mas forme o seu próprio, através de ações promocionais com<br />

clientes, cadastramento online e outras soluções simples. Muitas empresas apostam no volume,<br />

<strong>fatos</strong><br />

mandam milhares de e-mails para garantir venda e acabam excluídas pelos próprios provedores.<br />

1) Por meio de CSS:<br />

<br />

Aqui entra o texto que deve ser formatado.<br />

<br />

2) Por meio da tag :<br />

<br />

Aqui entra o texto que deve ser formatado.<br />

<br />

l i n ks<br />

nas duas versões do Gmail diferentes efeitos ocorrem sobre os links, de acordo com o<br />

browser utilizado e não devido às características singulares do webmail.<br />

nas representações a seguir será possível analisar o template original, comparado ao<br />

que é visualizado no Firefox e no <strong>In</strong>ternet Explorer.<br />

1. E-mail visualizado no <strong>In</strong>ternet Explorer<br />

A conclusão é de que todos os textos do e-mail marketing que se tratarem de um<br />

website ou de um endereço de e-mail deverão ser formatados independentemente do<br />

resto do texto. Caso não seja feito, acontecerá como no exemplo acima e eles herdarão<br />

formato de links, na cor azul e sublinhados.<br />

s u p o rTE ao s aT r i b u To s d E TaG s H T m l<br />

2. E-mail visualizado no Firefox<br />

• tanto a versão anterior como a mais recente, suportam o Cellpadding e o<br />

Cellspacing, atributos utilizados para formatação de layouts em tabelas.<br />

• o atributo background, assim como o background-image, background-position<br />

e background-repeat não são suportados pelas duas versões do Gmail.<br />

3. Arquivo original do e-mail<br />

7


A análise do comportamento do usuário de internet está evoluindo a passos largos.<br />

Os provedores analisam o comportamento do usuário na hora de ler seus emails, se ele<br />

<strong>fatos</strong><br />

abre, se clica na mensagem e, com isso, priorizam na caixa postal o que é mais relevante.<br />

• em nenhuma versão do Gmail os atributos da tag são suportados.<br />

• não possui suporte para tag ol e nem map, o que prejudica o uso de imagens<br />

mapeadas com links em diferentes posições.<br />

b lo q u E i o d E i m aG E n s<br />

imagens recebidas de remetentes desconhecidos são bloqueadas em ambas as<br />

versões do Gmail, porém elas podem ser vistas de diferentes formas, de acordo com<br />

o navegador utilizado.<br />

Visualização do template com imagens bloqueadas no mozilla firefox<br />

Quando a imagem de um remetente desconhecido é enviada para uma versão anterior<br />

do Gmail, iG ou ibest, nota-se que ela exibe um ícone de imagem quebrada no interior<br />

de uma caixa de bordas de 1px no local da imagem original, cujas dimensões foram<br />

incluídas no código HTML. Por esse motivo, a quebra pode prejudicar a visualização do<br />

texto, caso ele seja maior do que a área delimitada.<br />

Já na versão atual, a imagem não exibe bordas nem ícones, não prejudicando o texto.<br />

1. Gmail versão antiga<br />

Visualização do template no internet Explorer<br />

Para ambas as versões, a visualização no <strong>In</strong>ternet Explorer é a mesma. Nos dois casos<br />

a imagem aparece dentro de caixas, o tamanho dos textos são alterados e apenas as<br />

cores indicadas na formatação são mantidas.<br />

1. Gmail versão antiga<br />

2. Gmail versão atual<br />

2. Gmail versão atual<br />

8


Por mês, em média são enviados 3 bilhões de e-mails em todo país e 90 bilhões no<br />

mundo, nesse universo, tem sucesso apenas aquela mensagem que chega para a pessoa<br />

<strong>fatos</strong><br />

interessada em determinado produto ou serviço, enviada de maneira eficiente.<br />

a n i m aç ão<br />

flash<br />

Para todos os navegadores e todas as versões do Gmail (anterior e atual), incluindo<br />

portanto, IG e iBest, não há suporte para animações em Flash. Mais do que isso, no<br />

espaço onde o conteúdo deveria aparecer, fica apenas um espaço vazio, que não indica<br />

a presença de um arquivo SWF e nenhum alerta de segurança é enviado ao usuário.<br />

Gif animado<br />

Todos os webmails analisados neste conjunto suportam imagens em GIF animado, com<br />

uma única restrição, que está relacionada ao tamanho do template:<br />

ele não pode exceder o limite de 100kb.<br />

V í d Eo s<br />

Assim como os arquivos Flash não são aceitos no corpo do e-mail na versão antiga e na<br />

recente do Gmail, vídeos inserido por meio de tag também não são suportados.<br />

Gmail - versão nova<br />

A versão recente do Gmail permite a exibição de vídeos do Youtube na área destinada<br />

a anexos, somente se o link estiver escrito no corpo da mensagem e não embutido<br />

em uma tag ou . Essa nova função é disponibilizada na área Labs do<br />

Gmail atual.<br />

CodifiCaç ão d E C a r aC T E r Es<br />

Todos os webmails analisados (Gmail, IG e iBest) responderam corretamente aos testes<br />

de codificação. Porém, para que não ocorram problemas inesperados a sugestão é de<br />

que seja utilizada a codificação ISO-8859-1 e que os acentos e caracteres específicos<br />

sejam convertidos em seus nomes de entidade.<br />

Veja alguns exemplos e acesse a tabela completa em<br />

http:// w3schools.com/tags/ref_entities.asp.<br />

Á = &Aacute Ç = &Ccedil<br />

9


Oferecer conteúdo de interesse do cliente e só enviar mensagem para usuários cadastrados<br />

é o segredo para fidelizar clientes. Quem compra banco de dados e manda mensagens<br />

<strong>fatos</strong><br />

indiscriminadamente se classifica como spam e vai direto para o lixo eletrônico.<br />

pa i n E l d E p r é-V i s ua l i zaç ão<br />

embora o Gmail e os outros dois webmails analisados não apresentem painel de<br />

pré-visualização da mensagem, o usuário poderá ter uma prévia do conteúdo do e-mail,<br />

por meio da visualização dos primeiros caracteres do HTML que aparecem junto ao<br />

subject da mensagem.<br />

Como os trechos que aparecem são sempre os primeiros da codificação, é interessante<br />

utilizar, para destinatários que possuem estes webmails, um breve descritivo da mensagem<br />

no início da codificação HMTL. Assim, mesmo sem a pré-visualização, o usuário<br />

terá acesso a uma prévia da mensagem que irá ajudá-lo a decidir por abrir ou não o<br />

e-mail.<br />

a s s u n To E r E m E T E n T E<br />

O limite de caracteres no Assunto do e-mail varia de acordo com a resolução utilizada:<br />

resolução de 1280x1024<br />

90 caracteres, com interrupção no 87º e inserção de reticências, totalizando assim o<br />

limite estipulado (87+3=90).<br />

resolução de 1024x768<br />

65 caracteres, sem interrupção de reticências.<br />

resolução de 800x600<br />

de 33 a 35 caracteres, sem interrupção de reticências.<br />

remetente: deve ser até 25 caracteres<br />

Como explicado anteriormente, pode-se perceber que nas resoluções menores o<br />

assunto foi interrompido sem uso de reticências ao exceder o limite. Além disso, a<br />

versão do iG e ibest possuem uma singularidade em relação ao remetente, que<br />

possibilita o aumento da barra de rolagem da mensagem. Isso se deve ao fato de que,<br />

10


De acordo com a SenderBase.org, organização da Cisco para monitoramento do tráfego<br />

global de e-mails, o e-mail é utilizado para comunicação pessoal com muito mais regularidade<br />

<strong>fatos</strong><br />

do que as redes sociais e o trafego mensal de emails passa dos 20 trilhões de mensagens.<br />

ao extrapolar o limite, o remetente não pode ser lido inteiramente na caixa de entrada.<br />

Uma vez aberta à mensagem, o webmail aumenta a barra da rolagem, possibilitando<br />

assim, a leitura integral.<br />

Por outro lado, essa expansão horizontal desloca o template para a direita numa tentativa<br />

de centralizar a mensagem e, com isso, pode prejudicar a leitura.<br />

Deve-se ressaltar que a versão atual do Gmail não possui tal característica, de forma<br />

que o remetente é sempre interrompido ao extrapolar o limite de caracteres.<br />

Espaço d i s p o n í V E l pa r a o T E m p l aT E<br />

O layout do Gmail atual é fluido, isto é, se adapta a resolução da tela, fazendo com que<br />

a exibição do template sofra variações de acordo com ela.<br />

Por outro lado, sua versão anterior, correspondente a atual do ibest e iG, amplia a área<br />

de exibição do template de acordo com o tamanho do remetente. Isso significa que, se<br />

o nome for muito grande e tiver um número elevado de caracteres, o texto não sofrerá<br />

quebras de linhas e a tela ganhará barras de rolagem horizontais.<br />

mensagem exibida na resolução de 1280x1024 com espaço para exibição<br />

do template de 780px:<br />

11


Uma estratégia muito praticada em países onde o e-mail marketing está mais evoluído, é o envio<br />

de descontos e promoções mais agressivos para o grupo de usuário com baixo engajamento.<br />

<strong>fatos</strong><br />

Contudo, a freqüência de e-mails enviados para este grupo de usuários precisa ser menor.<br />

mensagem exibida na resolução de 1024x768 com espaço para exibição<br />

do template de 550px:<br />

mensagem exibida na resolução de 800x600 com espaço para exibição do<br />

template de 550px:<br />

12


Se você utiliza o Front Page, retire meta name=?Generator? content=?Front Page?/<br />

ou qualquer referência ao nome Front Page do código, pois as ferramentas<br />

<strong>fatos</strong><br />

anti-spam dão uma pontuação alta aos templates produzidos nesse software.<br />

webmail: Yahoo! <strong>Mail</strong><br />

i n T rodução<br />

analisaremos neste capítulo as duas versões do webmail do Yahoo!:<br />

as diferenças que existem entre a versão mais recente, Yahoo! <strong>Mail</strong> e a versão anterior,<br />

Yahoo! <strong>Mail</strong> Classic.<br />

a principal diferença entre eles é que a versão recente oferece uma navegação muito<br />

mais simples para usuário, apresentando, por exemplo, painel de leitura na parte<br />

inferior a listagem da caixa de entrada. Além disso, a área destinada a publicidade, que<br />

antes ficava no topo hoje é opcional e se encontra na lateral do webmail. Assim, como<br />

o Gmail, o usuário pode optar por utilizar a versão antiga, acessando para isso, um link<br />

disponível em sua página inicial.<br />

O desempenho nas duas se mostrou muito eficiente, apresentando apenas algumas falhas<br />

que podem ser consertadas na criação do e-mail marketing.<br />

Como benefícios, se destacam dois aspectos presentes em ambas as versões:<br />

• definição pelo próprio usuário sobre o bloqueio de imagens<br />

O usuário pode optar por bloquear ou liberar todas as imagens de acordo com seu<br />

interesse.<br />

• Capacidade de reconhecimento de mensagens com certificado digital<br />

O webmail se responsabiliza por identificar mensagens cujos remetentes são<br />

verdadeiros e confiáveis, protegendo o usuário de tentativas de smap ou phishing.<br />

Além disso, as mensagens certificadas são reconhecidas pelo usuário por meio de um<br />

ícone presente tanto na caixa de entrada, como no momento em que o e-mail é aberto.<br />

isso permite que as mensagens seguras entrem direto na caixa de entrada do<br />

destinatário, com exceção dos casos em que ele as defina como spam.<br />

C s s<br />

Yahoo! mail Classic<br />

A versão mais antiga do webmail suporta somente o CSS inline, porém apresenta alguns<br />

erros na renderização de textos que foram definidos dentro da tag . Quando isso<br />

ocorre, o Yahoo! mail Classic aplica seu estilo ao texto:<br />

fonte arial na cor preta, tamanho 12 px.<br />

13


Na hora de montar um e-mail marketing, não se esqueça que as imagens devem vir em links<br />

absolutos e hospedadas em um servidor. Use tag ALT para garantir que mesmo quem não visualiza<br />

<strong>fatos</strong><br />

imagens tenha uma idéia do que estaria ali, como um conteúdo ou uma referência a um site.<br />

O posicionamento de elementos pode ser feito por meio do float e a utilização de<br />

imagens como plano de fundo (exceto no body) são suportadas. No entanto as propriedades<br />

position, top, bottom, left ou z-index não são aceitas nesta versão.<br />

Yahoo! mail<br />

Para a nova versão as mesmas limitações se aplicam, com poucas exceções. O Yahoo!<br />

<strong>Mail</strong> passa a suportar hover, list-style-image e a propriedade white-space.<br />

s u p o rTE ao s aT r i b u To s d E TaG s H T m l<br />

Yahoo! mail Classic<br />

este é o único webmail que suporta a tag ol permitindo a construção de listas<br />

ordenadas.<br />

além disso não suporta os seguintes atributos:<br />

• type da tag li<br />

• Bordercolor para table, tr e td.<br />

• tag body<br />

• Border e usemap de imagens*<br />

Yahoo! mail<br />

a versão mais recente do webmail do Yahoo! deixa de suportar a tag ol para<br />

criação de listas ordenadas e passa a aceitar atributos background e text.<br />

b lo q u E i o d E i m aG E n s<br />

As duas versões do Yahoo! são configuradas para bloquear imagens recebidas. Porém, o<br />

diferencial deles é que o usuário pode optar por liberá-las para todas as mensagens<br />

(exceto as da caixa de spam) ou apenas para os remetentes conhecidos.<br />

No caso das imagens estarem bloqueadas e o usuário utilizar o firefox como servidor,<br />

existem duas formas de representação da imagem: na primeira delas, quando as<br />

dimensões da imagem não são declaradas, o texto alternativo é renderizado sem<br />

nenhuma demarcação da imagem. No caso das dimensões e o atributo ALT serem<br />

declarados na codificação, no local da imagem aparece um quadro com seu tamanho<br />

original, com o texto alternativo em seu interior, acompanhado de um ícone de erro.<br />

Utilizando o internet Explorer, tanto faz a presença das dimensões da imagem na<br />

codificação. De uma forma ou de outra, aparecerá um quadro com ícone de imagem. Se<br />

existir um texto alternativo, ele aparecerá junto ao quadro representativo da imagem.<br />

*Pode-se concluir que esta versão não suporta mapeamento de imagens por meio da associação da tag<br />

área com o atributo usemap.<br />

14


Mesmo com a melhora da banda larga no país, tente manter o e-mail bem leve: o HTML deve<br />

ter no máximo 30kb (preferencialmente 20kb), as imagens no máximo 50kb. E por mais que<br />

<strong>fatos</strong><br />

a altura não costume ser um limitador, deixe-a o menor possível para evitar muita rolagem.<br />

formulários<br />

Para as duas versões, os dois formatos de formulário, Get e Post, são aceitos.<br />

Porém, o envio só será feito após a confirmação do usuário ao receber um alerta de<br />

segurança do webmail.<br />

V í d Eo s E f l a s H<br />

Ambos exibem um espaço vazio branco no lugar de vídeos e objetos SWF no corpo da<br />

mensagem, devido ao não suporte desses formatos.<br />

pa i n E l d E p r é-V i s ua l i zaç ão, a s s u n To E r E m E T E n T E<br />

o painel de leitura do Yahoo! mail Classic e do Yahoo! mail possibilitam somente a<br />

visualização das mensagens na forma horizontal.<br />

Yahoo! mail Classic<br />

assunto: limite de 54 caracteres<br />

remetente: limite de 33 caracteres<br />

Yahoo! mail<br />

Assunto: limite de 37 caracteres<br />

Remetente: limite de 23 caracteres<br />

Para ambos, se o limite de caracteres for excedido, a frase é interrompida<br />

automaticamente.<br />

Espaço d i s p o n í V E l pa r a T E m p l aT E<br />

As duas versões do Yahoo! foram desenvolvidas para serem visualizadas em 800x600 px,<br />

de forma que o layout não se adapte a resolução de tela do usuário. Com isso o<br />

espaço interno padrão é de 600px.<br />

recomenda-se a utilização de 550px como largura máxima, para visualizar<br />

o template sem problemas.<br />

15


Uma boa dica sobre links é usar urls pequenas e intuitivas. Prefira sempre:<br />

www.dominio.com.br/campanha do que www.dominio.com.br/frt65789/src/123.asp.<br />

<strong>fatos</strong><br />

N ã o e s q u e ça de sempre i n c l u i r ta rget = “_blank” em todos os seus links.<br />

webmail: uol e bol<br />

i n T rodução<br />

Neste capítulo serão analisados os webmails Bol e UOL. Tempos atrás ambos possuíam<br />

características muito próximas, no que diz respeito a limitações técnicas, padrão para<br />

exibição de assunto e remetente e funcionamento do sistema.<br />

Atualmente os dois passaram por reformulações e modernizações que incluem novo<br />

design, alterações na navegação e carregamento via AJAX. Porém, apenas o UOL possui<br />

um link para a interface anterior.<br />

além disso, ambos implementaram o “painel de leitura” - painel de pré-visualização de<br />

mensagens - que pode ser habilitado ou desabilitado de acordo com as necessidades do<br />

usuário. Isto é, quando acessados pela primeira vez, ele permanece desabilitado. Mas,<br />

a partir do momento que é habilitado, as mensagens serão exibidas somente naquele<br />

local, sem opção de visualização da forma anterior, em outra tela.<br />

Novamente, tanto o UOL quanto o BOL mantiveram o mesmo tratamento para SPAM e<br />

para mensagens de remetentes desconhecidos. No primeiro caso, eles são direcionados<br />

automaticamente para a lixeira, onde permanecem por 30 dias antes de serem excluídas<br />

permanentemente. E no segundo caso é enviado um tira-teima, que faz com que a<br />

mensagem entre na caixa de entrada do receptor somente depois que o remetente a<br />

confirme.<br />

C s s<br />

uol - <strong>In</strong>terface antiga<br />

A versão antiga do UOL não oferece suporte ao CSS, seja ele externo, incorporado ou<br />

inline. Ao realizarmos um teste com CSS inline e incorporado foi constatado que o<br />

webmail ignorou a formatação utilizada e aplicou seu próprio CSS ao template.<br />

bol/uol - nova interface<br />

Tanto UOL quanto BOL possuem atualmente uma versão que aceita o CSS, capaz de<br />

suportar propriedades complexas como float e overflow, porém com algumas restrições<br />

como propriedades list-style e font-strech. Além disso, pode-se notar que ao utilizar<br />

estilos dentro da tag a formatação é ignorada.<br />

16


Para uma boa campanha de e-mail marketing, deve-se apostar em estratégias<br />

que privilegiem, além da personalização, uma experiência agradável ao usuário,<br />

<strong>fatos</strong><br />

tanto do ponto de vista do conteúdo oferecido, promoção, quanto do design.<br />

s u p o rTE a formulários<br />

uol - interface antiga<br />

No método Post, todo botão que tiver atributo type declarado com “submit” será oculto<br />

na mensagem. Utilizando o método GET, se o botão for exibido, ele não será ativo.<br />

Formulários feitos com o método GET ou POST são funcionais somente se o botão<br />

“enviar” ou “ok” estiverem em forma imagem na seguinte maneira:<br />

<br />

Com essas formatações será possível utilizar a tecla TAB para navegar de um campo<br />

para outro do formulário e preencher sem problemas os espaços de texto. Além disso,<br />

campos como checkbox e botões de rádio são funcionais somente se estiverem em<br />

forma de imagem.<br />

bol/uol - nova interface<br />

Na nova interface diversos atalhos para funções do webmail foram configurados para<br />

as letras do teclado - próxima mensagem (N), mensagem anterior (P), abrir mensagem<br />

(ENTER), escrever mensagem (C), encaminhar mensagem (F), responder (R), responder<br />

a todos (A), marcar como não lida (Z) e marcar como lida (X). Devido a essas mudanças,<br />

tanto o bol quando uol não suportam formulários em GET e POST de forma adequada.<br />

Isso demonstra a ineficiência de ambos em atender as necessidades básicas de<br />

preenchimento de campos descritivos, e a adequação para formulários de múltipla<br />

escolha, como pesquisas e enquetes, em que se utilizam apenas chekbox e botões de<br />

rádio.<br />

s u p o rTE ao s aT r i b u To s d E TaG s H T m l<br />

uol - interface antiga<br />

devido a uma propriedade do navegador, ao<br />

utilizar o firefox para acessar a interface antiga<br />

do uol, todos os links apresentam sublinhado<br />

azul, independentemente da cor escolhida na<br />

formatação do link.<br />

além disso, não suporta a tag dentro de<br />

.<br />

17


Com os planos do governo de inclusão digital, existe um enorme potencial para ampliar a<br />

oferta de internet para mais da metade da população. Pense nas suas estratégias para contruir<br />

<strong>fatos</strong><br />

uma base de e-mails bem estruturada para receber a ampliação da banda larga em todo o país.<br />

na produção de templates é necessário formatar e declarar corretamente todos os<br />

elementos. Caso contrário, o texto irá seguir as regras de CSS da interface antiga,<br />

apresentando sempre fonte Arial tamanho 11px. Para h2, a especificações da fonte<br />

serão as mesmas, porém em caixa alta na cor branca, sobre uma caixa de fundo azul.<br />

Já para definir uma cor de fundo do template que não seja a branca é necessário definir<br />

o bgcolor dentro de tabelas externas ou internas, cujo tamanho seja definido em pixels.<br />

Vale ressaltar que o bgcolor não funciona no , nem em tabelas com largura<br />

definida em porcentagem.<br />

bol/uol - nova interface<br />

esta versão suporta apenas a tag style inline, de forma que os estilos inseridos no<br />

cabeçalho () são removidos.<br />

os elementos sem formatação, assim como na versão anterior seguirão as<br />

especificações do CSS do webmail. Neste caso textos aparecerão na cor preta, em fonte<br />

do tipo Verdana e tamanho 12px e os títulos (h1, h2, h3) seguem estas mesmas<br />

especificações, porém com variações de tamanho.<br />

não suporta as tags de lista , , , e o atributo border da tag .<br />

assim como a versão anterior, não suporta o atributo bgcolor com fundo definido em<br />

porcentagem para tabelas e células.<br />

s u p o rTE a a n i m aç ão E V í d Eo s<br />

uol - interface antiga<br />

Suporta corretamente objetos SWF e vídeos, porém sempre acusará uma pontuação<br />

antispam de, no mínimo, 0,5 pts na avaliação da peça. Isto deve-se ao fato de existir<br />

dentro da mensagem um objeto do tipo .<br />

bol/uol - nova interface<br />

Da mesma forma que a versão anterior, suporta corretamente vídeos e SWF.<br />

b lo q u E i o d E i m aG E n s<br />

Tanto na interface antiga, quanto na nova, a configuração correta do tira-teima<br />

(captcha), permite a exibição das imagens sem bloqueios, uma vez que o remetente é<br />

reconhecido pelo webmail. Dessa forma, não é necessário que o remetente faça parte<br />

da lista de contatos do destinatário, pois o sistema o libera automaticamente.<br />

18


A classe C é a que mais cresce em renda e participação nos números da internet brasileira<br />

(38%) e ainda tem muito para crescer até atingir a maturidade de classes mais elevadas como<br />

<strong>fatos</strong><br />

A e B. Nunca se esqueça de incluí-los tanto na estratégia, quanto no conteúdo do seu e-mail.<br />

pa i n E l d E p r é-V i s ua l i zaç ão<br />

uol - interface antiga<br />

na versão anterior do uol todas as mensagens são exibidas isoladamente em uma<br />

janela, uma vez que ela não possui um painel de visualização de mensagem.<br />

bol/uol - nova interface<br />

A nova interface oferece duas opções de visualização de mensagens: em uma janela<br />

isolada, tal qual na versão anterior, ou em um painel de leitura. Caso o usuário deseje<br />

utilizar esta última forma é necessário que ele a habilite, acessando as configurações do<br />

webmail. Fazendo esta opção, as mensagens serão lidas exclusivamente no painel, sem<br />

a possibilidade de utilizar outra janela para leitura.<br />

Utilizando o painel de leitura habilitado na parte inferior da tela, a parte superior da<br />

mensagem é a única visível ao destinatário, sem que ele precise utilizar as barras de<br />

rolagem verticais. Já em outras aplicações de e-mail, os painéis aparecem na parte<br />

inferior da lista de e-mails, tornando necessária a visualização no topo da mensagem<br />

das chamadas principais ou a presença de um índice com informações do que o leitor<br />

irá encontrar mais abaixo.<br />

a s s u n To E r E m E T E n T E<br />

O estudo realizado a seguir utilizou como base a resolução de tela de 1024 x 768 pixels.<br />

uol - interface antiga<br />

Assunto: limite de até 32 caracteres para mensagens não lidas<br />

Remetente: limite de até 21 caracteres<br />

Observação: Na contagem de caracteres o espaço é incluído.<br />

bol/uol - nova interface<br />

Assunto: limite de 60 caracteres para mensagens não lidas<br />

remetente: Caracteres ilimitados<br />

Observação: Na contagem de caracteres o espaço é incluído.<br />

Espaço d i s p o n í V E l pa r a E x i b i ç ão d o T E m p l aT E<br />

O layout de ambos se adapta à resolução da tela, aumentando ou diminuindo de<br />

acordo com o tamanho disponível.<br />

19


A internet se tornou o terceiro veículo de maior alcance no Brasil, atrás apenas de rádio e TV.<br />

Só para ter uma idéia do crescimento, no ano passado, a <strong>All</strong> <strong>In</strong> <strong>Mail</strong> disparou quase 4 bilhões<br />

<strong>fatos</strong><br />

e meio de emails, representando um aumento de mais de 250% em relação a 2009.<br />

Ao alterar manualmente o tamanho da janela de visualização, embora o BOL apresente<br />

uma largura mínima de layout maior do que o UOL (537px para o uol e 747px para<br />

o BOL), ela não é recomendada. Isso deve-se ao fato de que na resolução 800 x 600 a<br />

mensagem pode aparecer oculta por barras de rolagem horizontais e dificultar a leitura.<br />

devido a esses fatores e ao impacto que eles causam na leitura, é recomendada a utilização<br />

de uma largura máxima de 530px para os dois webmails analisados.<br />

20


Segundo previsões, o natal de 2010 teve como projeção, crescer 40% no<br />

faturamento das lojas online em relação ao ano anterior. O e-mail marketing<br />

<strong>fatos</strong><br />

bem trabalhado pode corresponder a mais de 40% deste faturamento.<br />

Cliente de e-mail: windows <strong>Mail</strong><br />

i n T rodução<br />

Vamos abordar agora o Windows <strong>Mail</strong>, um cliente desktop da Microsoft, que substitui o<br />

Outlook Express na versão Windows Vista.<br />

Por renderizar imagens de forma semelhante ao Outlook 2003, o Windows <strong>Mail</strong> tem<br />

um funcionamento muito parecido com este cliente de e-mail. Além disso, o bom<br />

desempenho constatado nos testes é resultado da utilização de um mecanismo de<br />

renderização igual ao do <strong>In</strong>ternet Explorer.<br />

Confira a seguir a análise de todos os suportes e limitações deste cliente de e-mail.<br />

C s s<br />

Como mencionado, o Windows <strong>Mail</strong> renderiza o HTML da mesma forma que o <strong>In</strong>ternet<br />

Explorer. Sendo assim, tanto faz a utilização de CSS inline, incorporados ou externos,<br />

pois nenhum deles apresentará problemas no posicionamento em sua formatação.<br />

Porém, todas as falhas encontradas no servidor também valem para o Windows <strong>Mail</strong>.<br />

Assim como o <strong>In</strong>ternet Explorer encontra dificuldades em visualizar templates formatados<br />

com base nas recomendações de estilos do W3C, este cliente desktop também<br />

apresenta os mesmos problemas.<br />

Um ponto positivo do Windows <strong>Mail</strong> é a alta funcionalidade das seguintes<br />

propriedades:<br />

• Float<br />

• Background-image<br />

• Clear<br />

• Margin<br />

• Padding<br />

• Hover (responsável por definir o comportamento dos links quando o mouse passa<br />

por cima deles).<br />

Além disso, deve-se fazer apontar as seguintes particularidades deste cliente de e-mail:<br />

• não suporta focus, white-space, list-style-image e font-stretch.<br />

• apenas o valor inside é suportado na propriedade list-style-position.<br />

• Para obter a aparência de list-style-position:outside, é necessário não declarar<br />

a propriedade list-style-position.<br />

21


Um dos segredos da <strong>All</strong> <strong>In</strong> <strong>Mail</strong> está no controle anti-spam. Dos mais de 4 bilhões de<br />

e-mails enviados, em 2010, o número de reclamações de spam nos orgãos internacionais<br />

<strong>fatos</strong><br />

não chegou a 160. Isso faz com que nossos servidores nunca estejam em blacklists.<br />

s u p o rTE ao s aT r i b u To s d E TaG s H T m l<br />

Quase todos os atributos e tags HTML são suportados pelo Windows <strong>Mail</strong>. Dentre eles<br />

estão cellpadding, cellspacing, colspan e rowspan. Por outro lado, não suporta as tags<br />

ol e base.<br />

b lo q u E i o d E i m aG E n s<br />

Como a maioria dos e-mails analisados as imagens são bloqueadas quando os<br />

remetentes são desconhecidos. Uma vez adicionados a lista de e-mails do usuário, não<br />

ocorrerão problemas para sua visualização.<br />

Quando a imagem não possui atributos de altura e largura no código HtMl, o texto<br />

alternativo aparecerá dentro de uma caixa, em uma linha apenas. Dessa forma a largura<br />

da caixa será a mesma do texto e, portanto, quanto maior ele for, maior ela será.<br />

deve-se ressaltar que o template poderá sofrer quebras caso a caixa com o texto alternativo<br />

extrapole a sua largura original.<br />

Caso a imagem tenha suas dimensões inseridas no código, o texto alternativo aparecerá<br />

no interior de uma caixa com o seu tamanho original, na fonte Verdana tamanho 11 px.<br />

Se o texto estiver formatado com outra fonte, ele será modificado para estas<br />

especificações, porém manterá a cor definida em sua programação.<br />

Por fim, caso o atributo ALT não seja definido, haverá um quadrado com um ícone de<br />

erro, indicando a existência de uma imagem bloqueada.<br />

Nesta imagem pode-se notar todos os exemplos citados acima. Deve-se apontar<br />

somente que, nos casos em que as dimensões são inseridas no código, o texto<br />

alternativo é quebrado em linhas, conforme o tamanho da imagem.<br />

22


Não deixe de visualizar suas campanhas, durante os testes, nos smartphones mais vendidos<br />

no Mercado. Tanto o sistema operacional iOS como o Android podem trazer resultados<br />

<strong>fatos</strong><br />

diferentes. Não se esqueçam que o número de celulares no Brasil cresce a cada dia.<br />

formulários<br />

Tanto o método Post quanto o GET funcionam corretamente no Windows <strong>Mail</strong>.<br />

a mensagem é exibida corretamente, porém os dados são enviados somente após<br />

a confirmação do usuário ao alerta de segurança.<br />

V í d Eo s<br />

O Windows <strong>Mail</strong> não suporta vídeos incorporados na mensagem. Uma mensagem é<br />

enviada ao usuário, informando que a abertura do vídeo não é possível e o espaço<br />

destinado a ele fica em branco.<br />

aparecerá um aviso informando que o objeto não pode ser<br />

executado devido às configurações de segurança que proíbem<br />

a execução de controles Activex ou devido ao bloqueio dos<br />

publicadores de um dos controles.<br />

a n i m aç ão E m f l a s H<br />

os mesmos erros ocorrem quando a mensagem recebida pelo usuário contém um<br />

objeto SWF, independente da forma como ele tenha sido inserido (por meio do<br />

Javascript ou da tag ).<br />

pa i n E l d E V i s ua l i zaç ão<br />

Assim como no Outlook, o painel de visualização do layout pode ser definido de duas<br />

formas: na lateral da caixa de entrada (vertical) ou abaixo dela (na horizontal).<br />

Como o limite de caracteres para assunto e remetente varia de acordo com o espaço<br />

disponível no painel, a posição dele interfere diretamente neste número. O painel<br />

na vertical que ao lado da lista de e-mails, permite a visualização de uma parcela maior<br />

do template, enquanto o painel horizontal prioriza a leitura da parte superior da<br />

mensagem.<br />

23


A <strong>All</strong> <strong>In</strong> <strong>Mail</strong> acaba de lançar a feature de teste A/B de disparo. De forma automática, você testa tanto o<br />

subject como o conteúdo de sua campanha para uma amostragem da sua base de e-mails, e melhora<br />

<strong>fatos</strong><br />

significantemente os seus resultados de abertura e clique enviando todo o resto para o teste vencedor.<br />

layout vertical<br />

Remetente: limite de 16 caracteres.<br />

Assunto: limite de 33 caracteres.<br />

Obs. Caso estes limites sejam extrapolados, as palavras serão interrompidas por<br />

reticências.<br />

layout horizontal<br />

Remetente: limite de 15 caracteres, com interrupção de reticências no 16º caractere<br />

Assunto: limite de 38 caracteres.<br />

Como esses números variam muito de acordo com cada cliente de e-mail, a média<br />

utilizada é de 23 caracteres para assunto e para o remetente. Dessa forma garantimos<br />

que grande maioria dos destinatários recebam a mensagem corretamente.<br />

Espaço d i s p o n í V E l pa r a T E m p l aT E<br />

em clientes de e-mail desktops, determinar o espaço disponível para template não é<br />

uma tarefa simples, pois ele possui muitas variáveis. Por exemplo: o tamanho disponível<br />

pode alterar de acordo com a forma de visualização no painel (lateral ou inferior), os<br />

ajustes personalizados das dimensões destes painéis e as diferenças de resolução de tela.<br />

para não correr o risco de que alguns vejam o template corretamente e outros não,<br />

é recomendada a utilização da largura máxima de 600 pixels.<br />

rEsolução dE TEla larGura máxima<br />

800 x 600 px 560 px<br />

1024 x 768 px 770 px<br />

1280 x 1024 px 1000 px<br />

24


Behavioral Targeting é uma técnica usada por marketeiros online para aumentar a eficácia de<br />

suas campanhas. Utiliza as informações coletadas sobre um indivíduo através da navegação<br />

<strong>fatos</strong><br />

na web, para selecionar quais os anúncios ou produtos mais relevantes a este indivíduo.<br />

Cliente de e-mail: windows outlook<br />

i n T rodução<br />

As versões do Outlook são utilizadas principalmente por empresas no seu dia-a-dia.<br />

Dessa forma, para comunicações B2B por meio de e-mail marketing é necessário estar<br />

atento às características e particularidades de cada um deles para garantir a otimização<br />

do processo.<br />

<strong>In</strong>icialmente a diferença primordial entre Outlook 2007 e as versões 2003 e Outlook<br />

Express é o mecanismo de renderização de imagens. Os mais antigos utilizam dois<br />

mecanismos para tanto: o internet explorer para exibição e word para edição e<br />

composição. Isto é, uma mensagem que é vista corretamente no <strong>In</strong>ternet Explorer, será<br />

vista de forma semelhante na caixa de entrada do Outlook 2003 e Express Outlook.<br />

Caso ela seja reenviada para outro destinatário, a mensagem automaticamente entra<br />

em modo de composição e a ferramenta de renderização é substituída para o Word.<br />

Como o word não suporta os mesmos mecanismos para edição e exibição, poderão<br />

ocorrer falhas de visualização da mensagem. Isso dá-se ao fato de que o Word não<br />

suporta os mesmos elementos HTML e CSS que o <strong>In</strong>ternet Explorer suporta.<br />

Para corrigir tal problema, o Outlook passou a utilizar somente o Word para renderizar<br />

as mensagens. Tal alteração fez com que essa nova versão tivesse algumas restrições em<br />

relação ao uso de tags HTML e de propriedades de CSS. Ou seja, as restrições e suportes<br />

que o Word 2007 tem ao HTML e CSS são repassadas para o Outlook 2007.<br />

Devido a estas peculiaridades é recomendada a não utilização de CSS para formatação.<br />

Utilizando a diagramação em tabelas é possível que mais usuários consigam visualizar<br />

o template da forma como foi criado, sem problemas causados pelas diferenças de<br />

suporte.<br />

Para ilustrar demais diferenças entre Outlook 2007, Express Outlook e Outlook 2003,<br />

vamos fazer a seguir uma análise detalhada de cada um deles em relação às suas<br />

aplicações e restrições.<br />

C s s<br />

as versões citadas do outlook suportam corretamente 3 formas de se trabalhar com CSS<br />

em HtMl:<br />

• arquivo externo<br />

• estilos inline<br />

• estilos incorporados (dentro da tag style na seção ).<br />

25


Deve-se considerar a porcentagem de e-mails abertos numa campanha, somente os e-mails entregues:<br />

e-mails abertos / e-mails válidos. Se você enviou, 1.100 e-mails, sendo que 1.000 entregues e só<br />

<strong>fatos</strong><br />

foram abertos 700. (700/ 1000 = 0.7). Ou seja, 70% da sua base abriu a mensagem de e-mail enviada.<br />

Por outro lado a versão 2007 é a única que não suporta background-image, impedindo<br />

a renderização de imagens de fundo no template. Além disso, o Outlook 2007 não<br />

suporta uso de ícones para listas não ordenadas (), uma vez que ele não aceita<br />

propriedades CSS list-style-image e background. Da mesma forma que não apresenta<br />

suporte a diversas funções do CSS, a utilização de webstandards para posicionamento<br />

e diagramação de elementos HTML também é restrita. A solução é utilizar tabelas<br />

alinhadas para exibir as informações em blocos, sem prejudicar seu recebimento.<br />

A lista a seguir mostra as propriedades de CSS que o Outlook 2007 não suporta e dá<br />

destaque às mais utilizadas na composição de um layout para web.<br />

active<br />

azimuth<br />

background-attachment<br />

background-image<br />

background-position<br />

background-repeat<br />

border-spacing<br />

bottom<br />

caption-side<br />

clear<br />

clip<br />

content<br />

counter-increment<br />

counter-reset<br />

Deve-se ressaltar que o Outlook 2003 e o Outlook Express suportam background-image,<br />

mas não suportam as seguintes propriedades CSS:<br />

• border-spacing<br />

• caption-side<br />

• empty-cells<br />

• list-style-image<br />

• font-stretch<br />

• font-size-adjust<br />

• white-space<br />

l i n ks<br />

lisTa dE propriEdadEs Css não suporTadas pElo ouTlook 2007<br />

cue-before<br />

cue-after<br />

cue<br />

cursor<br />

display<br />

elevation<br />

empty-cells<br />

focus<br />

first-child<br />

first-line<br />

first-letter<br />

float<br />

font-size-adjust<br />

font-stretch<br />

height<br />

hover<br />

left<br />

line-break<br />

list-style-image<br />

list-stule-position<br />

marker-offset<br />

max-height<br />

max-width<br />

min-height<br />

min-width<br />

orphans<br />

outline<br />

outline-color<br />

outline-style<br />

outline-width<br />

overflow<br />

overflow-x<br />

overflow-y<br />

pause-before<br />

pause-after<br />

pause<br />

pitch<br />

pitch-range<br />

play-during<br />

position<br />

quotes<br />

right<br />

Mesmo quando as imagens que possuem links são bloqueadas, nas três versões de<br />

Outlook os botões funcionam adequadamente.<br />

richness<br />

text-transform<br />

top<br />

unicode-bidi<br />

visibility<br />

visited<br />

voice-family<br />

volume<br />

widows<br />

word-spacing<br />

z-index<br />

width<br />

26


Uma campanha de e-mail se divide em 3 etapas: entrega, abertura e clique. Abrir o e-mail, simples-<br />

mente, não resolve o problema da grande maioria dos negócios. É necessário fazer com que o usuário<br />

<strong>fatos</strong><br />

também clique no produto ou, no link que vai direcioná-lo para um hotsite, blog ou e-commerce.<br />

o uso da tag para determinar áreas de links diferentes pode ser utilizada, porém<br />

deve ser evitada, uma vez que clientes de desktop costumam mudar coordenadas de<br />

áreas mapeadas e assim, deslocar o posicionamento dos links.<br />

s u p o rTE ao s aT r i b u To s d E TaG s H T m l<br />

assim como na maioria dos webmails, nenhuma das versões do outlook suporta imagens<br />

de fundo, inseridas tanto no modo background em tags HTML como em CSS. Caso seja<br />

necessário incluir imagem que não seja uma apenas um fundo colorido, é recomendado<br />

fazer um recorte em sua área e incluí-la no template por meio da tag .<br />

além disso, o atributo background-color não funciona perfeitamente no Outlook 2007.<br />

Por exemplo: se inserirmos elementos com cor de fundo dentro de uma tabela que já<br />

tenha outra cor de fundo determinada, eles aparecerão sem a cor especificada.<br />

Conheça outros atributos HTML que não são suportados pelo Outlook 2007 e confira<br />

em destaque os que são os mais utilizados para layouts HTML:<br />

accept-charset<br />

accept<br />

accesskey<br />

adress<br />

archive<br />

background*<br />

button<br />

checked<br />

classid<br />

code<br />

codecore<br />

lisTa dE aTribuTos HTml não suporTados pElo ouTlook 2007<br />

codetype<br />

compact<br />

data<br />

declare<br />

defer<br />

disabled<br />

enctype<br />

input<br />

longdesc<br />

marginheight<br />

marginwidth<br />

* apenas ao incluir imagem de fundo<br />

**screen, print, projection, braille, speech, all<br />

media**<br />

method<br />

multiple<br />

noresize<br />

object<br />

ol<br />

onblur<br />

onchange<br />

onclick<br />

ondbclick<br />

onfocus<br />

onkeydown<br />

onkeypress<br />

onkeyup<br />

onload<br />

onmousedown<br />

onmousemove<br />

onmouseout<br />

onmouseover<br />

onmouseup<br />

onreset<br />

onselect<br />

Existem alguns elementos HTML que também não são suportados pelo Outlook 2007.<br />

São eles form, script, iframe, applet, bdo, isindex, menu, noframes, noscript e q.<br />

Com as grandes mudanças entre as versões do outlook foram criadas duas ferramentas<br />

que possibilitam a visualização dos possíveis problemas causados pela leitura do<br />

Outlook da programação HTML utilizada. Uma delas é compatível ao Dreamweaver da<br />

Adobe e outra é compatível ao Microsoft.<br />

onsubmit<br />

onunload<br />

option<br />

optgroups<br />

readonly<br />

scrolling<br />

selected<br />

standby<br />

tabindex<br />

title<br />

valuetype<br />

27


Avalie sempre: para ter boa entrega, verifique a pontuação anti-spam para que caia sempre<br />

na caixa de entrada. Para abertura avalie o subject. O clique envolve a qualidade visual e o<br />

<strong>fatos</strong><br />

conteúdo da peça enviada. Analise os desempenhos anteriores para melhorar a performance.<br />

Faça o download dessas duas ferramentas no site:<br />

http://msdn.microsoft.com/en-us/library/aa338201.aspx<br />

E aprenda como utilizá-las clicando no link:<br />

http://msdn.microsoft.com/en-us/library/aa338200.aspx.<br />

Por outro lado, as versões Outlook Express e Outlook 2003 aceitam o atributo<br />

background e não apresentam problemas com cores de fundo diferentes para elementos<br />

alinhados. Quanto ao Javascript, algumas restrições se mantém nestas duas versões.<br />

b lo q u E i o d E i m aG E n s<br />

O Outlook bloqueia as imagens recebidas de remetentes desconhecidos. Nas três<br />

versões é necessário adicionar seu endereço à lista de contatos, para conseguir<br />

visualizar a imagem inserida na mensagem.<br />

por isso, é importante informar nos e-mails enviados sobre a necessidade do reconhecimento<br />

do remetente e incentivar os usuários a incluir seu endereço em suas listas.<br />

outlook 2003<br />

A versão 2003 possui uma característica que piora a visualização da mensagem quando<br />

as imagens não possuem suas dimensões inseridas no código HTML. Dessa maneira, ele<br />

aumentará os boxes de imagem para o tamanho de uma linha inteira e incluirá um x<br />

vermelho, indicando a presença de um objeto bloqueado. Além disso, irá alertar sobre<br />

risco de segurança antes da ALT tag, que aparecerá logo em seguida deste aviso.<br />

As formatações de texto especificadas para a alt tag nem sempre são seguidas:<br />

• Tanto no Outlook 2003 quanto no 2007 , essa formatação é ignorada e o aviso do<br />

sistema com alt tag utilizarão a fonte padrão.<br />

• Apenas a cor especificada é exibida e as especificações de tamanho e fonte são<br />

ignoradas na versão Express.<br />

28


Certifique-se de que a campanha de e-mail tenha consistência, alinhando seu visual com o todo.<br />

Faça com que remeta à marca: de nada adianta promover o lançamento de um produto através<br />

<strong>fatos</strong><br />

do e-mail, se o visual da peça não tiver nada a ver com o restante das ações online e offline.<br />

outlook Express<br />

Nesta versão a imagem também é substituída por um x vermelho, mas suas dimensões<br />

são respeitadas. Em relação a ALT tag, ela não virá acompanhada de nenhum aviso de<br />

segurança e receberá somente a formatação de cor.<br />

outlook 2007<br />

Embora seja a versão mais recente, o outlook 2007 não suporta o atributo alT de<br />

imagens. ao receber de um remetente desconhecido imagens no corpo da mensagem,<br />

um aviso é exibido somente na primeira imagem e as demais são identificadas somente<br />

com um x vermelho. Assim como a versão Expressa, as dimensões da imagem não são<br />

alteradas.<br />

formulários<br />

O Outlook 2007 não suporta formulários () e por isso, desabilita a função do<br />

action e pode alterar aparência de elementos como checkbox e radio buttons.<br />

Isso deve-se ao fato de que ele utiliza o Microsoft Word 2007 para renderizacão e<br />

por motivos de segurança.<br />

sendo assim, a melhor opção para o envio de formulários para esse cliente de e-mail<br />

é por meio de um link em uma página web.<br />

além disso, esta versão do outlook não suporta os componentes de formulários, tais<br />

como input, select, optground e button.<br />

Já o Outlook 2003 possibilita a correta visualização dos elementos do formulário, mas<br />

impede o envio dos dados inseridos no campo, por meio da desativação do action.<br />

29


No caso de campanhas sazionais, como o Natal, Dia das Mães ou dos Namorados, por<br />

exemplo, considere fazer um envio que introduza a promoção e sirva como um<br />

<strong>fatos</strong><br />

teaser, provocando a curiosidade do seu público e aumentando as possibilidades de êxito.<br />

O Outlook Express, além de não interferir na visualização do formulário, permite que os<br />

dados sejam enviados, uma vez que o action continua habilitado.<br />

Como medida de segurança, a mensagem visualizada no painel de leitura só será<br />

enviada após confirmação do usuário ao alerta emitido pelo Outlook, como pode ser<br />

visto na imagem a seguir.<br />

Caso a mensagem seja aberta numa janela, o aviso de segurança não é mostrado e a<br />

mensagem é enviada automaticamente.<br />

outlook 2003<br />

No caso do Outlook 2003 o formulário é visualizado normalmente, porém o envio de<br />

dados só será possível se a mensagem estiver aberta em outra janela e com autorização<br />

do usuário, após o alerta de segurança.<br />

Caso a mensagem seja aberta no painel de leitura e preenchida neste local, os dados<br />

não são enviados.<br />

a n i m aç ão E m f l a s H<br />

Por não suportar as tags object e script, nenhuma das versões do outlook analisadas<br />

aceita a exibição de conteúdos em Flash no corpo da mensagem. Por outro lado, a<br />

versão 2000, que apresenta muito problemas com segurança é a única que tem suporte<br />

a esse tipo de arquivo.<br />

outlook 2003<br />

Aviso de bloqueio é enviado.<br />

Após confirmação, o espaço<br />

destinado ao arquivo aparece<br />

em branco, sem qualquer<br />

indicação de sua presença.<br />

30


Se planeja usar peças com conteúdo dinâmico, baseado no comportamento do usuário, esteja certo<br />

de que cada oferta será enviada para o nicho de público correto. Nada mais chato do que<br />

<strong>fatos</strong><br />

um homem solteiro receber um e-mail com desconto para carrinho de bebe, ou maquiagens.<br />

outlook Express<br />

É enviado um aviso de imagens que informa sobre o bloqueio delas. Ao desbloquear, o<br />

local do arquivo multimídia fica em branco.<br />

outlook 2007<br />

A imagem é substituída por um X vermelho que indica a presença de um objeto<br />

bloqueado.<br />

G i f a n i m a d o<br />

Como foi dito anteriormente, o Outlook 2007 utiliza o Word 2007 para renderizar suas<br />

mensagens. Dessa forma, o GIF animado é substituído por uma imagem estática do seu<br />

primeiro frame.<br />

Como as versões antigas utilizam o <strong>In</strong>ternet Explorer para exibir mensagens recebidas,<br />

o GIF animado é suportado adequadamente.<br />

V í d Eo s<br />

O uso de vídeos em templates de e-mail marketing é inviável, uma vez que eles são<br />

inseridos da mesma forma que uma animação, por meio da tag .<br />

A única versão de Outlook que é capaz de exibir vídeos no corpo da mensagem é a<br />

2000, a qual possui diversos problemas com segurança.<br />

CodifiCaç ão d E C a r aC T E r Es<br />

Os clientes de e-mail analisados responderam corretamente aos testes de codificação.<br />

Porém, para que não ocorram problemas inesperados a sugestão é de que seja utilizada<br />

a codificação iso-8859-1 e que os acentos e caracteres específicos sejam convertidos<br />

em seus nomes de entidade. Veja alguns exemplos a seguir e acesse a tabela completa<br />

em http:// w3schools.com/tags/ref_entities.asp.<br />

Á = &Aacute Ç = &Ccedil<br />

pa i n E l d E p r é-V i s ua l i zaç ão<br />

Todas as versões de Outlook analisadas permitem que o usuário visualize o conteúdo<br />

da mensagem por meio de um painel de leitura. Dependendo do local de visualização<br />

escolhido, a mensagem aparecerá de uma forma. Se o painel estiver abaixo da lista, a<br />

parte superior da mensagem terá destaque e se o painel estiver à esquerda, o conteúdo<br />

da esquerda será exibido. Como nos dois casos, a área que acaba ganhando mais<br />

destaque é o canto superior esquerdo, é interessante que ele informe assunto e a<br />

empresa remetente, para que o usuário identifique a mensagem antes de abri-la.<br />

31


Revise sempre o texto, ou se você o criou, peça para outra pessoa revisá-lo. Adeque sua<br />

mensagem ao perfil de público. Não precisa usar uma linguagem rebuscada, mas não conferir a<br />

<strong>fatos</strong><br />

gramática ou corrigir possíveis erros de digitação é uma falha grave, pois demonstra descuido.<br />

a s s u n To E r E m E T E n T E<br />

A flexibilidade de redimensionamento nos painéis de leitura possibilita a visualização<br />

de quantos caracteres o usuário desejar no remetente e no assunto da mensagem. Por<br />

outro lado, o tamanho de exibição irá variar também de acordo com a resolução de tela<br />

de cada um.<br />

Considerando a ausência de alteração nas configurações iniciais, mantendo o default<br />

do software, na posição vertical e com uma resolução de 1280x1024, encontra-se os<br />

seguintes valores:<br />

Assunto: 49 caracteres em todas as versões<br />

Remetente: 24 caracteres no Outlook Express<br />

54 no Outlook 2003 e 2007<br />

Considerando as mesmas configurações, porém com visualização horizontal, os valores<br />

encontrados são os seguintes:<br />

Assunto: 90 a 95 caracteres para todas as versões<br />

Remetente: 29 a 32 caracteres para o Outlook 2003<br />

24 a 26 caracteres para o Outlook Express<br />

23 a 27 caracteres para o Outlook 2007<br />

devido às diferenças entre as versões do outlook e outros clientes de e-mail, recomenda-se<br />

a utilização de 20 a 25 caracteres para o assunto e remetente.<br />

Espaço d i s p o n í V E l pa r a o T E m p l aT E<br />

O Outlook permite a visualização em um painel de leitura que possui total<br />

flexibilidade de redimensionamento e em janelas que podem ser aumentadas de acordo<br />

com o tamanho da tela do destinatário. mesmo sem medida fixa e com a possibilidade<br />

de customização, é recomendada a utilização de uma largura máxima de 600 pixels,<br />

que possibilita a visualização correta em webmails também.<br />

rEsolução dE TEla larGura máxima<br />

ExprEss 2003 2007<br />

800 x 600 px 560 px 560 px 560 px<br />

1024 x 768 px 770 px 770 px 770 px<br />

1280 x 1024 px 1000 px 1000 px 1000 px<br />

32


Os relatórios da <strong>All</strong> <strong>In</strong> <strong>Mail</strong> sobre quem clicou em cada link da sua mensagem dizem muito sobre<br />

o seu público. Ao invéz de somente consultar a quantidade de cliques de suas campanhas, utilize<br />

<strong>fatos</strong><br />

esta informação para enviar novas mensagens, mais objetivas, com base no interesse de cada um.<br />

Cliente de e-mail: thunderbird e terra<br />

i n T rodução<br />

neste capítulo serão tratados os clientes de e-mail: terra versão Clássica, terra versão<br />

com Painéis e Mozilla Thunderbird 2. A análise a seguir tem como objetivo mostrar<br />

o excelente suporte a CSS e aos webstandards na renderização em HMTL no caso do<br />

Thunderbird e apresentar as evoluções que fazem da versão mais recente do webmail<br />

Terra, muito superior à antiga.<br />

Com uma plataforma renovada, que apresenta um painel de visualização semelhante ao<br />

outlook, será possível conferir nas próximas páginas o que mudou e o que ainda é um<br />

problema para o webmail do Terra.<br />

Confira a seguir a comparação entre esses clientes de e-mail e suas peculiaridades.<br />

s u p o rTE a C s s<br />

Thunderbird<br />

O thunderbird renderiza de maneira semelhante a um browser, de forma que a utilização<br />

de estilos CSS inline ou incorporado (dentro da HEAD) são aceitos perfeitamente.<br />

Porém, devemos ficar atentos à definição de estilos na formatação, uma vez que ele não<br />

suporta inserção no body, mas sim na Tag que tiver textos (p, a, table). Além disso, o<br />

tamanho da fonte inserida no body não é a aplicada aos textos do template.<br />

Terra<br />

• o terra <strong>Mail</strong> suporta CSS inline com algumas diferenças para cada versão:<br />

Versão com Painéis: suporta as propriedades de posicionamento de CSS como<br />

z-index, position, top, left, dentre outros.<br />

Versão Clássica: além de não suportar as propriedades de posicionamento,<br />

não aceita também margin, list-style-image, font-stretch e white-space.<br />

• Ambas não aceitam o uso da tag body para inserir as propriedades do CSS e<br />

caso seja necessário formatar com estilo CSS, será preciso atribuí-lo às tags onde<br />

os objetos estão inseridos.<br />

s u p o rTE ao s aT r i b u To s d E TaG s H m T l<br />

Thunderbird<br />

Suporta a todas as tags HtMl, incluindo aquelas que normalmente não são suportadas<br />

pelos demais clientes de e-mail, como bgcolor, background (para imagens), cellpadding<br />

e cellspacing.<br />

33


Pelo motivo da <strong>All</strong> <strong>In</strong> <strong>Mail</strong> ter servidores limpos, fora de blacklists internacionais,<br />

os seus e-mails tem muito mais chance de entrega na caixa de entrada<br />

<strong>fatos</strong><br />

em webmails como Hotmail, Yahoo e Gmail. Não caia no risco do soft-optin.<br />

Na ausência de uma formatação de texto no template, serão aplicadas as definições<br />

padrão do thunderbird:<br />

• Fonte com serifa: Times New Roman<br />

• Fonte sem serifa: Arial<br />

• Fonte mono espaçada: Courier New<br />

• Cor da fonte: Preto<br />

• Cor do fundo: branco<br />

• tamanho da fonte: 13 px<br />

Terra<br />

O Terra <strong>Mail</strong> demonstrou algumas falhas na renderização de textos formatados com tag<br />

e , que são utilizadas para produzir o efeito de itálico e negrito. No caso<br />

da versão clássica o texto adquire formatação comum definida no código, porém sem<br />

os efeitos desejados. Na versão mais recente, quando visualizada nos painéis de leitura,<br />

os textos em são exibidos em negrito em fonte Verdana tamanho 11 px, na cor<br />

preta. Isso pode causar dificultar a leitura nos casos em que o fundo definido na<br />

codificação também seja preto, por exemplo.<br />

assim como no outlook, o usuário da versão com painéis do terra não costuma abrir<br />

mensagens em outras janelas e acabam visualizando-as direto nos painéis. Como o erro<br />

com as tagas e ocorrem neste local, a sugestão é utilizar e para<br />

produzir os mesmos efeitos desejados, negrito e itálico.<br />

em relação a versão clássica do terra <strong>Mail</strong>, pode-se perceber a ausência de<br />

espaçamento entre parágrafos , de forma que os textos sejam exibidos com<br />

espaçamento simples. Para corrigir esta falha sugerimos a utilização de padding<br />

para determinar a tag . Optando por esta forma, em vez de margin, garantimos a<br />

visualização correta na maioria dos clientes de e-mail analisados.<br />

b lo q u E i o d E i m aG E n s<br />

Thunderbird<br />

o thunderbird, assim como a maioria dos clientes de e-mail analisados, permite a<br />

visualização de imagens somente quando o remetente faz parte da lista de contatos do<br />

usuário.<br />

Se a imagem definida no template apresentar quebras, ela será substituída pelo texto<br />

alternativo e o usuário não irá perceber a sua existência.<br />

Terra<br />

na versão mais recente do terra as imagens não são bloqueadas, inclusive quando<br />

recebidas de remetentes desconhecidos. Porém, no caso de imagens quebradas no<br />

template, como medida de segurança o texto alternativo irá aparecer no lugar dela.<br />

34


Separe as pessoas que estão abrindo e clicando suas mensagens com mais freqüência. Estes<br />

são os seus clientes mais ativos, os que se preocupam mais com o que você está enviando e<br />

<strong>fatos</strong><br />

que realmente optam por se envolver com suas mensagens e, por extensão, a sua empresa.<br />

s u p o rTE a formulários<br />

Thunderbird<br />

Este cliente de e-mail apresenta bons resultados, com algumas ressalvas. Utilizando<br />

o método get não há qualquer problema com a visualização e com o envio de dados.<br />

Porém o formulário que utiliza o método post apresentou falhas em que a mensagem<br />

aparentemente é enviada com sucesso, mas o formulário chega em branco ao remetente.<br />

Para garantir que o envio de dados aconteça corretamente foi criado um formulário que<br />

exige a confirmação dos dados preenchidos, como mostra a imagem a seguir:<br />

Campos a serem preenchidos<br />

Mensagem de confirmação dos dados<br />

preenchidos.<br />

O que acontece, diferentemente do esperado, é que a pagina de destino não é a<br />

mesma que confirma os dados, de forma que o Thunderbird novamente direciona ao<br />

destinatário o formulário em branco. Testando outros clientes de e-mail e utilizando<br />

esta mesma técnica, verificamos que somente o Thunderbird impede o envio de dados,<br />

o que nos leva a conclusão de que ele apenas executa o action.<br />

Terra<br />

Versão clássica: suporta apenas formulário do método post .<br />

Versão com painéis: suporta ambos os métodos, porém os atributos de largura e altura<br />

devem ser definidos para que o template não sofra alterações em seu visual.<br />

V í d Eo s<br />

os dois clientes de e-mail analisados nesta edição não suportam vídeos inseridos no<br />

corpo da mensagem. No caso do Terra, o código HTML passa por uma análise que retira<br />

o código inserido para o vídeo.<br />

35


Não compre banco de dados, mas forme o seu próprio, através de ações promocionais com<br />

clientes, cadastramento online e outras soluções simples. Muitas empresas apostam no volume,<br />

<strong>fatos</strong><br />

mandam milhares de emails para garantir venda e acabam excluídas pelos próprios provedores.<br />

a n i m aç ão<br />

Além de suportarem corretamente imagens em GIF inseridas na mensagem, ambos<br />

mantém as dimensões originais da imagem.<br />

Por outro lado, objetos SWF são bloqueados, independentemente da forma como foram<br />

inseridos, por meio de javascript ou da tag .<br />

pa i n E l d E V i s ua l i zaç ão<br />

Thunderbird<br />

O Thunderbird oferece três opções de painel de visualização: clássico, largo ou vertical.<br />

Para liberar a visualização em painéis e escolher a forma desejada, o usuário deve acessar<br />

o “Menu” de opções do cliente de e-mail. Além disso, todas as formas de visualização<br />

ainda podem ser maximizadas, de acordo com as necessidades de cada usuário.<br />

Terra<br />

Esta opção de visualização só existe na versão com painéis do Terra <strong>Mail</strong>.<br />

a s s u n To E r E m E T E n T E<br />

Thunderbird<br />

Assim como o painel de visualização se pode ser ajustado de acordo com a necessidade<br />

do usuário, o espaço para assunto e remetente também pode ser alterado.<br />

Visualização com painel clássico ou largo:<br />

Assunto: de 95 a 96 caracteres<br />

remetente: de 41 a 43 caracteres<br />

Obs. Ao exceder o limite, o texto é interrompido por reticências.<br />

Visualização com painel vertical:<br />

Neste caso o assunto é omitido, devido à posição do painel.<br />

Remetente: até 35 caracteres, com interrupção de reticências,<br />

caso este numero seja excedido.<br />

36


Oferecer conteúdo de interesse do cliente e só enviar mensagem para usuários cadastrados<br />

é o segredo para fidelizar clientes. Quem compra banco de dados e manda mensagens<br />

<strong>fatos</strong><br />

indiscriminadamente se classifica como spam e vai direto para o lixo eletrônico.<br />

Terra<br />

A versão clássica não possui limite de espaço para exibição de template, uma vez que<br />

ele se ajusta à resolução de tela de cada usuário. Porém a versão mais recente<br />

apresenta um limite de 770 px quando a mensagem é visualizada em uma nova janela.<br />

sendo assim e , considerando as restrições ao tamanho de diversos clientes de e-mail,<br />

a recomendação é utilizar uma largura máxima de 600 px, para garantir uma visualização<br />

correta do template pela maioria dos usuários.<br />

Versão Clássica<br />

Assunto: máximo de 25 caracteres<br />

Remetente: máximo de 19 caracteres<br />

Versão com painéis<br />

Assunto: máximo de 25 caracteres<br />

Remetente: máximo de 20 caracteres<br />

37


De acordo com a SenderBase.org, organização da Cisco para monitoramento do tráfego global<br />

de e-mails, o e-mail é utilizado para comunicação pessoal com muito mais regularidade<br />

<strong>fatos</strong><br />

do que as redes sociais e o trafego anual de emails passa dos 2 trilhões de mensagens.<br />

o que concluimos de tudo isso?<br />

Neste documento foram analisadas as características e curiosidades dos clientes de<br />

e-mail mais utilizados. Em diversos capítulos, os seguintes e-mails foram abordados:<br />

W E b m a i l s<br />

Gmail<br />

iG<br />

ibest<br />

Yahoo!<br />

C l i E n T Es d EskTo p<br />

thunderbird<br />

Microsoft Outlook 2003<br />

Microsoft Outlook 2007<br />

os seguintes tópicos foram estudados, de forma a analisar minuciosamente cada<br />

particularidade destes clientes de e-mail.<br />

s u p o rTE a C s s<br />

• A forma de utilização de CSS mais aceita pelos clientes de e-mail analisados é a inline.<br />

• Somente os clientes de e-mail desktop, como thunderbird, outlook e windows <strong>Mail</strong>,<br />

suportam o CSS em folhas de estilo<br />

• Deve-se evitar formatação em tableless e utilizar principalmente formatação em texto<br />

no CSS<br />

• As propriedades que mais apresentaram restrições nos aplicativos de e-mail<br />

analisados foram list_style-image, background-image e margin.<br />

s u p o rTE a H T m l<br />

• a grande maioria das tags é suportada pelos clientes de e-mail<br />

• A versão clássica do Terra <strong>Mail</strong> é a única que não suporta tag strong, em e Del.<br />

Além disso, o Outlook 2007 não suporta tags de componentes de formulário.<br />

• Alguns possuem restrições ao uso de tags Body e img.<br />

• Quase nenhum dos clientes analisados possui suporte a tag ol em listas ordenadas<br />

s u p o rTE a formulários<br />

Yahoo! <strong>Mail</strong> beta<br />

bol<br />

uol<br />

windows live<br />

outlook express<br />

windows <strong>Mail</strong><br />

windows live <strong>Mail</strong><br />

Hotmail<br />

terra<br />

apple <strong>Mail</strong><br />

• Os e-mails BOL, UOL, Hotmail e Outlook 2007 não possuem suporte a formulários.<br />

Os três primeiros impedem o envio de informações para ambientes externos e o último<br />

não exibe os campos do formulário, impossibilitando seu preenchimento.<br />

38


Todos nós queremos construir nossas bases e enviar nossas mensagens para o máximo de<br />

pessoas possível, e também assegurar que as pessoas em nossa lista se importem com o que estamos<br />

<strong>fatos</strong><br />

enviando. Mas o crescimento de usuários na base nunca é igual ao crescimento do engajamento.<br />

• nenhum destes aceita javascript , comprometendo a validação do preenchimento do<br />

formulário.<br />

• o remetente tem grandes chances de receber de volta formulários não preenchidos<br />

ou com erros, devido a essas restrições.<br />

s u p o rTE a V í d Eo s E a n i m açõEs<br />

• A nova interface do UOL e BOL suportam mensagens com vídeos e animações SWF.<br />

• o Gmail suporta vídeos de Youtube dentro das mensagens e pode ser visto como anexo,<br />

caso o usuário ative a preferência de exibição ao acessar a página Labs.<br />

• outros clientes de e-mail não suportam vídeos ou animações, apresentando em alguns<br />

casos aceitação para arquivos em GIF animado.<br />

b lo q u E i o d E i m aG E n s<br />

todos os clientes de e-mail bloqueiam a exibição de imagens quando o remetente é<br />

desconhecido, com exceção dos webmails Terra, UOL, BOL e Yahoo!. A partir do<br />

momento em que o remetente é adicionado aos contatos do usuário, todos eles<br />

exibem as imagens.<br />

E x i b i ç ão d o a s s u n To E r E m E T E n T E<br />

Em quase todos os clientes de e-mail a utilização de diferentes resoluções de tela altera<br />

o limite de caracteres para assunto e remetente. Para evitar problemas, a sugestão é<br />

utilizar no máximo 23 caracteres para cada um.<br />

Espaço d i s p o n í V E l pa r a E x i b i ç ão d o T E m p l aT E<br />

Como a resolução de tela utilizada por cada usuário varia muito, é recomendada a<br />

utilização de templates de até 600 pixels. Assim é possível evitar a variação de espaço<br />

disponível para o template e contribuir para uma leitura correta.<br />

39


A análise do comportamento do usuário de internet está evoluindo a passos largos. Os<br />

provedores consideram o comportamento do usuário na hora de ler seus emails: se ele<br />

<strong>fatos</strong><br />

abre, se clica na mensagem e, com isso, priorizam na caixa postal o que é mais relevante.<br />

apêndice 1: Guia de Suporte CSS em e-mail<br />

neste apêndice, você encontrará uma referência com as principais tags e principais<br />

clientes de e-mail em desktop, web e mobile. A atualização é de 10 de março de 2010.<br />

deSKtoP<br />

o elemento STYLE Outlook ‘07 Outlook ‘03 windows <strong>Mail</strong> apple <strong>Mail</strong> Notes 6 e 7 lotus notes 8,5 Thunderbird 2<br />

na tag s s s s n s s<br />

na tag s s s s n s s<br />

o elemento LINK Outlook ‘07 Outlook ‘03 windows <strong>Mail</strong> apple <strong>Mail</strong> Notes 6 e 7 lotus notes 8,5 Thunderbird 2<br />

na tag s s s s s s s<br />

na tag s s s s n s s<br />

seletores de CSS Outlook ‘07 Outlook ‘03 windows <strong>Mail</strong> apple <strong>Mail</strong> Notes 6 e 7 lotus notes 8,5 Thunderbird 2<br />

e s s s s n s s<br />

* n s s s n s s<br />

e.classname s s s s n s s<br />

e#id s s s s n s s<br />

e:link s s s s n s s<br />

e:active, e:hover n s s s n s s<br />

e:first-line n s s s n s s<br />

e:first-letter n s s s n s s<br />

e > f n n n s n n s<br />

e:focus n n n s n n s<br />

e+f n n n s n n s<br />

e[foo] n n n s n n s<br />

Textos e fontes Outlook ‘07 Outlook ‘03 windows <strong>Mail</strong> apple <strong>Mail</strong> Notes 6 e 7 lotus notes 8,5 Thunderbird 2<br />

direction s s s s n s s<br />

font n s s s n s s<br />

font-family s s s s s s s<br />

font-style s s s s s s s<br />

font-variant s s s s n s s<br />

font-size s s s s s s s<br />

font-weight s s s s s s s<br />

letter-spacing s s s s n s s<br />

line-height s s s s n s s<br />

text-align s s s s s s s<br />

text-decoration s s s s s s s<br />

text-indent s s s s n s s<br />

text-transform s s s s n s s<br />

white-space s n n s n n s<br />

word-spacing n s s s n s s<br />

vertical-align n s s s n s s<br />

40


Uma estratégia muito praticada em países onde o e-mail marketing está mais evoluído, é o envio<br />

de descontos e promoções mais agressivos para o grupo de usuário com baixo engajamento.<br />

<strong>fatos</strong><br />

Contudo, a freqüência de e-mails enviados para este grupo de usuários precisa ser menor.<br />

deSKtoP<br />

Cor e fundo (background) Outlook ‘07 Outlook ‘03 windows <strong>Mail</strong> apple <strong>Mail</strong> Notes 6 e 7 lotus notes 8,5 Thunderbird 2<br />

color s s s s s s s<br />

background p s s s n n s<br />

background-color s s s s n s s<br />

background-image n s s s n n s<br />

background-position n s s s n n s<br />

background-repeat n s s s n n s<br />

modelos de BOX Outlook ‘07 Outlook ‘03 windows <strong>Mail</strong> apple <strong>Mail</strong> Notes 6 e 7 lotus notes 8,5 Thunderbird 2<br />

border s s s s n s s<br />

height n s s s n s s<br />

margin s s s s n s s<br />

padding p s s s n s s<br />

width n s s s n s s<br />

posicionamento e Display Outlook ‘07 Outlook ‘03 windows <strong>Mail</strong> apple <strong>Mail</strong> Notes 6 e 7 lotus notes 8,5 Thunderbird 2<br />

bottom n s s s n s s<br />

clear n s s s n s s<br />

clip n s s s n n s<br />

cursor n s s s n s s<br />

display n s s s s s s<br />

float n s s s n s s<br />

left n s s s n s s<br />

opacity n n n s n n s<br />

overflow n s s s n n s<br />

position n s s s n s s<br />

right n s s s n s s<br />

top n s s s n s s<br />

visibility n s s s n n s<br />

z-index s s s s n s s<br />

listas Outlook ‘07 Outlook ‘03 windows <strong>Mail</strong> apple <strong>Mail</strong> Notes 6 e 7 lotus notes 8,5 Thunderbird 2<br />

list-style-image n s s s n n s<br />

list-style-position n s s s n n s<br />

list-style-type n s s s s s s<br />

Tabelas (tables) Outlook ‘07 Outlook ‘03 windows <strong>Mail</strong> apple <strong>Mail</strong> Notes 6 e 7 lotus notes 8,5 Thunderbird 2<br />

border-collapse s s s s s s s<br />

border-spacing n n n s n n s<br />

caption-side n n n n n n s<br />

empty-cells n n n s n n s<br />

table-layout s s s s n s s<br />

s suporte total n não suporta p parcial ou suporte com bugpartial or buggy support<br />

41


Mesmo com a melhora da banda larga no país, tente manter o e-mail bem leve: o HTML deve<br />

ter no máximo 30kb (preferencialmente 20kb), as imagens no máximo 50kb. E por mais que<br />

<strong>fatos</strong><br />

a altura não costume ser um limitador, deixe-a o menor possível para evitar muita rolagem.<br />

web<strong>Mail</strong>S<br />

o elemento STYLE Yahoo! <strong>Mail</strong> Yahoo! Classic Hotmail Gmail MySpace MobileMe<br />

na tag s s s n n s<br />

na tag s s s n n n<br />

o elemento LINK Yahoo! <strong>Mail</strong> Yahoo! Classic Hotmail Gmail MySpace MobileMe<br />

na tag s s s n n s<br />

na tag s s s n n n<br />

seletores de CSS Yahoo! <strong>Mail</strong> Yahoo! Classic Hotmail Gmail MySpace MobileMe<br />

e s s s n n s<br />

* s n s n n n<br />

e.classname s s s n n s<br />

e#id s s n n n n<br />

e:link s s s n n n<br />

e:active, e:hover s s s n n n<br />

e:first-line n s n n n n<br />

e:first-letter n s n n n n<br />

e > f s s n n n n<br />

e:focus s s n n n n<br />

e+f n n n n n n<br />

e[foo] s s n n n n<br />

Textos e fontes Yahoo! <strong>Mail</strong> Yahoo! Classic Hotmail Gmail MySpace MobileMe<br />

direction s s s n s s<br />

font s s s s s s<br />

font-family s s s s s s<br />

font-style s s s s s s<br />

font-variant s s s s s s<br />

font-size s s s s s s<br />

font-weight s s s s s s<br />

letter-spacing s s s s s s<br />

line-height s s s s n s<br />

text-align s s s s s s<br />

text-decoration s s s s s s<br />

text-indent s s s s s s<br />

text-transform s s s s s s<br />

white-space s s s s s s<br />

word-spacing s s s s s s<br />

vertical-align s s s s s s<br />

Cor e fundo (background) Yahoo! <strong>Mail</strong> Yahoo! Classic Hotmail Gmail MySpace MobileMe<br />

color s s s s s s<br />

background s s n p s s<br />

background-color s s s s s s<br />

background-image s s n n s s<br />

background-position s s n n s s<br />

background-repeat s s n n s s<br />

42


Para uma boa campanha de e-mail marketing, deve-se apostar em estratégias<br />

que privilegiem, além da personalização, uma experiência agradável ao usuário,<br />

<strong>fatos</strong><br />

tanto do ponto de vista do conteúdo oferecido, promoção, quanto do design.<br />

web<strong>Mail</strong>S<br />

modelos de BOX Yahoo! <strong>Mail</strong> Yahoo! Classic Hotmail Gmail MySpace MobileMe<br />

border s s s s s s<br />

height s s s s n s<br />

margin s s n s s s<br />

padding s s s s s s<br />

width s s s s n s<br />

posicionamento e Display Yahoo! <strong>Mail</strong> Yahoo! Classic Hotmail Gmail MySpace MobileMe<br />

bottom n n n n n s<br />

clear s s s s s s<br />

clip n n n n n n<br />

cursor s s s n s s<br />

display s s s s s s<br />

float s s s s s s<br />

left n n n n n s<br />

opacity n n n n s s<br />

overflow s s s s n s<br />

position n n n n n s<br />

right n n n n n s<br />

top n n n n n s<br />

visibility s s s n s s<br />

z-index n n n n n s<br />

listas Yahoo! <strong>Mail</strong> Yahoo! Classic Hotmail Gmail MySpace MobileMe<br />

list-style-image s s n n s s<br />

list-style-position s s s s s s<br />

list-style-type s s s s s s<br />

Tabelas (tables) Yahoo! <strong>Mail</strong> Yahoo! Classic Hotmail Gmail MySpace MobileMe<br />

border-collapse s n s s s s<br />

border-spacing s s n s s s<br />

caption-side n n s s n s<br />

empty-cells s s s s s s<br />

table-layout s s s s n s<br />

s suporte total n não suporta p parcial ou suporte com bugpartial or buggy support<br />

43


A classe C é a que mais cresce em renda e participação nos números da internet brasileira<br />

(38%) e ainda tem muito para crescer até atingir a maturidade de classes mais elevadas como<br />

<strong>fatos</strong><br />

A e B. Nunca se esqueça de incluí-los tanto na estratégia, quanto no conteúdo do seu e-mail.<br />

Mobile<br />

o elemento STYLE iPhone 3.0 android email android Gmail Palm Pre<br />

(WebOS)<br />

Palm treo<br />

(Win Mobile 6.5)<br />

Blackberry<br />

na tag s s n p s n<br />

na tag s s n p s n<br />

o elemento LINK iPhone 3.0 android email android Gmail Palm Pre Palm treo Blackberry<br />

(WebOS) (Win Mobile 6.5)<br />

na tag s s n p s n<br />

na tag s s n p s n<br />

seletores de CSS iPhone 3.0 android email android Gmail Palm Pre Palm treo Blackberry<br />

(WebOS) (Win Mobile 6.5)<br />

e s s n n n n<br />

* s s n n n n<br />

e.classname s s n s s s<br />

e#id s s n s s s<br />

e:link s s n s s n<br />

e:active, e:hover s s n s s n<br />

e:first-line s s n s n n<br />

e:first-letter s s n s n n<br />

e > f n s n n n n<br />

e:focus s s n s n n<br />

e+f s s n s s n<br />

e[foo] s s n s s n<br />

Textos e fontes iPhone 3.0 android email android Gmail Palm Pre Palm treo Blackberry<br />

(WebOS) (Win Mobile 6.5)<br />

direction s s n s s s<br />

font s s s p p n<br />

font-family s s s s s n<br />

font-style s s s s s s<br />

font-variant s s s s s n<br />

font-size s s s s s n<br />

font-weight s s s s s s<br />

letter-spacing s s s s n n<br />

line-height s s s s s n<br />

text-align s s s s s s<br />

text-decoration s s s s s s<br />

text-indent s s s s s n<br />

text-transform s s s s s s<br />

white-space s s s s n n<br />

word-spacing s s s s n n<br />

vertical-align s n s s s n<br />

44


A internet se tornou o terceiro veículo de maior alcance no Brasil, atrás apenas de rádio<br />

e TV. Só para ter uma idéia do crescimento, no ano passado, a <strong>All</strong> <strong>In</strong> <strong>Mail</strong> disparou quase<br />

<strong>fatos</strong><br />

4 bilhoes e meio de e-mails, representando um aumento de mais de 250% em relação a 2009<br />

Mobile<br />

Cor e fundo (background) iPhone 3.0 android email android Gmail Palm Pre<br />

(WebOS)<br />

Palm treo<br />

(Win Mobile 6.5)<br />

Blackberry<br />

color s s s s s s<br />

background s n n s s s<br />

background-color s s s s s s<br />

background-image s n n s s s<br />

background-position s s s s s s<br />

background-repeat s n n s s s<br />

modelos de BOX iPhone 3.0 android email android Gmail Palm Pre Palm treo Blackberry<br />

(WebOS) (Win Mobile 6.5)<br />

border s s s s s s<br />

height s s s s s n<br />

margin s s s s p n<br />

padding s s s s s s<br />

width s s s s s s<br />

posicionamento e Display iPhone 3.0 android email android Gmail Palm Pre Palm treo Blackberry<br />

(WebOS) (Win Mobile 6.5)<br />

bottom s s n s n n<br />

clear s s s s n s<br />

clip s n n n n s<br />

cursor n n n s n n<br />

display s s s s s n<br />

float s n n s s n<br />

left s s n s n n<br />

opacity s n n s n n<br />

overflow n n n s n n<br />

position s s n s n n<br />

right s s n s n n<br />

top s s n s n n<br />

visibility s s n s s n<br />

z-index s s n s n n<br />

listas iPhone 3.0 android email android Gmail Palm Pre Palm treo Blackberry<br />

(WebOS) (Win Mobile 6.5)<br />

list-style-image s n s s s s<br />

list-style-position s s s s s n<br />

list-style-type s n n s s n<br />

Tabelas (tables) iPhone 3.0 android email android Gmail Palm Pre Palm treo Blackberry<br />

(WebOS) (Win Mobile 6.5)<br />

border-collapse s s s s s s<br />

border-spacing s s s s n s<br />

caption-side n n n n n n<br />

empty-cells s s s s n n<br />

table-layout s s s s s s<br />

s suporte total n não suporta p parcial ou suporte com bugpartial or buggy support<br />

45


Rua Funchal, 513 • CJ 92 - Vila Olímpia<br />

São Paulo / SP 04551-060<br />

Telefone: 55 11 3627-3677<br />

www.allinmail.com.br

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!