Newsletter: uma visão geral

Uma dúvida recorrente nos fóruns de design é como desenvolver uma newsletter. Esta não é uma tarefa das mais simples, pois envolve conhecimentos de HTML para desenvolver Layouts utilizando tabelas, método ultrapassado que desenvolvedores mais novos não dominam, e conhecer as particularidades dos clientes de e-mails que irão receber e exibir a newsletter idealizada.

Por que utilizar um método ultrapassado para escrever o código da Newsletter?
O maior problema no desenvolvimento de newsletter é que não existe um padrão de leitura de código HTML por parte dos Clientes de e-mail, sendo assim, alguns não reconhecem as divs, outros tem problemas com alguns atributos css e um terceiro aceita tudo. Por tanto, para desenvolver uma newsletter o recomendado é escrever o código utilizando tabelas, e não divs, evitar o uso de css, mas quando necessário colocá-lo in line.

A Campaign Monitor desenvolveu uma tabela que compara o suporte ao CSS pelos clientes de e-mail, clique aqui para ver a tabela.

As dimensões do layout:
Outro item importante na hora de criar a sua news é saber quais as dimensões máximas que podemos trabalhar. Vale apena lembrar que a unidade métrica usada para criar arquivos para a internet é o pixel, se o seu editor de imagem estiver trabalhando com outra unidade métrica mude para pixel, assim você terá uma visualização melhor do espaço dimencional do seu layout e evitará erros e possíveis retrabalhos.

A largura máxima de uma newsletter é de 600 pixels, assim sendo, você garante que a sua peça seja vista corretamente na maioria dos clientes. Para a altura não há restrições, mas vale o bom senso. E-mails quilométricos, além de ficarem pesados serão logo dispensado pelos usuários.

Como trabalhar as imagens:
No uso de imagens, o erro mais comum é com relação à resolução dos arquivos. O monitor de vídeo trabalha com uma resolução de 72DPI, por tanto as imagens que serão utilizadas no layout devem ser salvas em 72DPI. Imagens salvas com uma resolução maior não são aproveitadas, pois serão vistas a 72DPI, e fazem o seu e-mail ficar mais pesado. Dica: Na hora de cortar o seu layout e exportar as imagens para a montagem do código HTML, utilize a opção “save for web” do seu editor de imagens, assim você conseguirar arquivos otimizados para a web com boa qualidade e menores tamanhos.

Que formato de arquivo de imagem devo usar?
Na construção de layouts para a internet usa-se três tipos de arquivos para exibição de imagens: gif, jpg e png. Não existe um melhor que o outro, cada um tem as suas qualidades e defeitos e nada impede de se usar os três tipos no mesmo layout.

JPG: são arquivos que utilizam uma paleta de 16 milhões de cores. Indicados para fotografias e imagens que necessitam de muitas nuances de cores. Na hora de exportar o arquivo JPG utilize um índice de qualidade entre 40 e 60, assim você obtém um arquivo menor e garante uma boa qualidade. O JPG não aceita fundo transparente.

GIF: esses arquivos utilizam no máximo 256 cores na sua paleta, por tanto não são indicados para fotografias, mas tornam-se uma melhor opção quando o arquivo contem muitas cores chapadas, pois diferente do JPG ele não comprime as cores e a imagem fica mais nítida. Faça um teste, pegue a logo do seu cliente e exporte em JPG e depois em GIF. Muitas vezes o arquivo GIF fica maior que o JPG, mas como a diferença é muito pequena vale a pena pela qualidade. Aceita fundo transparente.

PNG: esse tipo de arquivo não é suportado pelos browsers mais antigos, por isso não é usado em larga escala, mas a tendência é que se popularize. O arquivo PNG é um arquivo GIF melhorado, pois ele é uma mescla de vetor e imagem. Ele torna-se uma ótima opção quando é necessário obter um arquivo com fundo transparente e utilizar o efeito de sombra (Drop Shadow) na transparência.

Background:
Outro grande “problema” na hora de construir um layout para newsletter é com relação ao uso de imagens de fundo. Os clientes de e-mail não suportam imagens de fundo. Se houver necessidade de diferenciar o background da tabela utilize cores chapadas configurando a cor desejada no código de criação da tabela.

Animação:
Muitos clientes pedem para desenvolvermos newsletter com animação, efeitos sonoros e até vídeo. Infelizmente isso não é possível. A newsletter nada mais é que um arquivo de e-mail, por tanto só suporta imagens. Animações simples até da pra fazer utilizando GIF´s Animados. Vale apena enfatizar aqui que o GIF Animado nada mais é que vários arquivos GIF lidos em sequência, então para criar animações é necessário ter em mente as limitações deste tipo de arquivo.

Tamanho/peso dos arquivos:
Uma grande preocupação quando criamos arquivos para a internet é com relação ao peso do arquivo, pois a informação deve ser carregada rapidamente, independente do tipo de conexão utilizada pelo usuário. Por tanto, quanto menor for o seu arquivo final, melhor. O tamanho ideal para uma newsletter é abaixo de 100Kb. Entre 100kb e 150kb é aceitável. Acima de 150kb é bom evitar, principalmente se o seu público acessa a internet por meios discados.

O próximo passo é escrever o código HTML e disparar o e-mail para a sua lista. Confesso que criar newslleter não é uma missão muito prazerosa, mas pode render um bom dinheiro no fim do mês.

Tags: desenvolvimento, Newsletter, Tecnologia
Publicado em Artigos | 5 Comentários »