fatos - All In Mail
fatos - All In Mail
fatos - All In Mail
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 />
Á = Á Ç = Ç<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 />
Á = Á Ç = Ç<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