série manuais manual para montagem de e-mail …para entender o motivo das diferenças entre...

Manual para montagem dee-mail marketing

Série Manuais

introduçãoComo seus clientes recebem seus e-mails?

webMailGmail

webMailYahoo! Mail

webMailuol e bol

Cliente de eMailwindows Mail

Cliente de eMailMicrosoft Outlook

Cliente de eMailthunderbird e terra

ConCluSãoO que tiramos de tudo isso?

aPêndiCe 1Guia de Suporte CSS em e-mail

36

13162125333840

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

www.allinmail.com.br

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

• Telefone: 11 3627-3677 • E-mail: [email protected](de segunda a sexta, das 9h às 19h)

fatos

3

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.

W E b m a i l s

C l i E n T Es d Es k To p

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.

Como seus clientes recebem seus e-mails?

Gmail iGibestYahoo!

Yahoo! Mail betaboluolwindows live

Hotmailterra

thunderbirdMicrosoft Outlook 2003Microsoft Outlook 2007

outlook expresswindows Mailwindows live Mail

apple Mail

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

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.

fatos

4

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.

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).

Como seus clientes veêm seus e-mails?

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.

rEndErização Em sizE = 1 rEndErização Em fonT-sizE: 9px

arial

VErdana

TaHoma

TimEs

GEorGia

Todos nós queremos construir nossas bases e enviar nossas mensagens para o máximo de 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.

fatos

5

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.

Como seus clientes veêm seus e-mails?

Separe as pessoas que estão abrindo e clicando suas mensagens com mais freqüência. Estes 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, com a sua empresa.

fatos

6

webmail: Gmail

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

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.

i n T ro d u ç ã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 s s (H T m l)

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:

fatos

7

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>

l i n ks

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.

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 rT E ao s aT r i b u To s d E TaG s H T m l

• 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.

3. Arquivo original do e-mail2. E-mail visualizado no Firefox1. E-mail visualizado no Internet Explorer

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

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.

fatos

8

• 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 lo q u E i o d E i m aG E 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 firefoxQuando 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.

Visualização do template no internet ExplorerPara 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

1. Gmail versão antiga

2. Gmail versão atual

2. Gmail versão atual

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

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.

fatos

9

a n i m aç ão

flashPara 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 animadoTodos 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 í d Eo s

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 novaA 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.

Co d i f i C aç ão d E C a r aC T E r Es

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

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

mundo, nesse universo, tem sucesso apenas aquela mensagem que chega para a pessoa

interessada em determinado produto ou serviço, enviada de maneira eficiente.

fatos

10

pa i n E l d E p r é-V i s ua l i zaç ã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 men-sagem 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 E T E n T E

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,

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

é 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.

fatos

11

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.

Es paço d i s p o n í V E l pa r a o T E m p l aT E

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:

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

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.

fatos

12



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

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.

fatos

13

i n T ro d u ç ã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 digitalO 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 s s

Yahoo! mail ClassicA 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.

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

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.

webmail: Yahoo! Mail

fatos

14

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 proprie-dades position, top, bottom, left ou z-index não são aceitas nesta versão.

Yahoo! mailPara 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 Classiceste é 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! maila 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.

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

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.

*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.

fatos

15

fo r m u l á r i o s

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 í d Eo s E f l a s H

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 zaç ão, a s s u n To E r E m E T E n T E

o painel de leitura do Yahoo! mail Classic e do Yahoo! mail possibilitam somente a visualização das mensagens na forma horizontal.

Yahoo! mail Classicassunto: limite de 54 caracteresremetente: limite de 33 caracteres

Yahoo! mailAssunto: limite de 37 caracteresRemetente: limite de 23 caracteres

Para ambos, se o limite de caracteres for excedido, a frase é interrompida automaticamente.

Es paço d i s p o n í V E l pa r a T E m p l aT E

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.

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

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.

recomenda-se a utilização de 550px como largura máxima, para visualizar o template sem problemas.

fatos

16

i n T ro d u ç ã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 s s

uol - Interface antigaA 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 interfaceTanto 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.

Uma boa dica sobre l inks é usar urls pequenas e intuitivas. Prefira sempre:

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

N ã o e s q u e ça d e s e m p re i n c l u i r ta rge t = “ _ b l a n k ” e m to d o s o s s e u s l i n ks .

webmail: uol e bol

fatos

17

s u p o rT E a fo r m u l á r i o s

uol - interface antigaNo 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.

bol/uol - nova interfaceNa 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.


uol - interface antigadevido 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>.

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

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.

fatos

18

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.

bol/uol - nova interfaceesta 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 rT E a a n i m aç ão E V í d Eo s

uol - interface antigaSuporta 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>.

bol/uol - nova interfaceDa 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.

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

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.

fatos

19


uol - interface antigana 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.

bol/uol - nova interfaceA 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.

uol - interface antigaAssunto: limite de até 32 caracteres para mensagens não lidasRemetente: limite de até 21 caracteresObservação: Na contagem de caracteres o espaço é incluído.

bol/uol - nova interfaceAssunto: limite de 60 caracteres para mensagens não lidasremetente: Caracteres ilimitadosObservação: Na contagem de caracteres o espaço é incluído.

Es paç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

O layout de ambos se adapta à resolução da tela, aumentando ou diminuindo de acordo com o tamanho disponível.

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

(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.

fatos

20

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.

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

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.

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.

fatos

21

i n T ro d u ç ã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 s s

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.

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

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

bem trabalhado pode corresponder a mais de 40% deste faturamento.

Cliente de e-mail: windows Mail

fatos

22


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á.

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.

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

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.

deve-se ressaltar que o template poderá sofrer quebras caso a caixa com o texto alternativo extrapole a sua largura original.

fatos

23


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 í d Eo s

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.

a n i m aç ão E m f l a s H

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 zaç ã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.

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

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.

fatos

24

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 horizontalRemetente: limite de 15 caracteres, com interrupção de reticências no 16º caractereAssunto: 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.

Es paço d i s p o n í V E l pa r a T E m p l aT E

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.

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

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.

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

fatos

25

i n T ro d u ç ã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 s s

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>).

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

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.

Cliente de e-mail: windows outlook

fatos

26

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ãosuporta 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.

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

l i n ks

Mesmo quando as imagens que possuem links são bloqueadas, nas três versões de Outlook os botões funcionam adequadamente.

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

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.

lisTa dE propriEdadEs Css não suporTadas pElo ouTlook 2007

activeazimuthbackground-attachmentbackground-imagebackground-positionbackground-repeatborder-spacingbottomcaption-sideclearclipcontentcounter-incrementcounter-reset

cue-beforecue-aftercuecursordisplayelevationempty-cellsfocusfirst-childfirst-linefirst-letterfloatfont-size-adjustfont-stretch

heighthoverleftline-breaklist-style-imagelist-stule-positionmarker-offsetmax-heightmax-widthmin-heightmin-widthorphansoutlineoutline-color

outline-styleoutline-widthoverflowoverflow-xoverflow-ypause-beforepause-afterpausepitchpitch-rangeplay-duringpositionquotesright

richnesstext-transformtopunicode-bidivisibilityvisitedvoice-familyvolumewidowsword-spacingz-indexwidth

fatos

27

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:

* 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.

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

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.

lisTa dE aTribuTos HTml não suporTados pElo ouTlook 2007

accept-charsetacceptaccesskeyadressarchivebackground*buttoncheckedclassidcodecodecore

codetypecompactdatadeclaredeferdisabledenctypeinputlongdescmarginheightmarginwidth

media**methodmultiplenoresizeobjectolonbluronchangeonclickondbclickonfocus

onkeydownonkeypressonkeyuponloadonmousedownonmousemoveonmouseoutonmouseoveronmouseuponresetonselect

onsubmitonunloadoptionoptgroupsreadonlyscrollingselectedstandbytabindextitlevaluetype

fatos

28

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.

outlook 2003A 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.

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

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.

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.

fatos

29

outlook ExpressNesta 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 2007Embora 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.


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.

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.

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

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.

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.

fatos

30

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 2003No 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.

a n i m aç ão E m f l a s H

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 2003Aviso de bloqueio é enviado. Após confirmação, o espaço destinado ao arquivo aparece em branco, sem qualquer indicação de sua presença.

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

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.

fatos

31

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 2007A imagem é substituída por um X vermelho que indica a presença de um objeto bloqueado.

G i f 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 í d Eo s

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.

Co d i f i C aç ão d E C a r aC T E r Es

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


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.

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

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.

fatos

32


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õesRemetente: 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: 90 a 95 caracteres para todas as versõesRemetente: 29 a 32 caracteres para o Outlook 2003 24 a 26 caracteres para o Outlook Express 23 a 27 caracteres para o Outlook 2007

Es paço d i s p o n í V E l pa r a o T E m p l aT E

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.

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

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.

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.

ExprEss 2003 2007

rEsolução dE TEla larGura máxima

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

fatos

33

Os relatórios da All In Mail sobre quem clicou em cada link da sua mensagem dizem muito sobre

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.

i n T ro d u ç ã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 rT E a C s s

ThunderbirdO thunderbird renderiza de maneira semelhante a um browser, de forma que a utilizaçãode 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 rT E ao s aT r i b u To s d E TaG s H m T l

ThunderbirdSuporta 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.

Cliente de e-mail: thunderbird e terra

fatos

34

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

TerraO 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.


Thunderbirdo 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.

Terrana 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.

Pelo motivo da All In Mail ter servidores limpos, fora de blacklists internacionais,

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.

fatos

35


ThunderbirdEste 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.

TerraVersã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 í d Eo s

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.

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

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.

fatos

36

a n i m aç ã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 zaç ão

ThunderbirdO 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.

TerraEsta opção de visualização só existe na versão com painéis do Terra Mail.


ThunderbirdAssim 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 caracteresremetente: 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.

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

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.

fatos

37

TerraA 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.

Versão ClássicaAssunto: máximo de 25 caracteresRemetente: máximo de 19 caracteres

Versão com painéisAssunto: máximo de 25 caracteresRemetente: máximo de 20 caracteres

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

é 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.

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.

fatos

38

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

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:

W E b m a i l s

C l i E n T Es d Es k To p

os seguintes tópicos foram estudados, de forma a analisar minuciosamente cada particularidade destes clientes de e-mail.

s u p o rT E a C s s

• 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 rT E a H T m l

• 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.

o que concluimos de tudo isso?

Gmail iGibestYahoo!

Yahoo! Mail betaboluolwindows live

Hotmailterra

thunderbirdMicrosoft Outlook 2003Microsoft Outlook 2007

outlook expresswindows Mailwindows live Mail

apple Mail

fatos

39

• 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 rT E a V í d Eo s E a n i m açõ Es

• 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 an-exo, 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 al-guns 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 E T E n T E

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.

Es paç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

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.

Todos nós queremos construir nossas bases e enviar nossas mensagens para o máximo de

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.

fatos

40

A análise do comportamento do usuário de internet está evoluindo a passos largos. Os

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.

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

o elemento LINK Outlook ‘07 Outlook ‘03 windows Mail apple Mail Notes 6 e 7 lotus notes 8,5 Thunderbird 2

<link> na tag <head> s s s s s s s

<link> na tag <body> s s s s n s s

seletores de CSS 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

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

apêndice 1: Guia de Suporte CSS em e-mailneste 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.

fatos

41

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

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 s s s s n s s

listas 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 n s s s s s s

Tabelas (tables) 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

fatos

42

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

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 Yahoo! Mail Yahoo! Classic Hotmail Gmail MySpace MobileMe

<style> na tag <head> s s s n n s

<style> na tag <body> s s s n n n

o elemento LINK Yahoo! Mail Yahoo! Classic Hotmail Gmail MySpace MobileMe

<link> na tag <head> s s s n n s

<link> na tag <body> 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 s s s s s

Cor e fundo (background) Yahoo! Mail Yahoo! Classic Hotmail Gmail MySpace 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

fatos

43

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

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.

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 s s s s n s

posicionamento e Display Yahoo! Mail Yahoo! Classic Hotmail Gmail MySpace MobileMe

bottom n n n n 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 n n n n n s

listas Yahoo! Mail Yahoo! Classic Hotmail Gmail MySpace MobileMe

list-style-image s s n n s s

list-style-position s s s s s s

list-style-type s s s s s s

Tabelas (tables) Yahoo! Mail Yahoo! Classic Hotmail Gmail MySpace 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


fatos

44

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

(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

<style> na tag <head> s s n p s n

<style> na tag <body> s s n p s n

o elemento LINK iPhone 3.0 android email android Gmail Palm Pre (WebOS)


Blackberry

<link> na tag <head> s s n p s n

<link> na tag <body> s s n p s n

seletores de CSS iPhone 3.0 android email android Gmail Palm Pre (WebOS)


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] s s n s s n

Textos e fontes iPhone 3.0 android email android Gmail Palm Pre (WebOS)


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

fatos

45

A internet se tornou o terceiro veículo de maior alcance no Brasil, atrás apenas de rádio

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

Cor e fundo (background) iPhone 3.0 android email android Gmail Palm Pre (WebOS)


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 s n n s s s

modelos de BOX iPhone 3.0 android email android Gmail Palm Pre (WebOS)


Blackberry

border s s s s s s

height s s s s s n

margin s s s s p n

padding s s s s s s

width s s s s s s

posicionamento e Display iPhone 3.0 android email android Gmail Palm Pre (WebOS)


Blackberry

bottom s s n s n n

clear s s s s n s

clip s n n n n s

cursor n n n s n n

display s s s s s n

float s n n s s n

left s s n s n n

opacity s n n s n n

overflow n n n s n n

position s s n s n n

right s s n s n n

top s s n s n n

visibility s s n s s n

z-index s s n s n n

listas iPhone 3.0 android email android Gmail Palm Pre (WebOS)


Blackberry

list-style-image s n s s s s

list-style-position s s s s s n

list-style-type s n n s s n

Tabelas (tables) iPhone 3.0 android email android Gmail Palm Pre (WebOS)


Blackberry

border-collapse s s s s s 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


Rua Funchal, 513 • CJ 92 - Vila Olímpia São Paulo / SP 04551-060Telefone: 55 11 3627-3677www.allinmail.com.br

série manuais manual para montagem de e-mail …para entender o motivo das diferenças entre...

Documents