Coleção - Análises de marketing em clientes de

Transcrição

1 Coleção - Análises de marketing em clientes de Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Marketing em Clientes de , apresentamos os estudos do webmail Terra ( na versão Clássica e com Painéis ) e também do cliente desktop Mozilla Thunderbird 2. Dentre todos os clientes de selecionados para análise, o Thunderbird é um dos (poucos) que oferecem um excelente suporte a CSS e aos webstandards na renderização das mensagens HTML. Em contrapartida, o webmail do Terra não oferece total suporte a CSS, conseqüentemente, aos webstandards, exigindo uma atenção muito maior do desenvolvedor. Recentemente, o webmail do Terra foi reformulado e agora está disponível em duas versões: a Versão Clássica, com interface mais simples de navegar, e a Versão com Painéis, de navegação semelhante à do Outlook e com um painel de leitura logo abaixo da lista de mensagens. O novo Terra Mail apresentou uma importante evolução em seu mecanismo de renderização de mensagens HTML, tornando possível o uso de estilos inline de CSS. Porém, alguns problemas identificados na versão antiga permanceram e outros foram identificados. Acompanhe a análise a seguir e fique atento às melhores práticas para otimizar a visualização do marketing no Terra Mail. Suporte a CSS Thunderbird 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). A única particularidade observada é que, ao definir estilos de formatação de fonte em CSS, eles não devem ser inseridos no BODY (seja da forma inline ou incorporada), 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 template.

2 Visualização de template com CSS no Thunderbird

3 Terra O Terra Mail passou a suportar CSS inline, mas existem diferenças entre as propriedades suportadas pela Versão Clássica que oferece mais restrições - e pela Versão com Painéis. Enquanto a Versão com Painéis suporta até mesmo o posicionamento via CSS, com as propriedades z-index, position, top, left etc, a Versão Clássica não suporta essas propriedades, inclusive margin, list-style-image, font-stretch e white-space. As propriedades CSS não podem ser inseridas na tag body pois não serão interpretadas. Se houver necessidade de utilizar formtatação com estilos CSS, eles devem ser atribuídos às tags em que os objetos estão inseridos. Visualização de CSS Inline no Webmail Terra - versão com painéis Visualização de CSS no HEAD no Webmail Terra - versão com painéis

4 Suporte aos atributos de tags HTML Thunderbird Suporta a todas as tags HTML, incluindo bgcolor, background (para imagens), cellpadding e cellspacing. Geralmente, estes são os atributos menos suportados por clientes de . Caso exista algum texto não formatado no template, as definições padrão do próprio Thunderbird serão aplicadas: Fonte com serifa: Fonte sem serifa: Fonte mono espaçada: Cor da fonte: Cor do fundo: Tamanho da fonte: Times New roman Arial Courier New Preto Branco 13px Este padrão é o mesmo utilizado pelo usuário na composição de mensagens de texto comuns, por isso, são definições que podem ser alteradas a qualquer momento. Terra - versão clássica e versão com painéis O Terra Mail apresentou problemas na renderização de textos formatados com as tags e para produzir textos em itálico e negrito, respectivamente. A Versão Clássica não exibe estes efeitos, e o texto é exibido com a formtação comum de fonte determinada no código. O painel de leitura da Versão com Painéis, por sua vez, altera a aparência de textos formatados com estas tags. Textos que utilizam são exibidos em negrito, mas na cor preta, em fonte Verdana tamanho 11px. Isso significa que se o texto com estiver sobre um fundo escuro, não será exibido na mensagem visualizada no painel de leitura. A interação do usuário com a Versão com Painéis do Terra Mail é semelhante à interação com o Outlook, inclusive na maneira de abrir a mensagem em uma nova janela, com dois cliques. O usuário não está acostumado a usar dois cliques na web para realizar uma ação, então, na maioria das vezes, a mensagem será visualizada no painel de leitura, que apresenta os problemas de renderização dos textos em e . A alternativa é utilizar e para reproduzir os efeitos de negrito e itálico, respectivamente. Além dos problemas com e , o Terra Mail na Versão Clássica não exibe o espaçamento característico entre parágrafos , e os textos são exibidos como se fossem separados apenas por quebra de simples simples . A solução é determinar o espaçamento na tag de parágrafo através de estilos CSS, utilizando padding, visto que margin não é suportado pelo Hotmail, Windows Live Mail e pelo próprio Terra Mail, na Versão com Painéis.

5 Bloqueio de imagens Thunderbird Por padr mensagem de segurança. Todavia, se o contato já estiver adicionado na lista, as imagens serão exibidas sem bloqueio. Caso a imagem esteja com o endereço quebrado, será exibido seu texto alternativo, caso seja definido no template. Do contrário, nenhum símbolo ou aviso de imagem quebrada será exibido, o que faz com que o destinatário nem perceba que ali deveria existir uma imagem. Mensagem aberta no Thunderbird com imagens bloqueadas

6 Mensagem no painel de visualização do Thunderbird, com as imagens bloqueadas

7 Bloqueio de imagens Terra A nova versão do Terra Mail continua não bloqueando as imagens de mensagens HTML, mesmo que sejam de remetentes não cadastrados como contato. Assim, no Terra Mail, o atributo alt será visível apenas quando houver imagens quebradas no template. Neste caso, a visualização será desta forma: Imagens quebradas no Webmail Terra no Mozilla Firefox Imagens quebradas no Webmail Terra no Internet Explorer

8 Formulários Thunderbird Exibe p busca, No primei de enviado com sucesso foi aberta no navegador. Porém, o formulário enviado chegou ao destino em branco, sem nenhuma das informações preenchidas no cliente de . Para obter a confirmação de que o Thunderbird apenas executa o action do formulário, sem enviar os dados, um segundo teste foi realizado. Desta vez, com um formulário que exige a confirmação dos dados preenchidos, desta maneira: Campos em branco para preenchimento Ao clicar em Confirmar no passo anterior, uma nova página é exibida com os dados informados para sua confirmação ou correção. Este é o funcionamento correto do formulário utilizado no segundo teste. Enviad - rio e clicar no botão Confirmar, a página de destino não foi aquela do segundo passo, que exibe os dados preenchidos e solicita a confirmação, mas sim, o mesmo formulário, em branco. Os mesmos testes foram realizados para o Gmail, em que os formulários funcionaram conforme o esperado. Isso signific pode representar dois problemas, dependendo da forma como o formulário foi construído: A) Quando o formulário não solicita a confirmação dos dados: O usuário preenche e envia o formulário, mas o remetente o recebe em branco, sem nenhuma informação; B) Quando o formulário solicita a confirmação dos dados: O usuário preencher novamente. Independente do número de campos que o usuário precise preencher, esse é um problema grave de usabilidade.

9 Terra O Terra Mail suporta formulários com algumas restrições: a Versão Clássica envia apenas os dados de formulários com método post. A Versão com painéis suporta tanto formulários de método post quanto de método get, mas os elementos deve ter seus atributos de lagura e altura definidos. Do contrário, os elementos serão ampliados, proporcionalmente, até a largura máxima do formulário. Vídeos Nenhum dos dois clientes de analisados suportam vídeo em mensagens. O Terra, inclusive, analisa o código HTML da mensagem e retira todo o código <object> inserido para o vídeo. Animação Tanto o webmail do Terra quanto o Thunderbird oferecem suporte a imagens em GIF animado. Ambos mantêm também o tamanho original da imagem. Já 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>.

10 Painel de visualização. Thunderbird O Thunderbird mensagens e/ou selecionar um entre três diferentes modos de visualização do cliente de Clássico, Largo e Vertical. Ele também permite que você maximize o seu painel de visualização, optando por pastas em forma de menu ao invés do tradicional painel lateral. Visualização no Layout Clássico Visualização no Layout Largo Visualização no Layout Vertical Terra O webmail do Terra oferece a visualização apenas na versão com painéis..

11 Assunto e Rementente Thunderbird A mesma flexibilidade do tamanho do painel de mensagens aplica-se ao tamanho disponível na tela para visualizar Assunto e Remetente. É possível aumentar/diminuir a largura de ambos, o que permite visualizá-los com mais facilidade do que em webmails. Na visualização padrão do Thunderbird (Layout Clássico) ou no Layout Largo, sem alterar nenhuma de suas propriedades originais, são exibidos de 41 a 43 caracteres para o Remetente e caracteres para o Assunto na lista de mensagens. Caso estes limites sejam ultrapassados, as palavras são interrompidas com reticências. Na visualização com o Layout Vertical, em que o painel de pré-visualização é exibido à direta da tela, a lista mostra apenas o Remetente com até 35 caracteres (caso ele seja maior, há a interrupção com reticências após o 35º caractere). A coluna de Assunto é omitida para dar lugar à nova posição do painel. Terra Assunto Versão Clássica: 25 caracteres Remetente Versão Clássica: 19 caracteres Assunto Versão com Painéis: 25 Remetente Versão com Painéis: 20

12 Terra A Versão Clássica do Terra não tem uma limitação de espaço para exibir o template, pois o layout do webmail se adapta de acordo com a resolução de tela do usuário. A Verão com Painéis também exibe a mensagem no painel de leitura num espaço que varia conforme a resolução, porém, quando a mensagem é aberta em nova janela, o pop-up que comporta a mensagem tem largura fixa de 770 pixels. Para que a leitura da mensagem não seja comprometida em outros clientes de , recomenda-se adotar o limite de 600 pixels de largura para o template.