Criação de Newsletter: uma visão geral

AGRADEÇA AO AUTOR COMPARTILHE!

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. Portanto, 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é dá pra fazer utilizando GIFs 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. Portanto, 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.

Fonte: Blog 72DPI

AGRADEÇA AO AUTOR COMPARTILHE!

Marcelo Alves

Mais artigos deste autor »

Marcelo Alves, graduado em Desenho Industrial com habilitação em Programação Visual pela Universidade do Estado de Minas Gerais. Atua como Webdesigner e Diretor de Criação desenvolvendo projetos de comunicação para web.


4 Comentários

Fabiano Gomes da Silva
1

Olá.

Parabéns pelo artigo Marcelo, muito bem explicado. Só estou com uma dúvida você disse assim no texto:

“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”

Como assim o Monitor realmente não “enxerga” mais do que isso? Então as imagens que designers fazem no Corel e Photoshop só serviria se caso for IMPRIMIR?

Abraços e excelente artigo.

Att.
Fabiano Gomes da Silva
CEO do EmpregaTI
http://www.empregati.com.br

Marcelo Alves
2

Respondendo à dúvida do Fabiano, realmente a resolução máxima dos monitores de vídeo é de 72DPI’s, por tanto não adianta salvar imagens com resoluções maiores pois ela serão exibidas em 72DPI.

Para melhor otimizar as imagens da sua news, primeiro defina as dimensões reais da mesma. Coloque as dimensões definidas no layout e salve-a em 72DPI.

Imagens em resoluções maiores são destinadas a outros fins, por exemplo para impressão o recomendado é que as imagens tenham no mínimo 300DPI.

Caso você esteja desenvolvendo algum trabalho que será impresso e também publicado na web, crie o projeto em 300DPI e quando ele estiver finalizado reduza a resolução para 72DPI e salve para web.

Fabiano Gomes da Silva
3

Olá

Marcelo, Obrigado pela resposta.

Minha dúvida foi esclarecida…só um detalhe trabalhei por 5 anos em uma grande empresa na área de Impressão Digital uma das maiores do Brasil e nunca ninguém me falou disso lá, tinha dezenas de designer, webmaster e um monte de outras pessoas da area de criação. Nunca imaginei isso. Parabéns novamente pelo artigo. Espero que essa dúvida solucionei de outras pessoas também.

Bem bacana. Agora já tenho uma dica a mais quando estiver terminando meu projeto de newsletter. Valeu.

Obrigado.

Precisando de nós, entre em contato.

Fabiano Gomes da Silva
CEO do EmpregaTI.
http://www.empregati.com.br

Any Zamaro (Equipe Virid)
4

Olá Marcelo!

O seu post está de parabéns e tenho certeza que foi muito útil para todos os leitores. Gostaria de comentar também que a Virid desenvolveu um estudo mais ou menos parecido com esse que você citou, a Campaign Monitor é sempre uma boa referência, fizemos testes com diversos clientes de emails! É um estudo bem bacana!

Pra quem se interessar, basta acessar o blog: http://emailmarketing.virid.com.br/ e fazer a busca que deseja!

Agradeço a oportunidade,
Um abraço!

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">