Manual para produção de Templates para marketing

Transcrição

1 Manual para produção de Templates para marketing Manual de auxílio para elaboração de templates atendendo às boas práticas para marketing.

2 Introdução Independente do seu tipo de marketing ser uma newsletter, template de ofertas, cartão de agradecimento, boas vindas, dentre outros, é muito importante que esteja adequado às boas práticas. As regras a seguir irão auxiliá-lo(a) no desenvolvimento de templates adequados, de forma a melhorar o resultado final das ações de marketing efetuadas. 1. Layout e Conteúdo Como projetar o template de forma que consiga maior impacto visual e melhores resultados em suas ações de marketing: Personalização e Saudação: Aproxime-se dos contatos e chame-os pelo nome em suas mensagens! É possível ainda incrementar a saudação da mensagem com pronomes de tratamento, tipo Sr., Sra., Dr. etc. Para utilizar personalização, seu mailing deve possuir todas as informações necessárias e uma personalização por condicionais pode ser utilizada. Topo: A frase inserida no topo é a primeira informação recebida pelo destinatário na lista de s, onde além de ter o link para visualização em browser, pode ter uma frase de apresentação do conteúdo chamada pré-header. Topo com Versão Mobile: Disponibilize ao contato a opção de visualização em versão mobile além de visualização em browser. Muitos contatos hoje lêem o conteúdo via celular e a versão mobile facilita essa leitura. Painel de Visualização: A área pontilhada é a informação de primeiro impacto quando o contato visualiza a mensagem em seu . Atente-se para que chamadas de maior importância, sejam diagramadas nessa área. Call To action: Chame a atenção para as chamadas do template. Instigue o usuário ao clique, faça com que ele tenha interesse e curiosidade em saber o que há por trás daquele link do marketing. Links de Compartilhe: Disponibilize links e ícones para que o contato possa viralizar seu marketing nas redes sociais que são hoje armas potentes para sucesso nas campanhas de marketing e captação de contatos Rodapé Insira no rodapé do marketing, o optout, pois é uma atitude legal que respeita a privacidade do usuário, dando a opção dele ser excluído da base de s caso queira. Também é recomendável que você oriente o usuário a adicionar o seu na lista de contatos dele, assim ele passa a receber com sucesso as suas mensagens, não caindo no lixo eletrônico.

3 1.1. Formato adequado Para que a leitura não seja prejudicada por barras de rolagem horizontais, limites de janelas pop-up ou outros, utilize largura máxima de 600 pixels para os templates de marketing. Ao inserir textos no template, procure sempre determinar fontes de sistema como: Arial, Verdana, Times etc. Desta forma, evitamos erros na renderização e nos alinhamentos do layout. Esses textos, posteriormente, poderão ser reproduzidos em HTML e ajudará a manter um equilíbrio entre a quantidade de imagens. Esse equilíbrio é fundamental para evitar pontuação em testes antispam dos provedores, que avaliam a proporção entre cada tipo de conteúdo evitando possíveis bloqueios ou entrega na caixa de spam / lixo eletrônico. Utilize imagens em formato JPEG ou GIF e com 72DPI de resolução. Otimize a qualidade das imagens de forma que todas elas somem, juntas, até 100Kb. Para otimizar a entrega das mensagens, desenvolva o código HTMLcom até 30 kb de extensão. Evite utilizar imagens do tipo spacer, com dimensões de 1px na largura e/ou altura. Muitos spammers utilizam esta técnica para checar endereços de ativos e, por isso, é uma prática considerada como spam. Se precisar inserir um espaço vazio entre elementos, utilize a quebra de linha simples <br> ou uma célula vazia de tabela <td> em que você pode controlar a altura do espaçamento. Jamais faça envio de templates compostos por somente uma única imagem. Deve-se dividir a imagem do template em algumas parte através de fatiamento. Isso evitará que a mensagem seja redirecionada ao SPAM ou lixo eletrônico dos provedores Topo e Rodapé da mensagem Disponibilize sempre a opção de visualização em browser em sua peça, fora da caixa de e insira também um link para o mecanismo de descadastro permitindo que o contato efetue o cancelamento do cadastro para deixar de receber as mensagens se assim desejar. A Virtual Target já insere o texto com link para preview no topo e um texto com o link para opt-out no rodapé do template conforme abaixo: Topo Se você não estiver visualizando a mensagem corretamente, acesse esse link. Rodapé Para garantir que nossos comunicados cheguem em sua caixa de entrada, adicione o ( remetente) ao seu catálogo de endereços. A (nome da empresa) respeita a sua privacidade e é contra o spam na rede. Se você não deseja mais receber nossos s, cancele sua inscrição aqui.

4 É recomendável que sugira ao destinatário que insira o de remetente em sua lista de confiáveis. Isso auxiliará para que as mensagens sejam recebidas por ele na caixa de entrada, evitando o lixo eletrônico. Quando o programa de do destinatário recebe uma mensagem de um servidor de , ele verifica se o remetente da mensagem é alguém conhecido do destinatário, como forma de avaliar a importância e relevância que esta mensagem pode ter em relação às demais. Se o remetente for identificado dentre os contatos cadastrados do destinatário, então a mensagem tem mais chances de ser entregue na caixa de entrada, pois trata-se de um enviado por um contato confiável Personalizando Topo e Rodapé Caso deseje utilizar um texto próprio para o Topo e Rodapé das suas campanhas, basta executar o procedimento abaixo: Ao inserir o texto de preview, deve-se colocar no link acesse aqui a Nesse caso seria declarado no HTML da seguinte forma: <table cellspacing= 0 cellpadding= 0 border= 0 width= 540 > <tbody> <tr> <td align= left width= 316 ><b><font size= 1 face= Arial bcolor= # > Newsletter Experian</font></b></ td> </tbody> </table> <tr><td><table cellspacing= 0 cellpadding= 0 border= 0 > <tr><td align= left ><font size= 1 face= Verdana color= #54585a ><font size= 2 ><b> A partir desta edição, a news Experian Virtual Target levará você a descobrir novas tendências e enriquecer seu conhecimento sobre marketing. Aproveite!</font></td></tr> <tr><td bgcolor= #ffffff align= Center><font size= 1 face= Verdana color= #1065ac >Caso não esteja visualizando esta mensagem, <a target= _blank >acesse este link</a>.</font></td></tr> </table> </body> 1.4. Por que o Preview é importante? Os provedores em sua maioria, quando recebem as mensagens deixam-nas com as imagens bloqueadas. Se o contato não puder exibir as imagens dentro do cliente de , ele poderá visualiza-las através do link alternativo disponível no topo do template.

5 <table cellspacing= 0 cellpadding= 0 border= 0 width= 540 > <tbody> <tr> <td align= left width= 316 ><b><font size= 1 face= Arial bcolor= # > Newsletter Experian</font></b></td> </tbody> </table> <tr><td><table cellspacing= 0 cellpadding= 0 border= 0 > <tr><td align= left ><font size= 1 face= Verdana color= #54585a ><font size= 2 ><b> A partir desta edição, a news Experian Virtual Target levará você a descobrir novas tendências e enriquecer seu conhecimento sobre marketing. Aproveite!</font></td></tr> <tr><td bgcolor= #ffffff align= Center><font size= 1 face= Verdana color= #1065ac >Se você não deseja mais receber nossos s, <a target= _blank > cancele sua inscrição aqui</font></a> ou solicite o cancelamento através do xxxxx@xxxx.com.br</tr></td> </table> </body> </html> 1.5. Por que o OptOut é importante? Para que o contato tenha a possibilidade de negar o recebimento de um marketing, deve existir o opt-out. O funcionamento correto depende da inserção de um link com a função de descadastramento em todos os s marketing criados Utilize o Pré-header em seu Marketing! O pré-header é uma pequena seção que aparece no topo do , acima do conteúdo da mensagem. A maioria das pessoas que trabalha com Marketing usa o pré-header para oferecer uma versão web da mensagem caso o destinatário tenha problemas na visualização do . Você pode aproveitar o fato de quase todas as empresas usarem, por padrão, essa mensagem para visualização no browser e colocar alguma informação que destaque seu dos demais recebidos pelos destinatários, pois o pré-header também é exibido na caixa de entrada, após o assunto do e- -mail. Veja um exemplo de como o destinatário visualiza as mensagens na caixa de entrada: Note que a primeira mensagem teve o pré-header mais elaborado e se destacou dos demais. Quando a mensagem é aberta, o pré-header é visualizado da seguinte forma:

6 O pré-header é um recurso a mais que você pode usar a seu favor e, se bem trabalhado, pode aumentara taxa de visualização de suas campanhas. Lembre-se: A maioria das empresas usa o pré-header apenas para oferecer a versão web da mensagem,use-o para atrair mais leitores! Então, ao invés de usar somente Caso não esteja visualizando esta mensagem, acesse este link, use também uma frase atrativa, uma espécie de resumo do seu conteúdo para despertar o interesse do usuário. 2. HTML 2.1. O que devo usar? No HTML abaixo, iremos exemplificar como deve ser diagramado o cabeçalho da peça e nas demais páginas como deve ser a estrutura do código, assim como a inserção de imagens, textos e links, com a finalidade de se obter a maior aceitação pelos provedores e evitar erros na renderização do conteúdo nos diversos clientes de Cabeçalho do código Nunca se esqueça de preencher a tag <title> no cabeçalho do documento HTML. Muitas ferramentas antispam analisam o conteúdo desta tag e, caso ela esteja vazia ou preenchida com expressões suspeitas, sua mensagem pode receber pontuação como spam.

7 Veja abaixo um exemplo da tag title preenchida e a correta codificação que deve ser declarada no código: <html> <head> <meta http-equiv= Content-Type content= text/html; charset=iso /> <title>newsletter_experian</title> <script ></script> </head> <body> Estrutura do conteúdo Para diagramar o conteúdo, utilizar somente tabela simples através das Tags table, tr e td, conforme exemplo abaixo: <table cellspacing= 0 cellpadding= 0 border= 0 align= center width= 600 > <tbody> <tr> <td bgcolor= #ffffff align= center ><font size= 1 face= Verdana color= #1065ac ></font> </td> </tr></td> <body> Cor de Fundo Alguns clientes de têm restrições quando à exibição de cor de fundo nas mensagens. Para inserir cor de fundo no template, utilize tanto o atributo bgcolor do HTML quanto o background-color de CSS, como no exemplo: <table cellspacing= 0 cellpadding= 0 border= 0 align= center width= 600 > <td bgcolor= #ffffff align= center ><font size= 1 face= Verdana color= #1065ac ></font> </td> </tr></td> <body bgcolor= #96bc33 style=background-color: rgb(150, 188, 51);>

8 2.2. O que não devo usar? Não utilizar as tags e atributos abaixo, os mesmo geram bloqueios por spam e não são renderizados pela maioria dos clientes de <div> <table rowspan= x > (Não utilizar o atributo rolspan) <table colspan= y > (Não utilizar o Atributo colspan) <map> <form> <imput> <ol> Mais adiante abordaremos o uso de atributos CSS e o comportamento das folhas de estilo nos provedores, quando aplicados em templates para marketing.

9 2.3. Construindo o código HTML Template Fatiado Exemplificamos uma peça que foi fatiada em diversas partes. Para pequenos ícones onde serão inseridos links para redirecionamento, as fatias são menores. Note que o template deve ser fatiado sempre na horizontal e sem espaços entres as partes a fim de evitar fragmentos.de imagem que podem atrapalhar a leitura do HTML depois de finalizado. No fatiamento, os textos, ícones e imagens são fatiados separadamente pois o HTML desse template terá mescla entre texto e imagem, o que é o mais recomendado. Esse fatiamento pode ser executado através de um editor de imagem (photoshop ou similar) e após o fatiamento concluído as partes fatiadas devem ser salvas para formato web e hospedadas em um servidor ou ambiente online para que o caminho absoluto das imagens seja inserido no código fonte na construção da peça em HTML.

10 Veja abaixo um exemplo de HTML de um template que possui apenas imagens fatiadas: <html> <head> <meta http-equiv= Content-Type content= text/html; charset=iso /> <title>comunicado_experian</title> </head> <body bgcolor= #6db33f > <table cellspacing= 0 cellpadding= 0 border= 0 align= center > <tbody> <tr> <td><img height= 184 border= 0 width= 30 style= display:block name= experian_01 id= experian_01 src= <td><img height= 184 border= 0 width= 30 style= display: block; name= experian_02 id= experian_02 src= alt= /> </td> <td><img height= 184 border= 0 width= 30 style= display: block; name= experian_03 id= experian_03 src= alt= /> </td> </tr> </tbody> </table> <table cellspacing= 0 cellpadding= 0 border= 0 align= center > <tbody> <tr> <td><img height= 199 border= 0 width= 35 style= display: block; name= experian_04 id= experian_04 <a href= target= _blank > src= imagens2.virtualtarget. com.br/imagem_04.jpg alt= /></td> <td><img height= 214 border= 0 width= 50 style= display: block; name= experian _05 id= experian _05 <a href= target= _blank >src= alt= /></td> <td><img height= 292 border= 0 width= 600 style= display: block; name= experian _06 id= experian _06 src= alt= /></td> <td><img height= 480 border= 0 width= 600 style= display: block; name= experian _07 id= experian _07 src= alt= /></td> </tr> </tbody> </table>

11 Fatiamento Simples No exemplo ao lado, temos um template criado no Photoshop de uma arte em jpeg. É um template composto por uma imagem única, sem mescla de textos como no exemplo anterior.no próprio Photoshop podemos fazer o fatiamento da imagem conforme abaixo, e nesse caso, fatiamos a peça em 6 partes similares de forma horizontal. Este caso funciona da mesma forma como no exemplo anterior. As imagens fatiadas devem ser hospedadas em um ambiente web para termos o caminho absoluto delas sempre composto por um endereço semelhante a este:

12 <html> <head> <meta http-equiv= Content-Type content= text/html; charset=isso /> <title>newsletter_experian</title> </head> <body bgcolor= #c2c2c2 > <table cellspacing= 0 cellpadding= 0 border= 0 align= center width= 600 > <tbody> <tr> <td><img height= 184 border= 0 width= 600 style= display: block; src= alt= Institucional /> </td> </tr> <tr> <td><img height= 199 border= 0 width= 600 style= display: block; src= alt= Experian Virtual Target /></td> </tr> <tr> <td><img height= 214 border= 0 width= 600 style= display: block; src= alt= Veja todos os recursos /></td> </tr> <tr> <td><img height= 199 border= 0 width= 600 style= display: block; src= alt= Certificação Return Path /> <tr> <td><img height= 214 border= 0 width= 600 style= display: block; src= alt= Solicite Online /> </td> </tr> <tr> <td><img height= 199 border= 0 width= 600 style= display: block; src= alt= rodapé /></td> </tr> </tbody> </table> </body> Perceba que o código é bem limpo e utiliza apenas tabela simples para diagramar as imagens fatiadas. O template possui largura width de 600 pixels respeitando as boas práticas. Todas as imagens estão no formato jpg ou gif, possuem os atributos de altura height, largura width e borda border, além do parâmetro Style= display:block;.

13 Formatação da tag alt O template não possui conteúdo de texto então a tag alt sugere um texto alternativo do conteúdo que existe em cada tag. Isso torna o Template mais atrativo aos destinatários além de promover o equilíbrio entre texto e imagem na peça. Exemplo: <img src= alt= A descrição da tag alt promove o equilíbrio entre texto e imagem border= 0 /> Veja abaixo como esse template chegaria com as imagens bloqueadas nos provedores. Observe que há uma diferença visual entre o uso do preenchimento da tag alt e o preenchimento aliado a formatação das tabelas. Essa formatação permitirá que o contato visualize a identidade visual da peça sem necessitar desbloquear as imagens, mais uma vez reforçando a idéia de torna-lo mais atrativo. Preenchimento da tag Alt, sem formatação das tabelas. Preenchimento da tag Alt + Formatação das tabelas Procure deixar seu código o mais limpo possível, removendo sujeiras que podem ser inseridas por softwares Adobe, Microsoft e outros.

14 2.4. HTML gerados por softwares do pacote Microsoft Office e Adobe Evite utilizar os softwares do Pacote Microsoft Office (Word, Excel, Publish) e Pacote Adobe (DreamWeaver e Photoshop) para gerar o código HTML de seu template. Normalmente, esses softwares utilizam várias tags que sujam o código com parâmetros de alinhamento não recomendados para marketing como rowspan e colspan. Esses atributos são usados para construção de websites mas não funcionam dentro dos provedores. O Word, por exemplo, gera códigos em XML que prejudicam a visualização do seu template. Construa o seu código HTML manualmente inserindo os parâmetros tag a tag. Para isso pode utilizar um software como o Dreamweaver ou bloco de notas, mas apenas para edição e não como uma ferramenta para gerar o código de forma automática. 3. Links Para alterar a cor dos links, insira a formatação de fonte dentro da tag <a>, como neste exemplo: <a href= target= _blank ><font face= Arial, Verdana, Sans-serif size= 2 color = #bbd034 >Experian Virtual Target </font></a> Caso necessário, você pode remover o sublinhado dos links através de CSS. Na tag <a>, insira o trecho style= text-decoration:none;. Isso irá remover o efeito de sublinhado do link. Em todos os links, insira o atributo target = blank, para assegurar que todos os links de destino serão abertos em novas janelas. Essa ação parece óbvia, mas alguns webmails carregam as páginas de destino na mesma janela - ou até mesmo dentro de sua interface. No template, insira um link para a Política de Privacidade de seu website. Se você não tem uma, pode utilizar um roteiro disponível no site da DMA - Direct Marketing Association (Em inglês):

15 4. Renderização nos Cliente de Veja abaixo uma breve análise de como se comportam os provedores (webmails e desktop) ao receber um template de marketing. O que aceitam, o que renderizam, o que apresenta problemas e deve ser evitado. Analisamos o comportamento dos principais webmails: Hotmail, Windows Live, Gmail, Yahoo Mail, Uol, Bol, Terra, e dos principais provedores Desktop: Outlook (versões 2003,2007,2010,2011 e Express), Thunderbird e Lotus Notes. 4.1 Webmails» Hotmail e Windows Live - Não suporta propriedades CSS Focus, margin, list-style-image e font-stretch. - Suporta a propriedade list-style-position apenas com o valor inside. - Para suportar o valor outside, não declarar a propriedade list-style-position. - Não suporta adequadamente a tag ol. - Bloqueia sempre as imagens mas exibe se o contato estiver adicionado à lista de confiáveis. - Exibe formulários mas mostra mensagem de segurança ao enviar. Suporta métodos Post e GET. - Não suporta vídeo e animações em Flash nas mensagens. - Não suporta os parâmetros de CSS: z-index, top, bottom, right, left, position, margin, list-style-position, list-style-image, font-stretch, border, background- position, background-repeat e background- -image. - Suporta apenas estilos inline, exceto os declarados dentro da tag <body>. - Não suporta Div ou qualquer outra propriedade de posicionamento, obrigando o uso de table, td e tr. - A propriedade background-color é suportada em qualquer tag, exceto body. - O único atributo funcional da tag body é o text, para definir o estilo de texto de toda a mensagem. - Não suporta os atributos cols e readonly da tag textarea. - Suporta GIF animado.» GMail - Não suporta CSS incorporado, apenas inline. - A propriedade CSS background-image agora é suportada no gmail. - Não suporta background-position, background-repeat, background-attachment. - O Gmail altera a cor dos links de preto para azul. Para manter a formatação deve-se usar código hexadecimal aproximado associado ao! que faz com que ele interprete a importância da cor nos links. - Insere por padrão links em textos que se assemelham a endereços web. A formatação desses textos deve ser feita separadamente para evitar tal ação do Gmail. - Não suporta o atributo MAP para imagens e OL para listas ordenadas. - Bloqueia todas as imagens da peça por padrão.

16 - Não suporta vídeo e animações em Flash nas mensagens. - Permite a exibição de vídeos do Youtube na área destinada aos anexos, quando a mensagem chega com um link de vídeo do Youtube. O vídeo só é exibido se o link estiver escrito no corpo da mensagem, e não embutido em uma tag <embed> ou <object>. - Exibe formulários mas mostra mensagem de segurança a enviar. Suporta métodos Post e GET. - Suporta GIF animado. Observação: O Hotmail e o Gmail, acrescenta um espaçamento de quase 5 pixels ao redor de todas as imagens. Isso pode prejudicar a correta visualização de templates compostos essencialmente por imagens. Esse problema pode ser corrigido através do atributo style= display:block inserido em todas as tags de imagem do HTML.» Yahoo Mail pixels de largura do templates - Não suporta Vídeo e objetos SWF nas mensagens - Exibe formulários mas mostra mensagem de segurança a enviar. - Bloqueia imagens, mas permite ao usuário configurar essa ação - Não suporta listas ordenadas em ol. - Suporta atributos background e text. - Reconhece mensagens com certificado digital - Suporta o posicionamento de elementos através de float e imagens como plano de fundo (exceto no body) - Não suporta posicionamento através das propriedades position, top, bottom, right, left ou z-index. - suporta a propriedade white-space. - Suporta GIF animado.» Uol e Bol - Todo remetente não autorizado receberá um Tira-teima*. Se respondido, a mensagem será liberada e enviada para a pasta de entrada. - Todas as mensagens de remetentes desconhecidos são direcionadas para a pasta Quarentena equivalente a Spam ou Lixo Eletrônico -, onde permanecem por 30 dias antes de serem excluídas automática e permanentemente. - O UOL não suporta a tributos CSS list-style e font-stretch e o uso de estilos dentro da tag <body>, onde a formatação é ignorada. - Na nova interface, nenhum tipo de formulário (get ou post) é suportado adequadamente. - Suporta tag style apenas inline. Estilos inseridos no cabeçalho (<head>) serão removidos. - Não suporta as tags de lista <ol>, <ul> e <li> - Não suporta o atributo border da tag <img> - Não suporta o atributo bgcolor para tabelas e células com o fundo definido em porcentagem. - Também suporta perfeitamente vídeos e objetos SWF. - Quando o Tira-Teima é executado as mensagens passam a chegar abertas, sem bloqueios. - Recomendado o uso de 530 px máximos para largura do template.

17 » Terra - As propriedades CSS não podem ser inseridas na tag body pois não serão interpretadas. - Não suporta z-index, position, top, left, margin, list-style-image, font-stretch e white-space. - Apresenta problemas de renderização com os atributos <strong> e <em> mas suporta <b> e <i> para reproduzir os mesmos efeitos. - Apresenta problemas para renderizar corretamente o espaçamento com a tag <p>. A solução é utilizar padding visto que margin não é suportado pelo provedor Terra e demais clientes de web. - Bloqueia imagens por padrão. - Suporta formulários mas possui algumas restrições para cada método (post e GET) sendo necessários testes para cada form. usado. - Não suporta animações em Flash e vídeos no formato SWF. - Suporta GIF animado. - Recomendado o uso de 600 pixels de largura para templates Provedores Desktop» Outlook - Quando o usuário encaminha o HTML recebido para outro destinatário, ele entra no modo de edição e composição da nova mensagem e o Outlook troca seu mecanismo de renderização para o Microsoft Word, prejudicando a renderização. - Todas as versões analisadas do Outlook bloqueiam as imagens de remetentes desconhecidos. Por isso, é importante incluir, em todos os s marketing, uma mensagem de whitelist, - Não utilizar CSS para formatação e posicionamento dos elementos da mensagem, e utilizar apenas a diagramação em tabelas. - Outlook 2007 e 2010 não suporta o parâmetro background-image. Este é suportado pelo Outlook 2003 e express. - Outlook 2011 suporta quase todos os atributos CSS, salvo alguns atributos de imagens em background. - Outlook 2007/2010 não renderiza adequadamente mapeamento de imagens. Costuma desordenar os links dessas imagens mesmo exibindo-as. - script, iframe, applet, bdo, isindex, menu, noframes, noscript e q. também não são suportados pelo outlook 2007/ Os Outlooks 2003 e Express, ao contrário, suportam o atributo background e não têm problemas com cores de fundo em elementos aninhados. As restrições aos eventos de javascript (onblur, onchange, onclick etc) permanecem. - Nos Outlooks 2003 e 2007, todas as formatações de texto para imagem serão ignoradas e os avisos de segurança com as alt tags serão exibidas na fonte padrão do sistema. - No Outlook Express, as especificações de tipo e tamanho de fonte serão ignoradas e apenas a cor atribuída será exibida. - O Outlook 2007/2010 não suporta formulários (<form>), desabilitando a funcionalidade do action e até mesmo alterando a aparência de certos elementos (checkbox e radio buttons, por exemplo). - O Outlook 2003, apesar de exibir corretamente todos os elementos do formulário, desabilita o action, impossibilitando o envio dos dados inseridos nos campos. - Outlook Express, ao contrário dos demais, permite o envio dos dados normalmente, pois não altera

18 a aparência dos elementos do formulário e não desabilita o action. - Nenhuma das versões suporta Flash e vídeo nas mensagens. - O Outlook 2003 e Express suportam corretamente o GIF animado mas nas demais versões que utilizam Word como mecanismo de renderização, não funciona, mostrando apenas o primeiro frame estático do GIF. Veja abaixo, demais parâmetros de CSS não suportadas pelo Outlook: Outlook 2003 e express não suporta: border-spacing caption-side empty-cells list-style-image font-stretch font-size-adjust white-space» Thunderbird - Bloqueia imagens automaticamente no recebimento e mostra mensagem de segurança no cabeçalho. Elas chegam abertas se o contato já existir como confiável - Suporta formulários mas possui algumas restrições para cada método (post e GET) sendo necessários testes para cada form. usado. - Objetos SWF não são suportados por nenhum destes clientes de , não importando se o objeto for inserido através de Javascript, que é naturalmente bloqueado, ou através da tag <object>. - suporte a imagens em GIF. - Recomendado o uso de 600 pixels de largura para templates. - A formatação de fonte em CSS não deve ser inserida no BODY (seja da forma inline ou incorpora-

19 da), mas sim, na própria tag que contiver o texto (p, a, table etc). - A formatação de tamanho de fonte inserida no body não é aplicada a nenhum elemento de texto do templates. - Renderiza o HTML da mesma forma que um browser, não importando se o código HTML traz os estilos CSS inline ou incorporado (dentro do HEAD).» Lotus Notes - Não suporta animações e vídeos (java script não é suportado) - Não aceita folhas de estilo CSS removendo a formatação usada. - Imagens em tamanhos muito grandes faz com ele renderize a peça com erro ou não exiba as imagens. - Não reconhece colspan e rowspan, prejudicano o alinhamento do template. - No mais, o Lotus notes possui o mesmo comportamento que o Outlook 2007/ Propriedades de HTML e CSS que são aceitas pelos clientes de De acordo com os testes realizados pela equipe de suporte Virtual Target, foi constatado que alguns atributos não são visualizados corretamente em alguns clientes de . As principais considerações acerca dos tópicos analisados são: Suporte a HTML A grande maioria das tags é suportada, com poucas exceções. O Terra Mail (versão clássica) é o único que não suporta as tags strong, em e del. O Outlook 2007 não suporta nenhuma tags de nenhum componente de formulário Suporte a formulários Os webmails BOL, UOL e Hotmail, assim como o desktop Outlook 2007, não suportam formulários. Os primeiros até exibem os campos corretamente, mas não permitem o envio das informações. O Outlook 2007 não exibe nem os campos dos formulários, trocando-os por caracteres como [] e () para impedir o preenchimento e envio das informações Suporte a vídeos e animações Talvez uma grande evolução no suporte a conteúdo multimídia dentro do tenha sido conseguida com o fato dos webmails BOL e UOL (nova interface) passarem a suportar mensagens com vídeos e animações SWF. O Gmail também deu um pequeno passo nessa direção quando anunciou o suporte a vídeos do Youtube dentro das mensagens. Os demais clientes de não oferecem suporte a vídeos e nem animações SWF. O único tipo de animação aceita é a imagem em formato GIF animado. O Outlook 2007, porém, não suporta este tipo de imagem.

20 Suporte a CSS Dentre as três formas de utilizar CSS em layouts para a web, a inline é a mais aceita pelos clientes de . CSS em folhas de estilo externas são aceitas apenas por clientes de desktop, como Thunderbird, Outlook e Windows Mail. Suporte para CSS mesmo simples, varia consideravelmente entre os clientes de , e até mesmo versões diferentes do mesmo cliente. Utilize apenas CSS inline, que é suportado pela grande maioria dos clientes de . Além das propriedades de posicionamento, o Outlook 2007 não suporta width ou height de CSS. Prefira atribuir larguras e alturas aos elementos através de seus respectivos atributos HTML. Abaixo apresentamos uma lista dos principais parâmetros de CSS e atributos suportados pelos principais clientes de (Webmail, Desktop, Mobile) atualmente. Atributos CSS INLINE/STYLE A LINK /LINKS ÂNCORAS TEXT DECORATION TARGET TEXT ALIGN VERTICAL ALIGN VALIGN MARGIN PADDING DISPLAY FONT FONT FAMILY FONT SIZE FONT STYLE WIDTH HEIGHT BORDER FLOAT UL, LI EM BACKGROUND - COLOR TOP; BOTTOM,RIGHT,LEFT,MIDDLE STRONG CLEAR LIST STYLE POSITION COLOR LETTER SPACING LINE - HEIGTH ALIGN SIZE BORDER ALT BGCOLOR VSPACE HSPACE Formato das imagens JPG GIF PNG GIF ANIMADO Tags BODY TABLE TR TD IMG TITLE FONT A HREF BR P