13 dicas para newsletters em HTML
Desenhar e enviar newsletters em HTML pode ser complicado. O código lido pelos sites e aplicativos de e-mails são ainda muito limitados, comparado com navegadores web. Ou seja, você precisa constantemente adaptar o seu modo de criar templates para e-mails. Eis algumas dicas de como você pode melhorar suas newsletters.
Use estilos CSS inline
Pode esquecer usar páginas CSS externas ao enviar e-mails personalizados. A melhor solução é declarar o CSS dentro dos seus tags HTML. Como por exemplo: <p style=”color:#000;”>. Se você declarar a folha de estilos no cabeçalho, aplicativos online (como o Gmail) não vão conseguir fazer aquilo que você pediu.
Limite a largura do seu template
Quando estiver criando um template para suas campanhas via e-mail, não esqueça que muitos lêem suas mensagens em apps online (Gmail, Hotmail, YMail, etc). Estes geralmente possuem uma barra lateral que consome um certo espaço. Procure não passar de 600 pixels de largura.
Evite de usar imagens demais
Muitos dos aplicativos de e-mails bloqueiam imagens e dão a opção ao usuário liberar a visualização, então procure não depender demais de imagens para que seus usuários não vejam um e-mail em branco.
Ofereça um link para cancelar a assinatura
Tenha bom senso: não force seus leitores a receberem seus e-mails caso não queiram. Seria como se um vendedor trancasse a porta assim que você entrasse na loja. Além do mais, não oferecer uma opção de cancelar pode ter seu newsletter caracterizado como spam.
Ofereça uma versão web
Algumas vezes o código chega zoado ao usuário. Ofereça um link para visualizar o e-mail online que pode ter mais recursos.
Não use Flash
Quase todos os aplicativos de e-mail não conseguem ler objetos em Flash, então evite a todo custo inserir algo assim na mensagem.
Sugira que seus leitores entrem em contato
Fazendo isto, você os convida para que tenham um relacionamento mais próximo com você, além de que ajuda a evitar que suas mensagens vão para a pasta de spam do usuário.
Não use formulários
Como no Flash, a maioria dos aplicativos de e-mail não conseguem renderizar formulários. Prefira utilizar um link para um formulário online.
Configure o tamanho de imagens
Adicionando a configuração de width e height em suas imagens ajuda a manter o layout mesmo quando imagens não são mostradas.
Use texto alternativo nas imagens
Caso as imagens não apareçam, o usuário pode pelo menos saber o que ele não está visualizando. Use a tag alt em suas imagens.
Não use PNGs com transparência
Alguns aplicativos não mostram transparência de PNGs, outros nem sequer mostram PNGs, então por que colocar? Infelizmente, os aplicativos ainda tem muito a evoluir.
Não use imagens em CSS
Imagens de fundo pelo CSS (como background:url(imagem.jpg);) não funciona nos aplicativos, então evite. Se precisar de um fundo, prefira usar uma cor chapada.
Tenha uma versão em texto
Ofereça uma versão em texto simples do seu e-mail para os que não conseguem visualizar HTML.
Uma tabela interessante sobre a compatibilidade de códigos HTML e CSS nos diferentes softwares e aplicativos online de e-mails é este do Campaign Monitor.
E caso você tenha interesse em receber uma newsletter pra servir de inspiração, que tal se cadastrar no nosso, o Exército do Design? Lá temos sorteios, artigos exclusivos e muito mais!
Adaptado de: Designer Daily
Quem leu isto também leu:
Criador e editor-chefe do Design Blog, atualmente é web designer freelancer. Nerd desde pequeno, ama tudo relacionado a internet, é apaixonado por design e está na área há 11 anos.
Acesse seu site Siga no Twitter
Pingback: Top 10 – Links da semana | Mira Criativa