fatos - Allin

Transcrição

fatos - Allin

Série Manuais
Manual para
montagem de
e-mail marketing
www.allinmail.com.br
3
6
13
16
21
25
33
38
40
introdução
Como seus clientes recebem seus e-mails?
webmail
Gmail
Webmail
Yahoo! Mail
webmail
UOL e BOL
Cliente de email
Windows Mail
Cliente de email
Microsoft Outlook
Cliente de email
Thunderbird e Terra
Conclusão
O que tiramos de tudo isso?
APêNDIce 1
Guia de Suporte CSS em E-mail
Em caso de dúvidas, estamos à disposição em nossos canais de atendimento:
• Telefone: 11 3627-3677
(de segunda a sexta, das 9h às 19h)
• E-mail:
[email protected]
All In Mail é uma ferramenta de entrega e gerenciamento de campanhas
de e-mail Marketing, que atende a cada cliente como se fosse o único.
Nosso objetivo é entregar resultado para o cliente e gerar resultado efetivo
tanto na abertura quanto na venda.
Última atualização deste manual: 08 de junho de 2011
“O e-mail quando feito com responsabilidade e enviado apenas para os usuários que realmente
fatos
Como seus clientes recebem seus e-mails?
querem receber seus e-mails, torna-se uma ferramenta de marketing direto sem comparação,
principalmente por causa do avanço da tecnologia antispam” - Victor Popper, CEO da AllIn.
Com a crescente participação do e-mail na vida das pessoas, ele passou a ser uma
importante ferramenta de comunicação, que merece muita atenção e cuidado para ser
utilizado da forma correta.
Atualmente existem inúmeros clientes de e-mail, divididos entre webmails e versões
para desktop. Como cada um deles possui particularidades, explicaremos por partes as
suas diferenças, com o objetivo de auxiliar o profissional no desenvolvimento de
templates para o e-mail marketing.
Webmails
Gmail
IG
iBest
Yahoo!
Yahoo! Mail Beta
BOL
UOL
Windows Live
Hotmail
Terra
Outlook Express
Windows Mail
Windows Live Mail
Apple Mail
C l i e n te s d e s k to p
Thunderbird
Microsoft Outlook 2003
Para facilitar a compreensão, serão abordados os seguintes tópicos para cada webmail e
cliente desktop:
• Suporte a CSS
• Suporte aos atributos de tags HTML
• Suporte a formulários
• Suporte a vídeos
• Suporte a animação
• Codificação de caracteres (suporte à acentuação)
• Bloqueio de imagens
• Painel de pré-visualização (preview pane)
• Exibição do Assunto e Remetente
• Espaço disponível para exibição do template
As informações necessárias para a criação do design e para a renderização de
templates são fundamentais para que o e-mail marketing chegue a caixa de entrada
do destinatário, sem defeitos e da forma como foi criado.
3
Todos nós queremos construir nossas bases e enviar nossas mensagens para o máximo de pessoas
fatos
Como seus clientes veêm seus e-mails?
possível, e também assegurar que as pessoas em nossa lista se importem com o que estamos
enviando. Mas o crescimento de usuários na base nunca é igual ao crescimento do engajamento.
Para entender o motivo das diferenças entre clientes de e-mail, é preciso entender que
o mercado evolui e se transforma mais a cada dia. Por um lado, designers e receptores
de e-mail são beneficiados pelos avanços na criação dos templates. Por outro, as
mudanças fazem com que cada cliente de e-mail se adapte a elas de alguma forma.
Citaremos como exemplo, o uso da formatação CSS, considerado inviável até alguns anos
atrás. Hoje, já é aceito por alguns clientes de e-mail. Atualmente, apenas o Apple Mail,
Thunderbird, Yahoo! e Windows Live suportam propriedades como float, margin e padding,
de forma que, exclusivamente para eles, é possível criar templates em tableless.
Como mencionado anteriormente, não são todos os clientes que se adaptam às
mudanças na plataforma web. É o caso do Lotus Notes, Gmail e Outlook 2007 que, por
não oferecerem suporte a esses padrões de desenvolvimento, necessitam do uso de
técnicas ultrapassadas de codificação HTML.
Para evitar problemas decorrentes dessas diferenças foi criado o Projeto Internacional
E-mail Standards. Ele contribui para a evolução de aplicações web, melhorando seu
suporte e acessibilidade, por meio do trabalho conjunto entre desenvolvedores de
aplicações e designers. Unindo esses dois profissionais é possível conciliar a importância
da elaboração do design com a consistência da renderização, e assim evitar possíveis erros.
Na criação do e-mail marketing é importante que o Web Standards, conjunto de normas
estabelecidas pela W3C, seja seguido. Com ele é possível alcançar, entre diversos
benefícios, melhorias na usabilidade da mensagem. Ao formatar no padrão recomendado
para o e-mail marketing, HTML 4.01 Transitional, é utilizada a tag font, a qual possibilita
a determinação por size, que varia entre 1 e 7 (sendo 1=9 px e 2=13px).
renderização em size = 1
renderização em font-size: 9px
ARIAL
VERDANA
TAHOMA
TIMES
GEORGIA
4
Separe as pessoas que estão abrindo e clicando suas mensagens com mais freqüência. Estes são
fatos
Como seus clientes veêm seus e-mails?
os seus clientes mais ativos, os que se preocupam mais com o que você está enviando e que
realmente optam por se envolver com suas mensagens e, por extensão, com a sua empresa.
Embora o tamanho da fonte pareça ser o fator de maior impacto na leitura do e-mail
marketing, deve-se ressaltar a importância da escolha da família. A tabela na página 4
mostra que algumas delas são mais legíveis do que outras, por apresentarem
características distintas como, por exemplo, a presença ou não de serifas. Inclusive,
é constatado que fontes com serifa são ideais para leitura de impressos e as sem, ideais
para leitura em tela.
Para ilustrar essa afirmação, compare a leitura de fontes diferentes no mesmo tamanho
e repare como no size 1, a família Verdana, é muito mais legível do que a Times.
Esse foi apenas um exemplo de que não só o tamanho, mas também a escolha da
família são importantes para criar um template legível e adequado.
Por outro lado, o design proposto e a identidade visual do cliente devem ser preservados,
de forma que essa escolha não seja baseada somente no que permite melhor leitura,
mas sim num conjunto de decisões relacionadas ao briefing.
O fato de o size 1 corresponder a 9 px e o size 2 corresponder a 13 px demonstra a
existência de uma grande diferença de tamanhos entre eles e ausência de um
meio-termo. Com isso, por vezes deve-se optar por uma fonte menor ou maior do que
a desejada, uma vez que não é possível utilizar tamanhos intermediários como 10px,
11px e 12px.
Esses foram alguns exemplos relevantes de particularidades sobre as aplicações do
e-mail marketing. É necessário, no entanto, entender mais sobre cada cliente de e-mail
para minimizar problemas decorrentes de renderizações mal feitas, garantindo o envio
correto da mensagem ao destinatário. Com isso, o sucesso do trabalho é resultado do
conhecimento adquirido sobre os métodos e ferramentas de codificação, associados à
análise de sua base de dados.
5
Ainda se retirarmos o envio de spam do volume total de e-mails trafegados globalmente (que pode
fatos
Webmail: Gmail
chegar a 90%), nós verificaremos que o tráfego mensal ainda é infinitamente superior a qualquer
ferramenta de mídia social, já que o Twitter só recentemente chegou ao POST de número 20 bilhões.
Introdução
Existem duas versões do Gmail: uma mais antiga que ainda pode ser acessada por meio
de um link na página inicial e a mais recente, utilizada pela maioria de seus usuários.
A versão antiga é a mesma utilizada atualmente pelo IG e iBest. Por este motivo, a
análise a seguir será divida em Gmail - versão antiga e Gmail - versão recente, de forma
a tratar das características dos três webmails.
C SS (H T ML)
As duas versões de Gmail possuem restrições quanto à renderização de estilos.
A formatação só será funcional caso seja utilizado o CSS inline em todos os elementos,
evitando a atribuição de estilos automáticos para a tag <body>.
Diferente do UOL/BOL, se ela não for feita dessa forma, o Gmail irá renderizar os
elementos HTML automaticamente, mantendo a estrutura compreensível, sem aplicar
sua própria formatação. Ou seja, ele não impõe fontes e tamanhos e possibilita uma
formatação onde a hierarquia de títulos é identificada e a leitura não é comprometida.
Além disso, o CSS não possui suporte para background-image, de forma que a utilização
de uma imagem de fundo só ocorra quando é atribuída a determinado elemento e sua
tag (exceto para <body>). Porém, é importante ressaltar que a imagem de fundo irá se
repetir na horizontal e na vertical.
Para utilização de background as restrições se repetem, uma vez que todas as formatações
serão ignoradas, caso o atributo seja agrupado a todas as formatações de fundo. Sendo
assim, excluindo alternativas como background-image e, consequentemente,
background-position, background-repeat, background-attachment, que também se
referem ao uso de imagem, a única opção é utilizar o background-color. Por não suportar
o background-image, a formatação de listas com bullets se restringe ao uso do atributo
list-style-type, determinando caracteres específicos como ícones da lista.
Voltando ao assunto formatação, pode-se verificar que na versão anterior do Gmail
e, portanto, nas versões atuais do IG e iBest, todos os textos precisam ser formatados
separadamente. Pode-se perceber que a nova versão aceita, sem problema algum, a
aplicação de estilos de texto em tag <body> para todos os elementos textuais, enquanto
a antiga encontra uma série de dificuldades. A renderização ocorre corretamente em
ambas as interfaces, somente se cada linha de texto for individualmente formatada,
utilizando uma das formas a seguir:
6
Não compre banco de dados, mas forme o seu próprio, através de ações promocionais com
fatos
clientes, cadastramento online e outras soluções simples. Muitas empresas apostam no volume,
mandam milhares de e-mails para garantir venda e acabam excluídas pelos próprios provedores.
1) Por meio de CSS:
<p style= “font-family: ‘Verdana’; font-size:13px; color:#000000;”>
Aqui entra o texto que deve ser formatado.
</p>
2) Por meio da tag <font>:
<font face= “Verdana” color= “#000000” size=”2”>
Aqui entra o texto que deve ser formatado.
</font></a>
Links
Nas duas versões do Gmail diferentes efeitos ocorrem sobre os links, de acordo com o
browser utilizado e não devido às características singulares do webmail.
Nas representações a seguir será possível analisar o template original, comparado ao
que é visualizado no Firefox e no Internet Explorer.
1. E-mail visualizado no Internet Explorer
2. E-mail visualizado no Firefox
3. Arquivo original do e-mail
A conclusão é de que todos os textos do e-mail marketing que se tratarem de um
website ou de um endereço de e-mail deverão ser formatados independentemente do
resto do texto. Caso não seja feito, acontecerá como no exemplo acima e eles herdarão
formato de links, na cor azul e sublinhados.
S u p o r te a o s at r i b u to s d e ta g s H T ML
• Tanto a versão anterior como a mais recente, suportam o Cellpadding e o
Cellspacing, atributos utilizados para formatação de layouts em tabelas.
• O atributo background, assim como o background-image, background-position
e background-repeat não são suportados pelas duas versões do Gmail.
7
A análise do comportamento do usuário de internet está evoluindo a passos largos.
fatos
Os provedores analisam o comportamento do usuário na hora de ler seus emails, se ele
abre, se clica na mensagem e, com isso, priorizam na caixa postal o que é mais relevante.
• Em nenhuma versão do Gmail os atributos da tag <body> são suportados.
• Não possui suporte para tag ol e nem map, o que prejudica o uso de imagens
mapeadas com links em diferentes posições.
B l o q u e i o d e i m a ge n s
Imagens recebidas de remetentes desconhecidos são bloqueadas em ambas as
versões do Gmail, porém elas podem ser vistas de diferentes formas, de acordo com
o navegador utilizado.
Visualização do template com imagens bloqueadas no Mozilla Firefox
Quando a imagem de um remetente desconhecido é enviada para uma versão anterior
do Gmail, IG ou iBest, nota-se que ela exibe um ícone de imagem quebrada no interior
de uma caixa de bordas de 1px no local da imagem original, cujas dimensões foram
incluídas no código HTML. Por esse motivo, a quebra pode prejudicar a visualização do
texto, caso ele seja maior do que a área delimitada.
Já na versão atual, a imagem não exibe bordas nem ícones, não prejudicando o texto.
1. Gmail versão antiga
2. Gmail versão atual
Visualização do template no Internet Explorer
Para ambas as versões, a visualização no Internet Explorer é a mesma. Nos dois casos
a imagem aparece dentro de caixas, o tamanho dos textos são alterados e apenas as
cores indicadas na formatação são mantidas.
1. Gmail versão antiga
2. Gmail versão atual
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
fatos
mundo, nesse universo, tem sucesso apenas aquela mensagem que chega para a pessoa
interessada em determinado produto ou serviço, enviada de maneira eficiente.
Animação
Flash
Para todos os navegadores e todas as versões do Gmail (anterior e atual), incluindo
portanto, IG e iBest, não há suporte para animações em Flash. Mais do que isso, no
espaço onde o conteúdo deveria aparecer, fica apenas um espaço vazio, que não indica
a presença de um arquivo SWF e nenhum alerta de segurança é enviado ao usuário.
GIF animado
Todos os webmails analisados neste conjunto suportam imagens em GIF animado, com
uma única restrição, que está relacionada ao tamanho do template:
ele não pode exceder o limite de 100Kb.
Vídeos
Assim como os arquivos Flash não são aceitos no corpo do e-mail na versão antiga e na
recente do Gmail, vídeos inserido por meio de tag <object> também não são suportados.
Gmail - versão nova
A versão recente do Gmail permite a exibição de vídeos do Youtube na área destinada
a anexos, somente se o link estiver escrito no corpo da mensagem e não embutido
em uma tag <embed> ou <object>. Essa nova função é disponibilizada na área Labs do
Gmail atual.
C o d i f i c a ç ã o d e c a r a cte r e s
Todos os webmails analisados (Gmail, IG e iBest) responderam corretamente aos testes
de codificação. Porém, para que não ocorram problemas inesperados a sugestão é de
que seja utilizada a codificação ISO-8859-1 e que os acentos e caracteres específicos
sejam convertidos em seus nomes de entidade.
Veja alguns exemplos e acesse a tabela completa em
http:// w3schools.com/tags/ref_entities.asp.
Á = &Aacute
Ç = &Ccedil
9
Oferecer conteúdo de interesse do cliente e só enviar mensagem para usuários cadastrados
fatos
é o segredo para fidelizar clientes. Quem compra banco de dados e manda mensagens
indiscriminadamente se classifica como spam e vai direto para o lixo eletrônico.
Pa i n e l d e P r é- v i s ua l i z a ç ã o
Embora o Gmail e os outros dois webmails analisados não apresentem painel de
pré-visualização da mensagem, o usuário poderá ter uma prévia do conteúdo do e-mail,
por meio da visualização dos primeiros caracteres do HTML que aparecem junto ao
subject da mensagem.
Como os trechos que aparecem são sempre os primeiros da codificação, é interessante
utilizar, para destinatários que possuem estes webmails, um breve descritivo da mensagem no início da codificação HMTL. Assim, mesmo sem a pré-visualização, o usuário
terá acesso a uma prévia da mensagem que irá ajudá-lo a decidir por abrir ou não o
e-mail.
A s s u n to e r e m ete n te
O limite de caracteres no Assunto do e-mail varia de acordo com a resolução utilizada:
Resolução de 1280x1024
90 caracteres, com interrupção no 87º e inserção de reticências, totalizando assim o
limite estipulado (87+3=90).
65 caracteres, sem interrupção de reticências.
de 33 a 35 caracteres, sem interrupção de reticências.
Remetente: deve ser até 25 caracteres
Como explicado anteriormente, pode-se perceber que nas resoluções menores o
assunto foi interrompido sem uso de reticências ao exceder o limite. Além disso, a
versão do IG e iBest possuem uma singularidade em relação ao remetente, que
possibilita o aumento da barra de rolagem da mensagem. Isso se deve ao fato de que,
10
De acordo com a SenderBase.org, organização da Cisco para monitoramento do tráfego
fatos
global de e-mails, o e-mail é utilizado para comunicação pessoal com muito mais regularidade
do que as redes sociais e o trafego mensal de emails passa dos 20 trilhões de mensagens.
ao extrapolar o limite, o remetente não pode ser lido inteiramente na caixa de entrada.
Uma vez aberta à mensagem, o webmail aumenta a barra da rolagem, possibilitando
assim, a leitura integral.
Por outro lado, essa expansão horizontal desloca o template para a direita numa tentativa
de centralizar a mensagem e, com isso, pode prejudicar a leitura.
Deve-se ressaltar que a versão atual do Gmail não possui tal característica, de forma
que o remetente é sempre interrompido ao extrapolar o limite de caracteres.
E s pa ç o d i s p o n í ve l pa r a o te m p l ate
O layout do Gmail atual é fluido, isto é, se adapta a resolução da tela, fazendo com que
a exibição do template sofra variações de acordo com ela.
Por outro lado, sua versão anterior, correspondente a atual do iBest e IG, amplia a área
de exibição do template de acordo com o tamanho do remetente. Isso significa que, se
o nome for muito grande e tiver um número elevado de caracteres, o texto não sofrerá
quebras de linhas e a tela ganhará barras de rolagem horizontais.
Mensagem exibida na resolução de 1280x1024 com espaço para exibição
do template de 780px:
11
Uma estratégia muito praticada em países onde o e-mail marketing está mais evoluído, é o envio
fatos
de descontos e promoções mais agressivos para o grupo de usuário com baixo engajamento.
Contudo, a freqüência de e-mails enviados para este grupo de usuários precisa ser menor.
Mensagem exibida na resolução de 1024x768 com espaço para exibição
do template de 550px:
Mensagem exibida na resolução de 800x600 com espaço para exibição do
template de 550px:
12
Se você utiliza o Front Page, retire meta name=?Generator? content=?Front Page?/
fatos
Webmail: Yahoo! Mail
ou qualquer referência ao nome Front Page do código, pois as ferramentas
anti-spam dão uma pontuação alta aos templates produzidos nesse software.
Introdução
Analisaremos neste capítulo as duas versões do webmail do Yahoo!:
as diferenças que existem entre a versão mais recente, Yahoo! Mail e a versão anterior,
Yahoo! Mail Classic.
A principal diferença entre eles é que a versão recente oferece uma navegação muito
mais simples para usuário, apresentando, por exemplo, painel de leitura na parte
inferior a listagem da caixa de entrada. Além disso, a área destinada a publicidade, que
antes ficava no topo hoje é opcional e se encontra na lateral do webmail. Assim, como
o Gmail, o usuário pode optar por utilizar a versão antiga, acessando para isso, um link
disponível em sua página inicial.
O desempenho nas duas se mostrou muito eficiente, apresentando apenas algumas falhas
que podem ser consertadas na criação do e-mail marketing.
Como benefícios, se destacam dois aspectos presentes em ambas as versões:
• Definição pelo próprio usuário sobre o bloqueio de imagens
O usuário pode optar por bloquear ou liberar todas as imagens de acordo com seu
interesse.
• Capacidade de reconhecimento de mensagens com certificado digital
O webmail se responsabiliza por identificar mensagens cujos remetentes são
verdadeiros e confiáveis, protegendo o usuário de tentativas de smap ou phishing.
Além disso, as mensagens certificadas são reconhecidas pelo usuário por meio de um
ícone presente tanto na caixa de entrada, como no momento em que o e-mail é aberto.
Isso permite que as mensagens seguras entrem direto na caixa de entrada do
destinatário, com exceção dos casos em que ele as defina como spam.
C SS
Yahoo! Mail Classic
A versão mais antiga do webmail suporta somente o CSS inline, porém apresenta alguns
erros na renderização de textos que foram definidos dentro da tag <body>. Quando isso
ocorre, o Yahoo! Mail Classic aplica seu estilo ao texto:
fonte arial na cor preta, tamanho 12 px.
13
Na hora de montar um e-mail marketing, não se esqueça que as imagens devem vir em links
fatos
absolutos e hospedadas em um servidor. Use tag ALT para garantir que mesmo quem não visualiza
imagens tenha uma idéia do que estaria ali, como um conteúdo ou uma referência a um site.
O posicionamento de elementos pode ser feito por meio do float e a utilização de
imagens como plano de fundo (exceto no body) são suportadas. No entanto as propriedades position, top, bottom, left ou z-index não são aceitas nesta versão.
Yahoo! Mail
Para a nova versão as mesmas limitações se aplicam, com poucas exceções. O Yahoo!
Mail passa a suportar hover, list-style-image e a propriedade white-space.
Yahoo! Mail Classic
Este é o único webmail que suporta a tag ol permitindo a construção de listas
ordenadas.
Além disso não suporta os seguintes atributos:
• type da tag li
• Bordercolor para table, tr e td.
• Tag body
• Border e usemap de imagens*
Yahoo! Mail
A versão mais recente do webmail do Yahoo! deixa de suportar a tag ol para
criação de listas ordenadas e passa a aceitar atributos background e text.
As duas versões do Yahoo! são configuradas para bloquear imagens recebidas. Porém, o
diferencial deles é que o usuário pode optar por liberá-las para todas as mensagens
(exceto as da caixa de spam) ou apenas para os remetentes conhecidos.
No caso das imagens estarem bloqueadas e o usuário utilizar o Firefox como servidor,
existem duas formas de representação da imagem: na primeira delas, quando as
dimensões da imagem não são declaradas, o texto alternativo é renderizado sem
nenhuma demarcação da imagem. No caso das dimensões e o atributo ALT serem
declarados na codificação, no local da imagem aparece um quadro com seu tamanho
original, com o texto alternativo em seu interior, acompanhado de um ícone de erro.
Utilizando o Internet Explorer, tanto faz a presença das dimensões da imagem na
codificação. De uma forma ou de outra, aparecerá um quadro com ícone de imagem. Se
existir um texto alternativo, ele aparecerá junto ao quadro representativo da imagem.
*Pode-se concluir que esta versão não suporta mapeamento de imagens por meio da associação da tag
área com o atributo usemap.
14
Mesmo com a melhora da banda larga no país, tente manter o e-mail bem leve: o HTML deve
fatos
ter no máximo 30kb (preferencialmente 20kb), as imagens no máximo 50kb. E por mais que
a altura não costume ser um limitador, deixe-a o menor possível para evitar muita rolagem.
Formulários
Para as duas versões, os dois formatos de formulário, Get e Post, são aceitos.
Porém, o envio só será feito após a confirmação do usuário ao receber um alerta de
segurança do webmail.
Vídeos e Flash
Ambos exibem um espaço vazio branco no lugar de vídeos e objetos SWF no corpo da
mensagem, devido ao não suporte desses formatos.
Pa i n e l d e p r é- v i s ua l i z a ç ã o, A s s u n to e Re m ete n te
O painel de leitura do Yahoo! Mail Classic e do Yahoo! Mail possibilitam somente a
visualização das mensagens na forma horizontal.
Yahoo! Mail Classic
Assunto: limite de 54 caracteres
Remetente: limite de 33 caracteres
Yahoo! Mail
Assunto: limite de 37 caracteres
Remetente: limite de 23 caracteres
Para ambos, se o limite de caracteres for excedido, a frase é interrompida
automaticamente.
E s pa ç o d i s p o n í ve l pa r a te m p l ate
As duas versões do Yahoo! foram desenvolvidas para serem visualizadas em 800x600 px,
de forma que o layout não se adapte a resolução de tela do usuário. Com isso o
espaço interno padrão é de 600px.
Recomenda-se a utilização de 550px como largura máxima, para visualizar
o template sem problemas.
15
Uma boa dica sobre links é usar urls pequenas e intuitivas. Prefira sempre:
fatos
Webmail: UOL e BOL
www.dominio.com.br/campanha do que www.dominio.com.br/frt65789/src/123.asp.
Não esqueça de sempre incluir target = “_blank” em todos os seus links.
Introdução
Neste capítulo serão analisados os webmails Bol e UOL. Tempos atrás ambos possuíam
características muito próximas, no que diz respeito a limitações técnicas, padrão para
exibição de Assunto e Remetente e funcionamento do sistema.
Atualmente os dois passaram por reformulações e modernizações que incluem novo
design, alterações na navegação e carregamento via AJAX. Porém, apenas o UOL possui
um link para a interface anterior.
Além disso, ambos implementaram o “Painel de Leitura” - painel de pré-visualização de
mensagens - que pode ser habilitado ou desabilitado de acordo com as necessidades do
usuário. Isto é, quando acessados pela primeira vez, ele permanece desabilitado. Mas,
a partir do momento que é habilitado, as mensagens serão exibidas somente naquele
local, sem opção de visualização da forma anterior, em outra tela.
Novamente, tanto o UOL quanto o BOL mantiveram o mesmo tratamento para SPAM e
para mensagens de remetentes desconhecidos. No primeiro caso, eles são direcionados
automaticamente para a lixeira, onde permanecem por 30 dias antes de serem excluídas
permanentemente. E no segundo caso é enviado um tira-teima, que faz com que a
mensagem entre na caixa de entrada do receptor somente depois que o remetente a
confirme.
C SS
UOL - Interface antiga
A versão antiga do UOL não oferece suporte ao CSS, seja ele externo, incorporado ou
inline. Ao realizarmos um teste com CSS inline e incorporado foi constatado que o
webmail ignorou a formatação utilizada e aplicou seu próprio CSS ao template.
BOL/UOL - nova interface
Tanto UOL quanto BOL possuem atualmente uma versão que aceita o CSS, capaz de
suportar propriedades complexas como float e overflow, porém com algumas restrições
como propriedades list-style e font-strech. Além disso, pode-se notar que ao utilizar
estilos dentro da tag <body> a formatação é ignorada.
16
Para uma boa campanha de e-mail marketing, deve-se apostar em estratégias
fatos
que privilegiem, além da personalização, uma experiência agradável ao usuário,
tanto do ponto de vista do conteúdo oferecido, promoção, quanto do design.
S u p o r te a f o r m u l á r i o s
UOL - interface antiga
No método Post, todo botão que tiver atributo type declarado com “submit” será oculto
na mensagem. Utilizando o método GET, se o botão for exibido, ele não será ativo.
Formulários feitos com o método GET ou POST são funcionais somente se o botão
“enviar” ou “ok” estiverem em forma imagem na seguinte maneira:
<input type=”image” src=”imagemBotao.gif” alt= “Enviar />
Com essas formatações será possível utilizar a tecla TAB para navegar de um campo
para outro do formulário e preencher sem problemas os espaços de texto. Além disso,
campos como checkbox e botões de rádio são funcionais somente se estiverem em
forma de imagem.
Na nova interface diversos atalhos para funções do webmail foram configurados para
as letras do teclado - próxima mensagem (N), mensagem anterior (P), abrir mensagem
(ENTER), escrever mensagem (C), encaminhar mensagem (F), responder (R), responder
a todos (A), marcar como não lida (Z) e marcar como lida (X). Devido a essas mudanças,
tanto o BOL quando UOL não suportam formulários em GET e POST de forma adequada.
Isso demonstra a ineficiência de ambos em atender as necessidades básicas de
preenchimento de campos descritivos, e a adequação para formulários de múltipla
escolha, como pesquisas e enquetes, em que se utilizam apenas chekbox e botões de
rádio.
Devido a uma propriedade do navegador, ao
utilizar o Firefox para acessar a interface antiga
do UOL, todos os links apresentam sublinhado
azul, independentemente da cor escolhida na
formatação do link.
Além disso, não suporta a tag <style> dentro de
<head>.
17
Com os planos do governo de inclusão digital, existe um enorme potencial para ampliar a
fatos
oferta de internet para mais da metade da população. Pense nas suas estratégias para contruir
uma base de e-mails bem estruturada para receber a ampliação da banda larga em todo o país.
Na produção de templates é necessário formatar e declarar corretamente todos os
elementos. Caso contrário, o texto irá seguir as regras de CSS da interface antiga,
apresentando sempre fonte Arial tamanho 11px. Para h2, a especificações da fonte
serão as mesmas, porém em caixa alta na cor branca, sobre uma caixa de fundo azul.
Já para definir uma cor de fundo do template que não seja a branca é necessário definir
o bgcolor dentro de tabelas externas ou internas, cujo tamanho seja definido em pixels.
Vale ressaltar que o bgcolor não funciona no <body>, nem em tabelas com largura
definida em porcentagem.
Esta versão suporta apenas a tag style inline, de forma que os estilos inseridos no
cabeçalho (<head>) são removidos.
Os elementos sem formatação, assim como na versão anterior seguirão as
especificações do CSS do webmail. Neste caso textos aparecerão na cor preta, em fonte
do tipo Verdana e tamanho 12px e os títulos (h1, h2, h3) seguem estas mesmas
especificações, porém com variações de tamanho.
Não suporta as tags de lista <ol>, <ul>, <li> , e o atributo border da tag <img>.
Assim como a versão anterior, não suporta o atributo bgcolor com fundo definido em
porcentagem para tabelas e células.
S u p o r te a a n i m a ç ã o e v í d e o s
Suporta corretamente objetos SWF e vídeos, porém sempre acusará uma pontuação
antispam de, no mínimo, 0,5 pts na avaliação da peça. Isto deve-se ao fato de existir
dentro da mensagem um objeto do tipo <embed>.
Da mesma forma que a versão anterior, suporta corretamente vídeos e SWF.
Tanto na interface antiga, quanto na nova, a configuração correta do tira-teima
(captcha), permite a exibição das imagens sem bloqueios, uma vez que o remetente é
reconhecido pelo webmail. Dessa forma, não é necessário que o remetente faça parte
da lista de contatos do destinatário, pois o sistema o libera automaticamente.
18
A classe C é a que mais cresce em renda e participação nos números da internet brasileira
fatos
(38%) e ainda tem muito para crescer até atingir a maturidade de classes mais elevadas como
A e B. Nunca se esqueça de incluí-los tanto na estratégia, quanto no conteúdo do seu e-mail.
Pa i n e l d e p r é- v i s ua l i z a ç ã o
Na versão anterior do UOL todas as mensagens são exibidas isoladamente em uma
janela, uma vez que ela não possui um painel de visualização de mensagem.
A nova interface oferece duas opções de visualização de mensagens: em uma janela
isolada, tal qual na versão anterior, ou em um painel de leitura. Caso o usuário deseje
utilizar esta última forma é necessário que ele a habilite, acessando as configurações do
webmail. Fazendo esta opção, as mensagens serão lidas exclusivamente no painel, sem
a possibilidade de utilizar outra janela para leitura.
Utilizando o painel de leitura habilitado na parte inferior da tela, a parte superior da
mensagem é a única visível ao destinatário, sem que ele precise utilizar as barras de
rolagem verticais. Já em outras aplicações de e-mail, os painéis aparecem na parte
inferior da lista de e-mails, tornando necessária a visualização no topo da mensagem
das chamadas principais ou a presença de um índice com informações do que o leitor
irá encontrar mais abaixo.
O estudo realizado a seguir utilizou como base a resolução de tela de 1024 x 768 pixels.
Assunto: limite de até 32 caracteres para mensagens não lidas
Remetente: limite de até 21 caracteres
Observação: Na contagem de caracteres o espaço é incluído.
Assunto: limite de 60 caracteres para mensagens não lidas
Remetente: Caracteres ilimitados
Observação: Na contagem de caracteres o espaço é incluído.
E s pa ç o d i s p o n í ve l pa r a e x i b i ç ã o d o te m p l ate
O layout de ambos se adapta à resolução da tela, aumentando ou diminuindo de
acordo com o tamanho disponível.
19
A internet se tornou o terceiro veículo de maior alcance no Brasil, atrás apenas de rádio e TV.
fatos
Só para ter uma idéia do crescimento, no ano passado, a All In Mail disparou quase 4 bilhões
e meio de emails, representando um aumento de mais de 250% em relação a 2009.
Ao alterar manualmente o tamanho da janela de visualização, embora o BOL apresente
uma largura mínima de layout maior do que o UOL (537px para o UOL e 747px para
o BOL), ela não é recomendada. Isso deve-se ao fato de que na resolução 800 x 600 a
mensagem pode aparecer oculta por barras de rolagem horizontais e dificultar a leitura.
Devido a esses fatores e ao impacto que eles causam na leitura, é recomendada a utilização
de uma largura máxima de 530px para os dois webmails analisados.
20
Segundo
previsões,
o
natal
de
2010
teve
como
projeção,
crescer
40%
no
fatos
Cliente de E-mail: Windows Mail
faturamento das lojas online em relação ao ano anterior. O e-mail marketing
bem
trabalhado
pode
corresponder
a
mais
de
40%
deste
faturamento.
Introdução
Vamos abordar agora o Windows Mail, um cliente desktop da Microsoft, que substitui o
Outlook Express na versão Windows Vista.
Por renderizar imagens de forma semelhante ao Outlook 2003, o Windows Mail tem
um funcionamento muito parecido com este cliente de e-mail. Além disso, o bom
desempenho constatado nos testes é resultado da utilização de um mecanismo de
renderização igual ao do Internet Explorer.
Confira a seguir a análise de todos os suportes e limitações deste cliente de e-mail.
C SS
Como mencionado, o Windows Mail renderiza o HTML da mesma forma que o Internet
Explorer. Sendo assim, tanto faz a utilização de CSS inline, incorporados ou externos,
pois nenhum deles apresentará problemas no posicionamento em sua formatação.
Porém, todas as falhas encontradas no servidor também valem para o Windows Mail.
Assim como o Internet Explorer encontra dificuldades em visualizar templates formatados
com base nas recomendações de estilos do W3C, este cliente desktop também
apresenta os mesmos problemas.
Um ponto positivo do Windows Mail é a alta funcionalidade das seguintes
propriedades:
• Float
• Background-image
• Clear
• Margin
• Padding
• Hover (responsável por definir o comportamento dos links quando o mouse passa
por cima deles).
Além disso, deve-se fazer apontar as seguintes particularidades deste cliente de e-mail:
• Não suporta focus, white-space, list-style-image e font-stretch.
• Apenas o valor inside é suportado na propriedade list-style-position.
• Para obter a aparência de list-style-position:outside, é necessário não declarar
a propriedade list-style-position.
21
Um dos segredos da All In Mail está no controle anti-spam. Dos mais de 4 bilhões de
fatos
e-mails enviados, em 2010, o número de reclamações de spam nos orgãos internacionais
não chegou a 160. Isso faz com que nossos servidores nunca estejam em blacklists.
Quase todos os atributos e tags HTML são suportados pelo Windows Mail. Dentre eles
estão cellpadding, cellspacing, colspan e rowspan. Por outro lado, não suporta as tags
ol e base.
Como a maioria dos e-mails analisados as imagens são bloqueadas quando os
remetentes são desconhecidos. Uma vez adicionados a lista de e-mails do usuário, não
ocorrerão problemas para sua visualização.
Quando a imagem não possui atributos de altura e largura no código HTML, o texto
alternativo aparecerá dentro de uma caixa, em uma linha apenas. Dessa forma a largura
da caixa será a mesma do texto e, portanto, quanto maior ele for, maior ela será.
Deve-se ressaltar que o template poderá sofrer quebras caso a caixa com o texto alternativo
extrapole a sua largura original.
Caso a imagem tenha suas dimensões inseridas no código, o texto alternativo aparecerá
no interior de uma caixa com o seu tamanho original, na fonte Verdana tamanho 11 px.
Se o texto estiver formatado com outra fonte, ele será modificado para estas
especificações, porém manterá a cor definida em sua programação.
Por fim, caso o atributo ALT não seja definido, haverá um quadrado com um ícone de
erro, indicando a existência de uma imagem bloqueada.
Nesta imagem pode-se notar todos os exemplos citados acima. Deve-se apontar
somente que, nos casos em que as dimensões são inseridas no código, o texto
alternativo é quebrado em linhas, conforme o tamanho da imagem.
22
Não deixe de visualizar suas campanhas, durante os testes, nos smartphones mais vendidos
fatos
no Mercado. Tanto o sistema operacional iOS como o Android podem trazer resultados
diferentes. Não se esqueçam que o número de celulares no Brasil cresce a cada dia.
Formulários
Tanto o método Post quanto o GET funcionam corretamente no Windows Mail.
A mensagem é exibida corretamente, porém os dados são enviados somente após
a confirmação do usuário ao alerta de segurança.
Vídeos
O Windows Mail não suporta vídeos incorporados na mensagem. Uma mensagem é
enviada ao usuário, informando que a abertura do vídeo não é possível e o espaço
destinado a ele fica em branco.
Aparecerá um aviso informando que o objeto não pode ser
executado devido às configurações de segurança que proíbem
a execução de controles Activex ou devido ao bloqueio dos
publicadores de um dos controles.
Animação em Flash
Os mesmos erros ocorrem quando a mensagem recebida pelo usuário contém um
objeto SWF, independente da forma como ele tenha sido inserido (por meio do
Javascript ou da tag <object>).
Pa i n e l d e v i s ua l i z a ç ã o
Assim como no Outlook, o painel de visualização do layout pode ser definido de duas
formas: na lateral da caixa de entrada (vertical) ou abaixo dela (na horizontal).
Como o limite de caracteres para assunto e remetente varia de acordo com o espaço
disponível no painel, a posição dele interfere diretamente neste número. O painel
na vertical que ao lado da lista de e-mails, permite a visualização de uma parcela maior
do template, enquanto o painel horizontal prioriza a leitura da parte superior da
mensagem.
23
A All In Mail acaba de lançar a feature de teste A/B de disparo. De forma automática, você testa tanto o
fatos
subject como o conteúdo de sua campanha para uma amostragem da sua base de e-mails, e melhora
significantemente os seus resultados de abertura e clique enviando todo o resto para o teste vencedor.
Layout vertical
Remetente: limite de 16 caracteres.
Assunto: limite de 33 caracteres.
Obs. Caso estes limites sejam extrapolados, as palavras serão interrompidas por
reticências.
Layout horizontal
Remetente: limite de 15 caracteres, com interrupção de reticências no 16º caractere
Assunto: limite de 38 caracteres.
Como esses números variam muito de acordo com cada cliente de e-mail, a média
utilizada é de 23 caracteres para assunto e para o remetente. Dessa forma garantimos
que grande maioria dos destinatários recebam a mensagem corretamente.
E s pa ç o d i s p o n í ve l pa r a te m p l ate
Em clientes de e-mail desktops, determinar o espaço disponível para template não é
uma tarefa simples, pois ele possui muitas variáveis. Por exemplo: o tamanho disponível
pode alterar de acordo com a forma de visualização no painel (lateral ou inferior), os
ajustes personalizados das dimensões destes painéis e as diferenças de resolução de tela.
Para não correr o risco de que alguns vejam o template corretamente e outros não,
é recomendada a utilização da largura máxima de 600 pixels.
RESOLUÇÃO de tela
largura máxima
800 x 600 px
560 px
1024 x 768 px
770 px
1280 x 1024 px
1000 px
24
Behavioral Targeting é uma técnica usada por marketeiros online para aumentar a eficácia de
fatos
Cliente de E-mail: Windows Outlook
suas campanhas. Utiliza as informações coletadas sobre um indivíduo através da navegação
na web, para selecionar quais os anúncios ou produtos mais relevantes a este indivíduo.
Introdução
As versões do Outlook são utilizadas principalmente por empresas no seu dia-a-dia.
Dessa forma, para comunicações B2B por meio de e-mail marketing é necessário estar
atento às características e particularidades de cada um deles para garantir a otimização
do processo.
Inicialmente a diferença primordial entre Outlook 2007 e as versões 2003 e Outlook
Express é o mecanismo de renderização de imagens. Os mais antigos utilizam dois
mecanismos para tanto: o Internet Explorer para exibição e Word para edição e
composição. Isto é, uma mensagem que é vista corretamente no Internet Explorer, será
vista de forma semelhante na caixa de entrada do Outlook 2003 e Express Outlook.
Caso ela seja reenviada para outro destinatário, a mensagem automaticamente entra
em modo de composição e a ferramenta de renderização é substituída para o Word.
Como o Word não suporta os mesmos mecanismos para edição e exibição, poderão
ocorrer falhas de visualização da mensagem. Isso dá-se ao fato de que o Word não
suporta os mesmos elementos HTML e CSS que o Internet Explorer suporta.
Para corrigir tal problema, o Outlook passou a utilizar somente o Word para renderizar
as mensagens. Tal alteração fez com que essa nova versão tivesse algumas restrições em
relação ao uso de tags HTML e de propriedades de CSS. Ou seja, as restrições e suportes
que o Word 2007 tem ao HTML e CSS são repassadas para o Outlook 2007.
Devido a estas peculiaridades é recomendada a não utilização de CSS para formatação.
Utilizando a diagramação em tabelas é possível que mais usuários consigam visualizar
o template da forma como foi criado, sem problemas causados pelas diferenças de
suporte.
Para ilustrar demais diferenças entre Outlook 2007, Express Outlook e Outlook 2003,
vamos fazer a seguir uma análise detalhada de cada um deles em relação às suas
aplicações e restrições.
C SS
As versões citadas do Outlook suportam corretamente 3 formas de se trabalhar com CSS
em HTML:
• arquivo externo
• estilos inline
• estilos incorporados (dentro da tag style na seção <head>).
25
Deve-se considerar a porcentagem de e-mails abertos numa campanha, somente os e-mails entregues:
fatos
e-mails abertos / e-mails válidos. Se você enviou, 1.100 e-mails, sendo que 1.000 entregues e só
foram abertos 700. (700/ 1000 = 0.7). Ou seja, 70% da sua base abriu a mensagem de e-mail enviada.
Por outro lado a versão 2007 é a única que não suporta background-image, impedindo
a renderização de imagens de fundo no template. Além disso, o Outlook 2007 não
suporta uso de ícones para listas não ordenadas (<ul>), uma vez que ele não aceita
propriedades CSS list-style-image e background. Da mesma forma que não apresenta
suporte a diversas funções do CSS, a utilização de webstandards para posicionamento
e diagramação de elementos HTML também é restrita. A solução é utilizar tabelas
alinhadas para exibir as informações em blocos, sem prejudicar seu recebimento.
A lista a seguir mostra as propriedades de CSS que o Outlook 2007 não suporta e dá
destaque às mais utilizadas na composição de um layout para web.
lista de propriedades css não suportadas pelo outlook 2007
active
azimuth
background-attachment
background-image
background-position
background-repeat
border-spacing
bottom
caption-side
clear
clip
content
counter-increment
counter-reset
cue-before
cue-after
cue
cursor
display
elevation
empty-cells
focus
first-child
first-line
first-letter
float
font-size-adjust
font-stretch
height
hover
left
line-break
list-style-image
list-stule-position
marker-offset
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
overflow-x
overflow-y
pause-before
pause-after
pause
pitch
pitch-range
play-during
position
quotes
right
richness
text-transform
top
Unicode-bidi
visibility
visited
voice-family
volume
widows
Word-spacing
Z-index
width
Deve-se ressaltar que o Outlook 2003 e o Outlook Express suportam background-image,
mas não suportam as seguintes propriedades CSS:
• border-spacing
• caption-side
• empty-cells
• list-style-image
• font-stretch
• font-size-adjust
• white-space
Links
Mesmo quando as imagens que possuem links são bloqueadas, nas três versões de
Outlook os botões funcionam adequadamente.
26
Uma campanha de e-mail se divide em 3 etapas: entrega, abertura e clique. Abrir o e-mail, simples-
fatos
mente, não resolve o problema da grande maioria dos negócios. É necessário fazer com que o usuário
também clique no produto ou, no link que vai direcioná-lo para um hotsite, blog ou e-commerce.
O uso da tag <map> para determinar áreas de links diferentes pode ser utilizada, porém
deve ser evitada, uma vez que clientes de desktop costumam mudar coordenadas de
áreas mapeadas e assim, deslocar o posicionamento dos links.
Assim como na maioria dos webmails, nenhuma das versões do Outlook suporta imagens
de fundo, inseridas tanto no modo background em tags HTML como em CSS. Caso seja
necessário incluir imagem que não seja uma apenas um fundo colorido, é recomendado
fazer um recorte em sua área e incluí-la no template por meio da tag <img>.
Além disso, o atributo background-color não funciona perfeitamente no Outlook 2007.
Por exemplo: se inserirmos elementos com cor de fundo dentro de uma tabela que já
tenha outra cor de fundo determinada, eles aparecerão sem a cor especificada.
Conheça outros atributos HTML que não são suportados pelo Outlook 2007 e confira
em destaque os que são os mais utilizados para layouts HTML:
lista de atributos html não suportados pelo outlook 2007
accept-charset
accept
accesskey
adress
archive
background*
button
checked
classid
code
codecore
codetype
compact
data
declare
defer
disabled
enctype
input
longdesc
marginheight
marginwidth
media**
method
multiple
noresize
object
ol
onblur
onchange
onclick
ondbclick
onfocus
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onreset
onselect
onsubmit
onunload
option
optgroups
readonly
scrolling
selected
standby
tabindex
title
valuetype
* apenas ao incluir imagem de fundo
**screen, print, projection, braille, speech, all
Existem alguns elementos HTML que também não são suportados pelo Outlook 2007.
São eles form, script, iframe, applet, bdo, isindex, menu, noframes, noscript e q.
Com as grandes mudanças entre as versões do Outlook foram criadas duas ferramentas
que possibilitam a visualização dos possíveis problemas causados pela leitura do
Outlook da programação HTML utilizada. Uma delas é compatível ao Dreamweaver da
Adobe e outra é compatível ao Microsoft.
27
Avalie sempre: para ter boa entrega, verifique a pontuação anti-spam para que caia sempre
fatos
na caixa de entrada. Para abertura avalie o subject. O clique envolve a qualidade visual e o
conteúdo da peça enviada. Analise os desempenhos anteriores para melhorar a performance.
Faça o download dessas duas ferramentas no site:
http://msdn.microsoft.com/en-us/library/aa338201.aspx
E aprenda como utilizá-las clicando no link:
http://msdn.microsoft.com/en-us/library/aa338200.aspx.
Por outro lado, as versões Outlook Express e Outlook 2003 aceitam o atributo
background e não apresentam problemas com cores de fundo diferentes para elementos
alinhados. Quanto ao Javascript, algumas restrições se mantém nestas duas versões.
O Outlook bloqueia as imagens recebidas de remetentes desconhecidos. Nas três
versões é necessário adicionar seu endereço à lista de contatos, para conseguir
visualizar a imagem inserida na mensagem.
Por isso, é importante informar nos e-mails enviados sobre a necessidade do reconhecimento
do remetente e incentivar os usuários a incluir seu endereço em suas listas.
Outlook 2003
A versão 2003 possui uma característica que piora a visualização da mensagem quando
as imagens não possuem suas dimensões inseridas no código HTML. Dessa maneira, ele
aumentará os boxes de imagem para o tamanho de uma linha inteira e incluirá um X
vermelho, indicando a presença de um objeto bloqueado. Além disso, irá alertar sobre
risco de segurança antes da ALT tag, que aparecerá logo em seguida deste aviso.
As formatações de texto especificadas para a alt tag nem sempre são seguidas:
• Tanto no Outlook 2003 quanto no 2007 , essa formatação é ignorada e o aviso do
sistema com alt tag utilizarão a fonte padrão.
• Apenas a cor especificada é exibida e as especificações de tamanho e fonte são
ignoradas na versão Express.
28
Certifique-se de que a campanha de e-mail tenha consistência, alinhando seu visual com o todo.
fatos
Faça com que remeta à marca: de nada adianta promover o lançamento de um produto através
do e-mail, se o visual da peça não tiver nada a ver com o restante das ações online e offline.
Outlook Express
Nesta versão a imagem também é substituída por um X vermelho, mas suas dimensões
são respeitadas. Em relação a ALT tag, ela não virá acompanhada de nenhum aviso de
segurança e receberá somente a formatação de cor.
Outlook 2007
Embora seja a versão mais recente, o Outlook 2007 não suporta o atributo ALT de
imagens. Ao receber de um remetente desconhecido imagens no corpo da mensagem,
um aviso é exibido somente na primeira imagem e as demais são identificadas somente
com um X vermelho. Assim como a versão Expressa, as dimensões da imagem não são
alteradas.
Formulários
O Outlook 2007 não suporta formulários (<form>) e por isso, desabilita a função do
action e pode alterar aparência de elementos como checkbox e radio buttons.
Isso deve-se ao fato de que ele utiliza o Microsoft Word 2007 para renderizacão e
por motivos de segurança.
Sendo assim, a melhor opção para o envio de formulários para esse cliente de e-mail
é por meio de um link em uma página web.
Além disso, esta versão do Outlook não suporta os componentes de formulários, tais
como input, select, optground e button.
Já o Outlook 2003 possibilita a correta visualização dos elementos do formulário, mas
impede o envio dos dados inseridos no campo, por meio da desativação do action.
29
No caso de campanhas sazionais, como o Natal, Dia das Mães ou dos Namorados, por
fatos
exemplo, considere fazer um envio que introduza a promoção e sirva como um
teaser, provocando a curiosidade do seu público e aumentando as possibilidades de êxito.
O Outlook Express, além de não interferir na visualização do formulário, permite que os
dados sejam enviados, uma vez que o action continua habilitado.
Como medida de segurança, a mensagem visualizada no painel de leitura só será
enviada após confirmação do usuário ao alerta emitido pelo Outlook, como pode ser
visto na imagem a seguir.
Caso a mensagem seja aberta numa janela, o aviso de segurança não é mostrado e a
mensagem é enviada automaticamente.
Outlook 2003
No caso do Outlook 2003 o formulário é visualizado normalmente, porém o envio de
dados só será possível se a mensagem estiver aberta em outra janela e com autorização
do usuário, após o alerta de segurança.
Caso a mensagem seja aberta no painel de leitura e preenchida neste local, os dados
não são enviados.
AnimaçãO em flash
Por não suportar as tags object e script, nenhuma das versões do Outlook analisadas
aceita a exibição de conteúdos em Flash no corpo da mensagem. Por outro lado, a
versão 2000, que apresenta muito problemas com segurança é a única que tem suporte
a esse tipo de arquivo.
Outlook 2003
Aviso de bloqueio é enviado.
Após confirmação, o espaço
destinado ao arquivo aparece
em branco, sem qualquer
indicação de sua presença.
30
Se planeja usar peças com conteúdo dinâmico, baseado no comportamento do usuário, esteja certo
fatos
de que cada oferta será enviada para o nicho de público correto. Nada mais chato do que
um homem solteiro receber um e-mail com desconto para carrinho de bebe, ou maquiagens.
Outlook Express
É enviado um aviso de imagens que informa sobre o bloqueio delas. Ao desbloquear, o
local do arquivo multimídia fica em branco.
Outlook 2007
A imagem é substituída por um X vermelho que indica a presença de um objeto
bloqueado.
G IF a n i m a d o
Como foi dito anteriormente, o Outlook 2007 utiliza o Word 2007 para renderizar suas
mensagens. Dessa forma, o GIF animado é substituído por uma imagem estática do seu
primeiro frame.
Como as versões antigas utilizam o Internet Explorer para exibir mensagens recebidas,
o GIF animado é suportado adequadamente.
Vídeos
O uso de vídeos em templates de e-mail marketing é inviável, uma vez que eles são
inseridos da mesma forma que uma animação, por meio da tag <object>.
A única versão de Outlook que é capaz de exibir vídeos no corpo da mensagem é a
2000, a qual possui diversos problemas com segurança.
C o d i f i c a ç ã o d e c a r a cte r e s
Os clientes de e-mail analisados responderam corretamente aos testes de codificação.
Porém, para que não ocorram problemas inesperados a sugestão é de que seja utilizada
a codificação ISO-8859-1 e que os acentos e caracteres específicos sejam convertidos
em seus nomes de entidade. Veja alguns exemplos a seguir e acesse a tabela completa
em http:// w3schools.com/tags/ref_entities.asp.
Á = &Aacute
Ç = &Ccedil
Pa i n e l d e p r é-v i s ua l i z a ç ã o
Todas as versões de Outlook analisadas permitem que o usuário visualize o conteúdo
da mensagem por meio de um painel de leitura. Dependendo do local de visualização
escolhido, a mensagem aparecerá de uma forma. Se o painel estiver abaixo da lista, a
parte superior da mensagem terá destaque e se o painel estiver à esquerda, o conteúdo
da esquerda será exibido. Como nos dois casos, a área que acaba ganhando mais
destaque é o canto superior esquerdo, é interessante que ele informe assunto e a
empresa remetente, para que o usuário identifique a mensagem antes de abri-la.
31
Revise sempre o texto, ou se você o criou, peça para outra pessoa revisá-lo. Adeque sua
fatos
mensagem ao perfil de público. Não precisa usar uma linguagem rebuscada, mas não conferir a
gramática ou corrigir possíveis erros de digitação é uma falha grave, pois demonstra descuido.
A flexibilidade de redimensionamento nos painéis de leitura possibilita a visualização
de quantos caracteres o usuário desejar no remetente e no assunto da mensagem. Por
outro lado, o tamanho de exibição irá variar também de acordo com a resolução de tela
de cada um.
Considerando a ausência de alteração nas configurações iniciais, mantendo o default
do software, na posição vertical e com uma resolução de 1280x1024, encontra-se os
seguintes valores:
Assunto: 49 caracteres em todas as versões
Remetente: 24 caracteres no Outlook Express
54 no Outlook 2003 e 2007
Considerando as mesmas configurações, porém com visualização horizontal, os valores
encontrados são os seguintes:
Assunto: Remetente: 90 a 95 caracteres para todas as versões
29 a 32 caracteres para o Outlook 2003
24 a 26 caracteres para o Outlook Express
23 a 27 caracteres para o Outlook 2007
Devido às diferenças entre as versões do Outlook e outros clientes de e-mail, recomenda-se
a utilização de 20 a 25 caracteres para o assunto e remetente.
E s pa ç o d i s p o n í ve l pa r a o te m p l ate
O Outlook permite a visualização em um painel de leitura que possui total
flexibilidade de redimensionamento e em janelas que podem ser aumentadas de acordo
com o tamanho da tela do destinatário. Mesmo sem medida fixa e com a possibilidade
de customização, é recomendada a utilização de uma largura máxima de 600 pixels,
que possibilita a visualização correta em webmails também.
RESOLUÇÃO de tela
largura máxima
Express
2003
2007
800 x 600 px
560 px
560 px
560 px
1024 x 768 px
770 px
770 px
770 px
1280 x 1024 px
1000 px
1000 px
1000 px
32
Os relatórios da All In Mail sobre quem clicou em cada link da sua mensagem dizem muito sobre
fatos
Cliente de E-mail: Thunderbird e Terra
o seu público. Ao invéz de somente consultar a quantidade de cliques de suas campanhas, utilize
esta informação para enviar novas mensagens, mais objetivas, com base no interesse de cada um.
Introdução
Neste capítulo serão tratados os clientes de e-mail: Terra versão Clássica, Terra versão
com Painéis e Mozilla Thunderbird 2. A análise a seguir tem como objetivo mostrar
o excelente suporte a CSS e aos webstandards na renderização em HMTL no caso do
Thunderbird e apresentar as evoluções que fazem da versão mais recente do webmail
Terra, muito superior à antiga.
Com uma plataforma renovada, que apresenta um painel de visualização semelhante ao
Outlook, será possível conferir nas próximas páginas o que mudou e o que ainda é um
problema para o webmail do Terra.
Confira a seguir a comparação entre esses clientes de e-mail e suas peculiaridades.
S u p o r te a C SS
Thunderbird
O thunderbird renderiza de maneira semelhante a um browser, de forma que a utilização
de estilos CSS inline ou incorporado (dentro da HEAD) são aceitos perfeitamente.
Porém, devemos ficar atentos à definição de estilos na formatação, uma vez que ele não
suporta inserção no body, mas sim na Tag que tiver textos (p, a, table). Além disso, o
tamanho da fonte inserida no body não é a aplicada aos textos do template.
Terra
• O Terra Mail suporta CSS inline com algumas diferenças para cada versão:
Versão com Painéis: suporta as propriedades de posicionamento de CSS como
z-index, position, top, left, dentre outros.
Versão Clássica: Além de não suportar as propriedades de posicionamento,
não aceita também margin, list-style-image, font-stretch e white-space.
• Ambas não aceitam o uso da tag body para inserir as propriedades do CSS e
caso seja necessário formatar com estilo CSS, será preciso atribuí-lo às tags onde
os objetos estão inseridos.
S u p o r te a o s at r i b u to s d e ta g s H M T L
Thunderbird
Suporta a todas as tags HTML, incluindo aquelas que normalmente não são suportadas
pelos demais clientes de e-mail, como bgcolor, background (para imagens), cellpadding
e cellspacing.
33
Pelo motivo da
All In Mail ter servidores limpos, fora de blacklists internacionais,
fatos
os
seus
e-mails
tem
muito
mais
chance
de
entrega
na
caixa
de
entrada
em webmails como Hotmail, Yahoo e Gmail. Não caia no risco do soft-optin.
Na ausência de uma formatação de texto no template, serão aplicadas as definições
padrão do Thunderbird:
• Fonte com serifa: Times New Roman
• Fonte sem serifa: Arial
• Fonte mono espaçada: Courier New
• Cor da fonte: Preto
• Cor do fundo: Branco
• Tamanho da fonte: 13 px
Terra
O Terra Mail demonstrou algumas falhas na renderização de textos formatados com tag
<em> e <strong>, que são utilizadas para produzir o efeito de itálico e negrito. No caso
da versão clássica o texto adquire formatação comum definida no código, porém sem
os efeitos desejados. Na versão mais recente, quando visualizada nos painéis de leitura,
os textos em <strong> são exibidos em negrito em fonte Verdana tamanho 11 px, na cor
preta. Isso pode causar dificultar a leitura nos casos em que o fundo definido na
codificação também seja preto, por exemplo.
Assim como no Outlook, o usuário da versão com painéis do Terra não costuma abrir
mensagens em outras janelas e acabam visualizando-as direto nos painéis. Como o erro
com as tagas <em> e <strong> ocorrem neste local, a sugestão é utilizar <b> e <i> para
produzir os mesmos efeitos desejados, negrito e itálico.
Em relação a versão clássica do Terra Mail, pode-se perceber a ausência de
espaçamento entre parágrafos <p>, de forma que os textos sejam exibidos com
espaçamento simples<br>. Para corrigir esta falha sugerimos a utilização de padding
para determinar a tag <p>. Optando por esta forma, em vez de margin, garantimos a
visualização correta na maioria dos clientes de e-mail analisados.
Thunderbird
O Thunderbird, assim como a maioria dos clientes de e-mail analisados, permite a
visualização de imagens somente quando o remetente faz parte da lista de contatos do
usuário.
Se a imagem definida no template apresentar quebras, ela será substituída pelo texto
alternativo e o usuário não irá perceber a sua existência.
Terra
Na versão mais recente do Terra as imagens não são bloqueadas, inclusive quando
recebidas de remetentes desconhecidos. Porém, no caso de imagens quebradas no
template, como medida de segurança o texto alternativo irá aparecer no lugar dela.
34
Separe as pessoas que estão abrindo e clicando suas mensagens com mais freqüência. Estes
fatos
são os seus clientes mais ativos, os que se preocupam mais com o que você está enviando e
que realmente optam por se envolver com suas mensagens e, por extensão, a sua empresa.
Thunderbird
Este cliente de e-mail apresenta bons resultados, com algumas ressalvas. Utilizando
o método get não há qualquer problema com a visualização e com o envio de dados.
Porém o formulário que utiliza o método post apresentou falhas em que a mensagem
aparentemente é enviada com sucesso, mas o formulário chega em branco ao remetente.
Para garantir que o envio de dados aconteça corretamente foi criado um formulário que
exige a confirmação dos dados preenchidos, como mostra a imagem a seguir:
Campos a serem preenchidos
Mensagem de confirmação dos dados preenchidos.
O que acontece, diferentemente do esperado, é que a pagina de destino não é a
mesma que confirma os dados, de forma que o Thunderbird novamente direciona ao
destinatário o formulário em branco. Testando outros clientes de e-mail e utilizando
esta mesma técnica, verificamos que somente o Thunderbird impede o envio de dados,
o que nos leva a conclusão de que ele apenas executa o action.
Terra
Versão clássica: suporta apenas formulário do método post .
Versão com painéis: suporta ambos os métodos, porém os atributos de largura e altura
devem ser definidos para que o template não sofra alterações em seu visual.
Vídeos
Os dois clientes de e-mail analisados nesta edição não suportam vídeos inseridos no
corpo da mensagem. No caso do Terra, o código HTML passa por uma análise que retira
o código <object> inserido para o vídeo.
35
Não compre banco de dados, mas forme o seu próprio, através de ações promocionais com
fatos
clientes, cadastramento online e outras soluções simples. Muitas empresas apostam no volume,
mandam milhares de emails para garantir venda e acabam excluídas pelos próprios provedores.
Animação
Além de suportarem corretamente imagens em GIF inseridas na mensagem, ambos
mantém as dimensões originais da imagem.
Por outro lado, objetos SWF são bloqueados, independentemente da forma como foram
inseridos, por meio de javascript ou da tag <object>.
Pa i n e l d e v i s ua l i z a ç ã o
Thunderbird
O Thunderbird oferece três opções de painel de visualização: clássico, largo ou vertical.
Para liberar a visualização em painéis e escolher a forma desejada, o usuário deve acessar
o “Menu” de opções do cliente de e-mail. Além disso, todas as formas de visualização
ainda podem ser maximizadas, de acordo com as necessidades de cada usuário.
Terra
Esta opção de visualização só existe na versão com painéis do Terra Mail.
Thunderbird
Assim como o painel de visualização se pode ser ajustado de acordo com a necessidade
do usuário, o espaço para assunto e remetente também pode ser alterado.
Visualização com painel clássico ou largo:
Assunto: de 95 a 96 caracteres
Remetente: de 41 a 43 caracteres
Obs. Ao exceder o limite, o texto é interrompido por reticências.
Visualização com painel vertical:
Neste caso o assunto é omitido, devido à posição do painel.
Remetente: até 35 caracteres, com interrupção de reticências,
caso este numero seja excedido.
36
Oferecer conteúdo de interesse do cliente e só enviar mensagem para usuários cadastrados
fatos
é o segredo para fidelizar clientes. Quem compra banco de dados e manda mensagens
indiscriminadamente se classifica como spam e vai direto para o lixo eletrônico.
Terra
A versão clássica não possui limite de espaço para exibição de template, uma vez que
ele se ajusta à resolução de tela de cada usuário. Porém a versão mais recente
apresenta um limite de 770 px quando a mensagem é visualizada em uma nova janela.
Sendo assim e , considerando as restrições ao tamanho de diversos clientes de e-mail,
a recomendação é utilizar uma largura máxima de 600 px, para garantir uma visualização
correta do template pela maioria dos usuários.
Versão Clássica
Assunto: máximo de 25 caracteres
Remetente: máximo de 19 caracteres
Versão com painéis
Assunto: máximo de 25 caracteres
Remetente: máximo de 20 caracteres
37
De acordo com a SenderBase.org, organização da Cisco para monitoramento do tráfego global
fatos
O que concluimos de tudo isso?
de e-mails, o e-mail é utilizado para comunicação pessoal com muito mais regularidade
do que as redes sociais e o trafego anual de emails passa dos 2 trilhões de mensagens.
Neste documento foram analisadas as características e curiosidades dos clientes de
e-mail mais utilizados. Em diversos capítulos, os seguintes e-mails foram abordados:
Webmails
Gmail
IG
iBest
Yahoo!
Yahoo! Mail Beta
BOL
UOL
Windows Live
Hotmail
Terra
C l i e n te s d e s k to p
Thunderbird
Outlook Express
Windows Mail
Windows Live Mail
Apple Mail
Os seguintes tópicos foram estudados, de forma a analisar minuciosamente cada
particularidade destes clientes de e-mail.
S u p o r te a C SS
• A forma de utilização de CSS mais aceita pelos clientes de e-mail analisados é a inline.
• Somente os clientes de e-mail desktop, como Thunderbird, Outlook e Windows Mail,
suportam o CSS em folhas de estilo
• Deve-se evitar formatação em tableless e utilizar principalmente formatação em texto
no CSS
• As propriedades que mais apresentaram restrições nos aplicativos de e-mail
analisados foram list_style-image, background-image e margin.
S u p o r te a H T ML
• A grande maioria das tags é suportada pelos clientes de e-mail
• A versão clássica do Terra Mail é a única que não suporta tag strong, em e Del.
Além disso, o Outlook 2007 não suporta tags de componentes de formulário.
• Alguns possuem restrições ao uso de tags Body e img.
• Quase nenhum dos clientes analisados possui suporte a tag ol em listas ordenadas
• Os e-mails BOL, UOL, Hotmail e Outlook 2007 não possuem suporte a formulários.
Os três primeiros impedem o envio de informações para ambientes externos e o último
não exibe os campos do formulário, impossibilitando seu preenchimento.
38
Todos nós queremos construir nossas bases e enviar nossas mensagens para o máximo de
fatos
pessoas possível, e também assegurar que as pessoas em nossa lista se importem com o que estamos
enviando. Mas o crescimento de usuários na base nunca é igual ao crescimento do engajamento.
• Nenhum destes aceita javascript , comprometendo a validação do preenchimento do
formulário.
• O remetente tem grandes chances de receber de volta formulários não preenchidos
ou com erros, devido a essas restrições.
S u p o r te a v í d e o s e a n i m a ç õ e s
• A nova interface do UOL e BOL suportam mensagens com vídeos e animações SWF.
• O Gmail suporta vídeos de Youtube dentro das mensagens e pode ser visto como anexo, caso o usuário ative a preferência de exibição ao acessar a página Labs.
• Outros clientes de e-mail não suportam vídeos ou animações, apresentando em alguns casos aceitação para arquivos em GIF animado.
Todos os clientes de e-mail bloqueiam a exibição de imagens quando o remetente é
desconhecido, com exceção dos webmails Terra, UOL, BOL e Yahoo!. A partir do
momento em que o remetente é adicionado aos contatos do usuário, todos eles
exibem as imagens.
E x i b i ç ã o d o a s s u n to e r e m ete n te
Em quase todos os clientes de e-mail a utilização de diferentes resoluções de tela altera
o limite de caracteres para assunto e remetente. Para evitar problemas, a sugestão é
utilizar no máximo 23 caracteres para cada um.
E s pa ç o d i s p o n í ve l pa r a e x i b i ç ã o d o te m p l ate
Como a resolução de tela utilizada por cada usuário varia muito, é recomendada a
utilização de templates de até 600 pixels. Assim é possível evitar a variação de espaço
disponível para o template e contribuir para uma leitura correta.
39
A análise do comportamento do usuário de internet está evoluindo a passos largos. Os
fatos
Apêndice 1: Guia de Suporte CSS em E-mail
provedores consideram o comportamento do usuário na hora de ler seus emails: se ele
abre, se clica na mensagem e, com isso, priorizam na caixa postal o que é mais relevante.
Neste apêndice, você encontrará uma referência com as principais tags e principais
clientes de e-mail em desktop, web e mobile. A atualização é de 10 de março de 2010.
DESKTOP
O elemento STYLE
Outlook ‘07
Outlook ‘03
Windows Mail
Apple Mail
Notes 6 e 7
Lotus Notes 8,5
Thunderbird 2
<style> na tag <head>
S
S
S
S
N
S
S
<style> na tag <body>
S
S
S
S
N
S
S
Outlook ‘07
Outlook ‘03
Windows Mail
Apple Mail
Notes 6 e 7
Lotus Notes 8,5
Thunderbird 2
S
S
S
S
S
S
S
O elemento LINK
<link> na tag <head>
<link> na tag <body>
S
S
S
S
N
S
S
Outlook ‘07
Outlook ‘03
Windows Mail
Apple Mail
Notes 6 e 7
Lotus Notes 8,5
Thunderbird 2
e
S
S
S
S
N
S
S
*
N
S
S
S
N
S
S
e.className
S
S
S
S
N
S
S
e#id
S
S
S
S
N
S
S
e:link
S
S
S
S
N
S
S
e:active, e:hover
N
S
S
S
N
S
S
e:first-line
N
S
S
S
N
S
S
e:first-letter
N
S
S
S
N
S
S
Seletores de CSS
e>f
N
N
N
S
N
N
S
e:focus
N
N
N
S
N
N
S
e+f
N
N
N
S
N
N
S
e[foo]
N
N
N
S
N
N
S
Textos e Fontes
Outlook ‘07
Outlook ‘03
Windows Mail
Apple Mail
Notes 6 e 7
Lotus Notes 8,5
Thunderbird 2
direction
S
S
S
S
N
S
S
font
N
S
S
S
N
S
S
font-family
S
S
S
S
S
S
S
font-style
S
S
S
S
S
S
S
font-variant
S
S
S
S
N
S
S
font-size
S
S
S
S
S
S
S
font-weight
S
S
S
S
S
S
S
letter-spacing
S
S
S
S
N
S
S
line-height
S
S
S
S
N
S
S
text-align
S
S
S
S
S
S
S
text-decoration
S
S
S
S
S
S
S
text-indent
S
S
S
S
N
S
S
text-transform
S
S
S
S
N
S
S
white-space
S
N
N
S
N
N
S
word-spacing
N
S
S
S
N
S
S
vertical-align
N
S
S
S
N
S
S
40
Uma estratégia muito praticada em países onde o e-mail marketing está mais evoluído, é o envio
fatos
de descontos e promoções mais agressivos para o grupo de usuário com baixo engajamento.
Contudo, a freqüência de e-mails enviados para este grupo de usuários precisa ser menor.
DESKTOP
Cor e Fundo (background)
Outlook ‘07
Outlook ‘03
Windows Mail
Apple Mail
Notes 6 e 7
Lotus Notes 8,5
Thunderbird 2
color
S
S
S
S
S
S
S
background
P
S
S
S
N
N
S
background-color
S
S
S
S
N
S
S
background-image
N
S
S
S
N
N
S
background-position
N
S
S
S
N
N
S
background-repeat
N
S
S
S
N
N
S
Modelos de BOX
Outlook ‘07
Outlook ‘03
Windows Mail
Apple Mail
Notes 6 e 7
Lotus Notes 8,5
Thunderbird 2
border
S
S
S
S
N
S
S
height
N
S
S
S
N
S
S
margin
S
S
S
S
N
S
S
padding
P
S
S
S
N
S
S
width
N
S
S
S
N
S
S
Posicionamento e Display
Outlook ‘07
Outlook ‘03
Windows Mail
Apple Mail
Notes 6 e 7
Lotus Notes 8,5
Thunderbird 2
bottom
N
S
S
S
N
S
S
clear
N
S
S
S
N
S
S
clip
N
S
S
S
N
N
S
cursor
N
S
S
S
N
S
S
display
N
S
S
S
S
S
S
float
N
S
S
S
N
S
S
left
N
S
S
S
N
S
S
opacity
N
N
N
S
N
N
S
overflow
N
S
S
S
N
N
S
position
N
S
S
S
N
S
S
right
N
S
S
S
N
S
S
top
N
S
S
S
N
S
S
visibility
N
S
S
S
N
N
S
z-index
Listas
S
S
S
S
N
S
S
Outlook ‘07
Outlook ‘03
Windows Mail
Apple Mail
Notes 6 e 7
Lotus Notes 8,5
Thunderbird 2
list-style-image
N
S
S
S
N
N
S
list-style-position
N
S
S
S
N
N
S
list-style-type
Tabelas (tables)
N
S
S
S
S
S
S
Outlook ‘07
Outlook ‘03
Windows Mail
Apple Mail
Notes 6 e 7
Lotus Notes 8,5
Thunderbird 2
border-collapse
S
S
S
S
S
S
S
border-spacing
N
N
N
S
N
N
S
caption-side
N
N
N
N
N
N
S
empty-cells
N
N
N
S
N
N
S
table-layout
S
S
S
S
N
S
S
S
Suporte total
N
Não suporta
P
Parcial ou Suporte com Bugpartial or buggy support
41
Mesmo com a melhora da banda larga no país, tente manter o e-mail bem leve: o HTML deve
fatos
ter no máximo 30kb (preferencialmente 20kb), as imagens no máximo 50kb. E por mais que
a altura não costume ser um limitador, deixe-a o menor possível para evitar muita rolagem.
WEBMAILS
O elemento STYLE
O elemento LINK
Yahoo! Mail
S
S
Yahoo! Mail
Yahoo! Classic
S
S
Yahoo! Classic
Hotmail
Gmail
S
S
Hotmail
MySpace
N
N
Gmail
N
N
MySpace
MobileMe
S
N
MobileMe
S
S
S
N
N
S
S
S
S
N
N
N
Seletores de CSS
Yahoo! Mail
Yahoo! Classic
Hotmail
Gmail
MySpace
MobileMe
e
S
S
S
N
N
S
*
S
N
S
N
N
N
e.className
S
S
S
N
N
S
e#id
S
S
N
N
N
N
e:link
S
S
S
N
N
N
e:active, e:hover
S
S
S
N
N
N
e:first-line
N
S
N
N
N
N
e:first-letter
N
S
N
N
N
N
e>f
S
S
N
N
N
N
e:focus
S
S
N
N
N
N
e+f
N
N
N
N
N
N
e[foo]
S
S
N
N
N
N
Textos e Fontes
Yahoo! Mail
Yahoo! Classic
Hotmail
Gmail
MySpace
MobileMe
direction
S
S
S
N
S
S
font
S
S
S
S
S
S
font-family
S
S
S
S
S
S
font-style
S
S
S
S
S
S
font-variant
S
S
S
S
S
S
font-size
S
S
S
S
S
S
font-weight
S
S
S
S
S
S
letter-spacing
S
S
S
S
S
S
line-height
S
S
S
S
N
S
text-align
S
S
S
S
S
S
text-decoration
S
S
S
S
S
S
text-indent
S
S
S
S
S
S
text-transform
S
S
S
S
S
S
white-space
S
S
S
S
S
S
word-spacing
S
S
S
S
S
S
vertical-align
S
Yahoo! Mail
S
Yahoo! Classic
S
Hotmail
S
Gmail
S
MySpace
S
MobileMe
color
S
S
S
S
S
S
background
S
S
N
P
S
S
background-color
S
S
S
S
S
S
background-image
S
S
N
N
S
S
background-position
S
S
N
N
S
S
background-repeat
S
S
N
N
S
S
42
Para
uma
boa
campanha
de
fatos
que
privilegiem,
tanto
do
ponto
além
de
da
vista
e-mail
marketing,
personalização,
do
conteúdo
uma
deve-se
apostar
experiência
oferecido,
em
agradável
promoção,
quanto
estratégias
ao
usuário,
do
design.
WEBMAILS
Modelos de BOX
Yahoo! Mail
Yahoo! Classic
Hotmail
Gmail
MySpace
MobileMe
border
S
S
S
S
S
S
height
S
S
S
S
N
S
margin
S
S
N
S
S
S
padding
S
S
S
S
S
S
width
bottom
S
S
Yahoo! Mail
N
S
Yahoo! Classic
S
Hotmail
N
Gmail
N
N
MySpace
N
S
MobileMe
N
S
clear
S
S
S
S
S
S
clip
N
N
N
N
N
N
cursor
S
S
S
N
S
S
display
S
S
S
S
S
S
float
S
S
S
S
S
S
left
N
N
N
N
N
S
opacity
N
N
N
N
S
S
overflow
S
S
S
S
N
S
position
N
N
N
N
N
S
right
N
N
N
N
N
S
top
N
N
N
N
N
S
visibility
S
S
S
N
S
S
z-index
Listas
N
N
Yahoo! Mail
N
Yahoo! Classic
N
Hotmail
Gmail
N
MySpace
S
MobileMe
list-style-image
S
S
N
N
S
S
list-style-position
S
S
S
S
S
S
list-style-type
Tabelas (tables)
S
S
Yahoo! Mail
S
Yahoo! Classic
S
Hotmail
Gmail
S
MySpace
S
MobileMe
border-collapse
S
N
S
S
S
S
border-spacing
S
S
N
S
S
S
caption-side
N
N
S
S
N
S
empty-cells
S
S
S
S
S
S
table-layout
S
S
S
S
N
S
S
Suporte total
N
Não suporta
P
43
A classe C é a que mais cresce em renda e participação nos números da internet brasileira
fatos
(38%) e ainda tem muito para crescer até atingir a maturidade de classes mais elevadas como
A e B. Nunca se esqueça de incluí-los tanto na estratégia, quanto no conteúdo do seu e-mail.
MOBILE
O elemento STYLE
iPhone 3.0
Android Email
Android Gmail
Palm Pre
(WebOS)
Palm Treo
(Win Mobile 6.5)
Blackberry
S
S
N
P
S
N
S
S
N
P
S
N
O elemento LINK
iPhone 3.0
Android Email
Android Gmail
Palm Pre
(WebOS)
Palm Treo
(Win Mobile 6.5)
Blackberry
S
S
N
P
S
N
S
S
N
P
S
N
Seletores de CSS
iPhone 3.0
Android Email
Android Gmail
Palm Pre
(WebOS)
Palm Treo
(Win Mobile 6.5)
Blackberry
e
S
S
N
N
N
N
*
S
S
N
N
N
N
e.className
S
S
N
S
S
S
e#id
S
S
N
S
S
S
e:link
S
S
N
S
S
N
e:active, e:hover
S
S
N
S
S
N
e:first-line
S
S
N
S
N
N
e:first-letter
S
S
N
S
N
N
e>f
N
S
N
N
N
N
e:focus
S
S
N
S
N
N
e+f
S
S
N
S
S
N
e[foo]
Textos e Fontes
S
iPhone 3.0
S
Android Email
N
Android Gmail
S
Palm Pre
(WebOS)
S
Palm Treo
(Win Mobile 6.5)
N
Blackberry
direction
S
S
N
S
S
S
font
S
S
S
P
P
N
font-family
S
S
S
S
S
N
font-style
S
S
S
S
S
S
font-variant
S
S
S
S
S
N
font-size
S
S
S
S
S
N
font-weight
S
S
S
S
S
S
letter-spacing
S
S
S
S
N
N
line-height
S
S
S
S
S
N
text-align
S
S
S
S
S
S
text-decoration
S
S
S
S
S
S
text-indent
S
S
S
S
S
N
text-transform
S
S
S
S
S
S
white-space
S
S
S
S
N
N
word-spacing
S
S
S
S
N
N
vertical-align
S
N
S
S
S
N
44
A internet se tornou o terceiro veículo de maior alcance no Brasil, atrás apenas de rádio
fatos
e TV. Só para ter uma idéia do crescimento, no ano passado, a All In Mail disparou quase
4 bilhoes e meio de e-mails, representando um aumento de mais de 250% em relação a 2009
MOBILE
iPhone 3.0
Android Email
Android Gmail
Palm Pre
(WebOS)
Palm Treo
(Win Mobile 6.5)
Blackberry
color
S
S
S
S
S
S
background
S
N
N
S
S
S
background-color
S
S
S
S
S
S
background-image
S
N
N
S
S
S
background-position
S
S
S
S
S
S
background-repeat
Modelos de BOX
S
N
iPhone 3.0
N
Android Email
S
Android Gmail
Palm Pre
(WebOS)
border
S
S
S
S
height
S
S
S
margin
S
S
S
padding
S
S
width
S
S
iPhone 3.0
Android Email
bottom
S
clear
S
S
clip
S
N
cursor
N
N
display
S
S
float
S
left
S
opacity
overflow
position
right
S
Blackberry
S
S
S
S
N
S
P
N
S
S
S
S
S
S
S
S
Android Gmail
Palm Pre
(WebOS)
Blackberry
N
N
S
S
N
S
N
N
N
S
N
S
N
N
S
S
S
N
N
N
S
S
N
S
N
S
N
N
S
N
N
S
N
N
N
N
N
S
N
N
S
S
N
S
N
N
S
S
N
S
N
N
top
S
S
N
S
N
N
visibility
S
S
N
S
S
N
Listas
S
N
Palm Treo
(Win Mobile 6.5)
S
z-index
S
S
Palm Treo
(Win Mobile 6.5)
S
iPhone 3.0
N
Android Email
S
Android Gmail
Palm Pre
(WebOS)
N
Palm Treo
(Win Mobile 6.5)
N
Blackberry
list-style-image
S
N
S
S
S
S
list-style-position
S
S
S
S
S
N
list-style-type
Tabelas (tables)
border-collapse
S
N
iPhone 3.0
N
Android Email
S
S
Android Gmail
S
Palm Pre
(WebOS)
S
S
Palm Treo
(Win Mobile 6.5)
S
S
N
Blackberry
S
border-spacing
S
S
S
S
N
S
caption-side
N
N
N
N
N
N
empty-cells
S
S
S
S
N
N
table-layout
S
S
S
S
S
S
S
Suporte total
N
Não suporta
P
45
Rua Funchal, 513 • CJ 92 - Vila Olímpia
São Paulo / SP 04551-060
Telefone: 55 11 3627-3677
www.allinmail.com.br

fatos - Allin

Transcrição

Documentos relacionados

3/6/2014 (26 não lidos) - itch.armonia - Yahoo! Mail https://br

Outlook Express 5 Mac OS

Page 1 of 1 (2 não lidos) - fabidesouza2002

Configuração do webmail no thunderbird

projeto - Young Lions

Cabo Transferência

tutorial: usuários hotmail (outlook) - CRC-AM

Trabalhando com o Webmail

Configuração do cliente Outlook Express

Backup de E-mails Utilizando o Outlook Express