Série Manuais Manual para montagem de e-mail marketing
www.allinmail.com.br introdução Como seus clientes recebem seus e-mails? webmail Gmail Webmail Yahoo! Mail webmail UOL e BOL Cliente de email Windows Mail Cliente de email Microsoft Outlook Cliente de email Thunderbird e Terra Conclusão O que tiramos de tudo isso? APêNDIce 1 Guia de Suporte CSS em E-mail 3 6 13 16 21 25 33 38 40 Em caso de dúvidas, estamos à disposição em nossos canais de atendimento: Telefone: 11 3627-3677 E-mail: suporte@allin.com.br (de segunda a sexta, das 9h às 19h) All In Mail é uma ferramenta de entrega e gerenciamento de campanhas de e-mail Marketing, que atende a cada cliente como se fosse o único. Nosso objetivo é entregar resultado para o cliente e gerar resultado efetivo tanto na abertura quanto na venda. Última atualização deste manual: 08 de junho de 2011
O e-mail quando feito com responsabilidade e enviado apenas para os usuários que realmente 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. Como seus clientes recebem seus e-mails? 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 Gmail IG ibest Yahoo! C l i e n t es d eskto p Thunderbird Microsoft Outlook 2003 Microsoft Outlook 2007 Yahoo! Mail Beta BOL UOL Windows Live Outlook Express Windows Mail Windows Live Mail Hotmail Terra Apple Mail Para facilitar a compreensão, serão abordados os seguintes tópicos para cada webmail e cliente desktop: Suporte a CSS Suporte aos atributos de tags HTML Suporte a formulários Suporte a vídeos Suporte a animação Codificação de caracteres (suporte à acentuação) Bloqueio de imagens Painel de pré-visualização (preview pane) Exibição do Assunto e Remetente Espaço disponível para exibição do template As informações necessárias para a criação do design e para a renderização de templates são fundamentais para que o e-mail marketing chegue a caixa de entrada do destinatário, sem defeitos e da forma como foi criado. 3
Todos nós queremos construir nossas bases e enviar nossas mensagens para o máximo de pessoas 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. Como seus clientes veêm seus e-mails? Para entender o motivo das diferenças entre clientes de e-mail, é preciso entender que o mercado evolui e se transforma mais a cada dia. Por um lado, designers e receptores de e-mail são beneficiados pelos avanços na criação dos templates. Por outro, as mudanças fazem com que cada cliente de e-mail se adapte a elas de alguma forma. Citaremos como exemplo, o uso da formatação CSS, considerado inviável até alguns anos atrás. Hoje, já é aceito por alguns clientes de e-mail. Atualmente, apenas o Apple Mail, Thunderbird, Yahoo! e Windows Live suportam propriedades como float, margin e padding, de forma que, exclusivamente para eles, é possível criar templates em tableless. Como mencionado anteriormente, não são todos os clientes que se adaptam às mudanças na plataforma web. É o caso do Lotus Notes, Gmail e Outlook 2007 que, por não oferecerem suporte a esses padrões de desenvolvimento, necessitam do uso de técnicas ultrapassadas de codificação HTML. Para evitar problemas decorrentes dessas diferenças foi criado o Projeto Internacional E-mail Standards. Ele contribui para a evolução de aplicações web, melhorando seu suporte e acessibilidade, por meio do trabalho conjunto entre desenvolvedores de aplicações e designers. Unindo esses dois profissionais é possível conciliar a importância da elaboração do design com a consistência da renderização, e assim evitar possíveis erros. Na criação do e-mail marketing é importante que o Web Standards, conjunto de normas estabelecidas pela W3C, seja seguido. Com ele é possível alcançar, entre diversos benefícios, melhorias na usabilidade da mensagem. Ao formatar no padrão recomendado para o e-mail marketing, HTML 4.01 Transitional, é utilizada a tag font, a qual possibilita a determinação por size, que varia entre 1 e 7 (sendo 1=9 px e 2=13px). renderização em size = 1 renderização em font-size: 9px ARIAL VERDANA TAHOMA TIMES GEORGIA 4
Separe as pessoas que estão abrindo e clicando suas mensagens com mais freqüência. Estes são 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. Como seus clientes veêm seus e-mails? Embora o tamanho da fonte pareça ser o fator de maior impacto na leitura do e-mail marketing, deve-se ressaltar a importância da escolha da família. A tabela na página 4 mostra que algumas delas são mais legíveis do que outras, por apresentarem características distintas como, por exemplo, a presença ou não de serifas. Inclusive, é constatado que fontes com serifa são ideais para leitura de impressos e as sem, ideais para leitura em tela. Para ilustrar essa afirmação, compare a leitura de fontes diferentes no mesmo tamanho e repare como no size 1, a família Verdana, é muito mais legível do que a Times. Esse foi apenas um exemplo de que não só o tamanho, mas também a escolha da família são importantes para criar um template legível e adequado. Por outro lado, o design proposto e a identidade visual do cliente devem ser preservados, de forma que essa escolha não seja baseada somente no que permite melhor leitura, mas sim num conjunto de decisões relacionadas ao briefing. O fato de o size 1 corresponder a 9 px e o size 2 corresponder a 13 px demonstra a existência de uma grande diferença de tamanhos entre eles e ausência de um meio-termo. Com isso, por vezes deve-se optar por uma fonte menor ou maior do que a desejada, uma vez que não é possível utilizar tamanhos intermediários como 10px, 11px e 12px. Esses foram alguns exemplos relevantes de particularidades sobre as aplicações do e-mail marketing. É necessário, no entanto, entender mais sobre cada cliente de e-mail para minimizar problemas decorrentes de renderizações mal feitas, garantindo o envio correto da mensagem ao destinatário. Com isso, o sucesso do trabalho é resultado do conhecimento adquirido sobre os métodos e ferramentas de codificação, associados à análise de sua base de dados. 5
Ainda se retirarmos o envio de spam do volume total de e-mails trafegados globalmente (que pode 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. Webmail: Gmail I n t roduçã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: 6
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. 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. 1. E-mail visualizado no Internet Explorer 2. E-mail visualizado no Firefox 3. Arquivo original do e-mail A conclusão é de que todos os textos do e-mail marketing que se tratarem de um website ou de um endereço de e-mail deverão ser formatados independentemente do resto do texto. Caso não seja feito, acontecerá como no exemplo acima e eles herdarão formato de links, na cor azul e sublinhados. S u p o rte 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. 7
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. 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 Firefox Quando a imagem de um remetente desconhecido é enviada para uma versão anterior do Gmail, IG ou ibest, nota-se que ela exibe um ícone de imagem quebrada no interior de uma caixa de bordas de 1px no local da imagem original, cujas dimensões foram incluídas no código HTML. Por esse motivo, a quebra pode prejudicar a visualização do texto, caso ele seja maior do que a área delimitada. Já na versão atual, a imagem não exibe bordas nem ícones, não prejudicando o texto. 1. Gmail versão antiga 2. Gmail versão atual Visualização do template no Internet Explorer Para ambas as versões, a visualização no Internet Explorer é a mesma. Nos dois casos a imagem aparece dentro de caixas, o tamanho dos textos são alterados e apenas as cores indicadas na formatação são mantidas. 1. Gmail versão antiga 2. Gmail versão atual 8
Por mês, em média são enviados 3 bilhões de e-mails em todo país e 90 bilhões no mundo, nesse universo, tem sucesso apenas aquela mensagem que chega para a pessoa interessada em determinado produto ou serviço, enviada de maneira eficiente. A n i m aç ão Flash Para todos os navegadores e todas as versões do Gmail (anterior e atual), incluindo portanto, IG e ibest, não há suporte para animações em Flash. Mais do que isso, no espaço onde o conteúdo deveria aparecer, fica apenas um espaço vazio, que não indica a presença de um arquivo SWF e nenhum alerta de segurança é enviado ao usuário. GIF animado Todos os webmails analisados neste conjunto suportam imagens em GIF animado, com uma única restrição, que está relacionada ao tamanho do template: ele não pode exceder o limite de 100Kb. V í 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 nova A versão recente do Gmail permite a exibição de vídeos do Youtube na área destinada a anexos, somente se o link estiver escrito no corpo da mensagem e não embutido em uma tag <embed> ou <object>. Essa nova função é disponibilizada na área Labs do Gmail atual. Codificaç ã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. Á = Á Ç = Ç 9
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. 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 mensagem no início da codificação HMTL. Assim, mesmo sem a pré-visualização, o usuário terá acesso a uma prévia da mensagem que irá ajudá-lo a decidir por abrir ou não o e-mail. A s s u n to e r e m 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). Resolução de 1024x768 65 caracteres, sem interrupção de reticências. Resolução de 800x600 de 33 a 35 caracteres, sem interrupção de reticências. Remetente: deve ser até 25 caracteres Como explicado anteriormente, pode-se perceber que nas resoluções menores o assunto foi interrompido sem uso de reticências ao exceder o limite. Além disso, a versão do IG e ibest possuem uma singularidade em relação ao remetente, que possibilita o aumento da barra de rolagem da mensagem. Isso se deve ao fato de que, 10
De acordo com a SenderBase.org, organização da Cisco para monitoramento do tráfego global de e-mails, o e-mail é utilizado para comunicação pessoal com muito mais regularidade do que as redes sociais e o trafego mensal de emails passa dos 20 trilhões de mensagens. ao extrapolar o limite, o remetente não pode ser lido inteiramente na caixa de entrada. Uma vez aberta à mensagem, o webmail aumenta a barra da rolagem, possibilitando assim, a leitura integral. Por outro lado, essa expansão horizontal desloca o template para a direita numa tentativa de centralizar a mensagem e, com isso, pode prejudicar a leitura. Deve-se ressaltar que a versão atual do Gmail não possui tal característica, de forma que o remetente é sempre interrompido ao extrapolar o limite de caracteres. Espaç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: 11
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. Mensagem exibida na resolução de 1024x768 com espaço para exibição do template de 550px: Mensagem exibida na resolução de 800x600 com espaço para exibição do template de 550px: 12
Se você utiliza o Front Page, retire meta name=?generator? content=?front Page?/ 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 I n t rodução Analisaremos neste capítulo as duas versões do webmail do Yahoo!: as diferenças que existem entre a versão mais recente, Yahoo! Mail e a versão anterior, Yahoo! Mail Classic. A principal diferença entre eles é que a versão recente oferece uma navegação muito mais simples para usuário, apresentando, por exemplo, painel de leitura na parte inferior a listagem da caixa de entrada. Além disso, a área destinada a publicidade, que antes ficava no topo hoje é opcional e se encontra na lateral do webmail. Assim, como o Gmail, o usuário pode optar por utilizar a versão antiga, acessando para isso, um link disponível em sua página inicial. O desempenho nas duas se mostrou muito eficiente, apresentando apenas algumas falhas que podem ser consertadas na criação do e-mail marketing. Como benefícios, se destacam dois aspectos presentes em ambas as versões: Definição pelo próprio usuário sobre o bloqueio de imagens O usuário pode optar por bloquear ou liberar todas as imagens de acordo com seu interesse. Capacidade de reconhecimento de mensagens com certificado digital O webmail se responsabiliza por identificar mensagens cujos remetentes são verdadeiros e confiáveis, protegendo o usuário de tentativas de smap ou phishing. Além disso, as mensagens certificadas são reconhecidas pelo usuário por meio de um ícone presente tanto na caixa de entrada, como no momento em que o e-mail é aberto. Isso permite que as mensagens seguras entrem direto na caixa de entrada do destinatário, com exceção dos casos em que ele as defina como spam. C S S Yahoo! Mail Classic A versão mais antiga do webmail suporta somente o CSS inline, porém apresenta alguns erros na renderização de textos que foram definidos dentro da tag <body>. Quando isso ocorre, o Yahoo! Mail Classic aplica seu estilo ao texto: fonte arial na cor preta, tamanho 12 px. 13
Na hora de montar um e-mail marketing, não se esqueça que as imagens devem vir em links absolutos e hospedadas em um servidor. Use tag ALT para garantir que mesmo quem não visualiza imagens tenha uma idéia do que estaria ali, como um conteúdo ou uma referência a um site. O posicionamento de elementos pode ser feito por meio do float e a utilização de imagens como plano de fundo (exceto no body) são suportadas. No entanto as propriedades position, top, bottom, left ou z-index não são aceitas nesta versão. Yahoo! Mail Para a nova versão as mesmas limitações se aplicam, com poucas exceções. O Yahoo! Mail passa a suportar hover, list-style-image e a propriedade white-space. S u p o rte ao s at r i b u to s d e tag s H T M L Yahoo! Mail Classic Este é o único webmail que suporta a tag ol permitindo a construção de listas ordenadas. Além disso não suporta os seguintes atributos: type da tag li Bordercolor para table, tr e td. Tag body Border e usemap de imagens* Yahoo! Mail A versão mais recente do webmail do Yahoo! deixa de suportar a tag ol para criação de listas ordenadas e passa a aceitar atributos background e text. B lo q u e i o d e i m ag e n s As duas versões do Yahoo! são configuradas para bloquear imagens recebidas. Porém, o diferencial deles é que o usuário pode optar por liberá-las para todas as mensagens (exceto as da caixa de spam) ou apenas para os remetentes conhecidos. No caso das imagens estarem bloqueadas e o usuário utilizar o Firefox como servidor, existem duas formas de representação da imagem: na primeira delas, quando as dimensões da imagem não são declaradas, o texto alternativo é renderizado sem nenhuma demarcação da imagem. No caso das dimensões e o atributo ALT serem declarados na codificação, no local da imagem aparece um quadro com seu tamanho original, com o texto alternativo em seu interior, acompanhado de um ícone de erro. Utilizando o Internet Explorer, tanto faz a presença das dimensões da imagem na codificação. De uma forma ou de outra, aparecerá um quadro com ícone de imagem. Se existir um texto alternativo, ele aparecerá junto ao quadro representativo da imagem. *Pode-se concluir que esta versão não suporta mapeamento de imagens por meio da associação da tag área com o atributo usemap. 14
Mesmo com a melhora da banda larga no país, tente manter o e-mail bem leve: o HTML deve ter no máximo 30kb (preferencialmente 20kb), as imagens no máximo 50kb. E por mais que a altura não costume ser um limitador, deixe-a o menor possível para evitar muita rolagem. Formulários Para as duas versões, os dois formatos de formulário, Get e Post, são aceitos. Porém, o envio só será feito após a confirmação do usuário ao receber um alerta de segurança do webmail. V í 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 Classic Assunto: limite de 54 caracteres Remetente: limite de 33 caracteres Yahoo! Mail Assunto: limite de 37 caracteres Remetente: limite de 23 caracteres Para ambos, se o limite de caracteres for excedido, a frase é interrompida automaticamente. Espaç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. Recomenda-se a utilização de 550px como largura máxima, para visualizar o template sem problemas. 15
Uma boa dica sobre links é usar urls pequenas e intuitivas. Prefira sempre: www.dominio.com.br/campanha do que www.dominio.com.br/frt65789/src/123.asp. N ã o e s q u e ça de sempre i n c l u i r ta rget = _blank em todos os seus links. Webmail: UOL e BOL I n t roduçã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 antiga A versão antiga do UOL não oferece suporte ao CSS, seja ele externo, incorporado ou inline. Ao realizarmos um teste com CSS inline e incorporado foi constatado que o webmail ignorou a formatação utilizada e aplicou seu próprio CSS ao template. BOL/UOL - nova interface Tanto UOL quanto BOL possuem atualmente uma versão que aceita o CSS, capaz de suportar propriedades complexas como float e overflow, porém com algumas restrições como propriedades list-style e font-strech. Além disso, pode-se notar que ao utilizar estilos dentro da tag <body> a formatação é ignorada. 16
Para uma boa campanha de e-mail marketing, deve-se apostar em estratégias que privilegiem, além da personalização, uma experiência agradável ao usuário, tanto do ponto de vista do conteúdo oferecido, promoção, quanto do design. S u p o rte a formulários UOL - interface antiga No método Post, todo botão que tiver atributo type declarado com submit será oculto na mensagem. Utilizando o método GET, se o botão for exibido, ele não será ativo. Formulários feitos com o método GET ou POST são funcionais somente se o botão enviar ou ok estiverem em forma imagem na seguinte maneira: <input type= image src= imagembotao.gif alt= Enviar /> Com essas formatações será possível utilizar a tecla TAB para navegar de um campo para outro do formulário e preencher sem problemas os espaços de texto. Além disso, campos como checkbox e botões de rádio são funcionais somente se estiverem em forma de imagem. BOL/UOL - nova interface Na nova interface diversos atalhos para funções do webmail foram configurados para as letras do teclado - próxima mensagem (N), mensagem anterior (P), abrir mensagem (ENTER), escrever mensagem (C), encaminhar mensagem (F), responder (R), responder a todos (A), marcar como não lida (Z) e marcar como lida (X). Devido a essas mudanças, tanto o BOL quando UOL não suportam formulários em GET e POST de forma adequada. Isso demonstra a ineficiência de ambos em atender as necessidades básicas de preenchimento de campos descritivos, e a adequação para formulários de múltipla escolha, como pesquisas e enquetes, em que se utilizam apenas chekbox e botões de rádio. S u p o rte ao s at r i b u to s d e tag s H T M L UOL - interface antiga Devido a uma propriedade do navegador, ao utilizar o Firefox para acessar a interface antiga do UOL, todos os links apresentam sublinhado azul, independentemente da cor escolhida na formatação do link. Além disso, não suporta a tag <style> dentro de <head>. 17
Com os planos do governo de inclusão digital, existe um enorme potencial para ampliar a oferta de internet para mais da metade da população. Pense nas suas estratégias para contruir uma base de e-mails bem estruturada para receber a ampliação da banda larga em todo o país. Na produção de templates é necessário formatar e declarar corretamente todos os elementos. Caso contrário, o texto irá seguir as regras de CSS da interface antiga, apresentando sempre fonte Arial tamanho 11px. Para h2, a especificações da fonte serão as mesmas, porém em caixa alta na cor branca, sobre uma caixa de fundo azul. Já para definir uma cor de fundo do template que não seja a branca é necessário definir o bgcolor dentro de tabelas externas ou internas, cujo tamanho seja definido em pixels. Vale ressaltar que o bgcolor não funciona no <body>, nem em tabelas com largura definida em porcentagem. BOL/UOL - nova interface Esta versão suporta apenas a tag style inline, de forma que os estilos inseridos no cabeçalho (<head>) são removidos. Os elementos sem formatação, assim como na versão anterior seguirão as especificações do CSS do webmail. Neste caso textos aparecerão na cor preta, em fonte do tipo Verdana e tamanho 12px e os títulos (h1, h2, h3) seguem estas mesmas especificações, porém com variações de tamanho. Não suporta as tags de lista <ol>, <ul>, <li>, e o atributo border da tag <img>. Assim como a versão anterior, não suporta o atributo bgcolor com fundo definido em porcentagem para tabelas e células. S u p o rte a a n i m aç ão e v í d eo s UOL - interface antiga Suporta corretamente objetos SWF e vídeos, porém sempre acusará uma pontuação antispam de, no mínimo, 0,5 pts na avaliação da peça. Isto deve-se ao fato de existir dentro da mensagem um objeto do tipo <embed>. BOL/UOL - nova interface Da mesma forma que a versão anterior, suporta corretamente vídeos e SWF. B lo q u e i o d e i m ag e n s Tanto na interface antiga, quanto na nova, a configuração correta do tira-teima (captcha), permite a exibição das imagens sem bloqueios, uma vez que o remetente é reconhecido pelo webmail. Dessa forma, não é necessário que o remetente faça parte da lista de contatos do destinatário, pois o sistema o libera automaticamente. 18
A classe C é a que mais cresce em renda e participação nos números da internet brasileira (38%) e ainda tem muito para crescer até atingir a maturidade de classes mais elevadas como A e B. Nunca se esqueça de incluí-los tanto na estratégia, quanto no conteúdo do seu e-mail. Pa i n e l d e p r é-v i s ua l i zaç ão UOL - interface antiga Na versão anterior do UOL todas as mensagens são exibidas isoladamente em uma janela, uma vez que ela não possui um painel de visualização de mensagem. BOL/UOL - nova interface A nova interface oferece duas opções de visualização de mensagens: em uma janela isolada, tal qual na versão anterior, ou em um painel de leitura. Caso o usuário deseje utilizar esta última forma é necessário que ele a habilite, acessando as configurações do webmail. Fazendo esta opção, as mensagens serão lidas exclusivamente no painel, sem a possibilidade de utilizar outra janela para leitura. Utilizando o painel de leitura habilitado na parte inferior da tela, a parte superior da mensagem é a única visível ao destinatário, sem que ele precise utilizar as barras de rolagem verticais. Já em outras aplicações de e-mail, os painéis aparecem na parte inferior da lista de e-mails, tornando necessária a visualização no topo da mensagem das chamadas principais ou a presença de um índice com informações do que o leitor irá encontrar mais abaixo. A s s u n to e r e m e t e n t e O estudo realizado a seguir utilizou como base a resolução de tela de 1024 x 768 pixels. UOL - interface antiga Assunto: limite de até 32 caracteres para mensagens não lidas Remetente: limite de até 21 caracteres Observação: Na contagem de caracteres o espaço é incluído. BOL/UOL - nova interface Assunto: limite de 60 caracteres para mensagens não lidas Remetente: Caracteres ilimitados Observação: Na contagem de caracteres o espaço é incluído. Espaço d i s p o n í v e l pa r a e x i b i ç ão d o t e m p l at e O layout de ambos se adapta à resolução da tela, aumentando ou diminuindo de acordo com o tamanho disponível. 19
A internet se tornou o terceiro veículo de maior alcance no Brasil, atrás apenas de rádio e TV. Só para ter uma idéia do crescimento, no ano passado, a All In Mail disparou quase 4 bilhões e meio de emails, representando um aumento de mais de 250% em relação a 2009. Ao alterar manualmente o tamanho da janela de visualização, embora o BOL apresente uma largura mínima de layout maior do que o UOL (537px para o UOL e 747px para o BOL), ela não é recomendada. Isso deve-se ao fato de que na resolução 800 x 600 a mensagem pode aparecer oculta por barras de rolagem horizontais e dificultar a leitura. Devido a esses fatores e ao impacto que eles causam na leitura, é recomendada a utilização de uma largura máxima de 530px para os dois webmails analisados. 20