Hoje vamos abordar um tema que certamente será muito útil para você:
Como verificar se um template de newsletter será exibido corretamente.
Dependendo das ferramentas que você usar para criar seu template, você pode encontrar mais ou menos problemas de exibição. Mais tarde, tenha em mente que muitas das ferramentas conhecidas não foram criadas para criar templates de newsletter, mas para páginas web.
Assim sendo é preciso ter cuidado especial porque o html empregado em uma página web nem sempre é compatível com todos os clientes de email e não será possível visualizar corretamente o template.
NOTA: Você também deve considerar que a interface da Mailrelay é um website, por isso a melhor forma de saber como sua campanha será visualizada é enviar emails de teste e analisá-la em diferentes clientes de email.
Quais são os principais aspectos que devem ser verificados?
Se você quiser ver de relance a compatibilidade de um template, Você pode revisar o código-fonte.
Não se preocupe, você não precisa necessariamente ser um especialista ou perito em programação, existem alguns pontos-chave que indicam possíveis problemas em um template de newsletter, e detectá-los é muito fácil:
1) Link para arquivos CSS externos
Isto é muito comum em páginas web, uma vez que permite a reutilização de estilos em várias páginas sem ter que duplicá-los. O problema é que o software de email não pode acessar esses arquivos externos de modo que os estilos serão perdidos. A solução é incluir os estilos CSS dentro do próprio código html do email, de modo que tudo será incluído no corpo da mensagem.
2) Links para arquivos JS externos
Outro aspecto comum é o uso de arquivos de código JavaScript, que podem ser utilizados para vários fins, como animações, transições, sliders, etc.
O problema é duplo: Primeiramente pois é um arquivo externo que não pode ser utilizado, além disso os clientes de email por razões de segurança não poderão executar o código JavaScript incluído.
A solução é não usar código JavaScript
3) código HTML "web"
Os dois pontos acima podem nos dar uma boa idéia do que precisa ser alterado no template de newsletter.
E até certo ponto são solucionáveis. Mas agora, observe a imagem acima.
Você verá muitas tags como header , main , div , id , class , etc. isto pode ser um problema, este é um HTML concebido para processar uma página web, não um email. Deveríamos estar vendo coisas como table, tr, td, style e de um modo geral, um código mais clean.
Editar este tipo de código para que funcione corretamente como uma newsletter é bastante complicado e é difícil assegurar que será exibido sem erros, não é uma idéia muito boa tentar fazer isto.
A verdade é que é melhor começar novamente, com um novo código, sempre que seja possível.
4) Estilos no "head"
Isto é muito menos problemático, mas ainda pode dar muita dorde cabeça. Se você observar a imagem acima, temos uma tag de style dentro do cabeçalho do template, "head".
Serão definidos diferentes configurações que serão aplicadas ao template, por exemplo:
No editor da Mailrelay o template é exibido corretamente, e, em muitos clientes de email também, mas no Gmail:
O Gmail parece ter outros planos para o template, exibindo outra cor de fundo e diferenças no texto. Basicamente, o webmail não está aplicando os estilos, bem, não é que não esteja aplicando, mas o Gmail elimina a tag style dentro do head.
Assim sendo, é melhor colocar esta tag dentro do corpo, por exemplo:
Isso irá fazer com que os estilos não sejam removidos, mas ainda assim, é bastante provável que alguns clientes de email não consigam aplicá-los.
Por Quê?
Porque estamos usando seletores, por exemplo: td.titulo
Aqui estamos indicando que o sistema deve aplicar esses estilos quando encontrar um td de uma classe, class, de nome título, você pode ver um exemplo:
O problema é quando o cliente de email não pode entender estas Indicações
Como poderíamos fazer, então?
Bem, a opção mais segura e amplamente suportada pela maioria dos clientes de email é usar estilos inline
O que são estilos inline?
São estilos inseridos dentro do próprio elemento onde deve ser aplicado, por exemplo:
Como você pode ver, dentro da tag td há uma tag style com os estilos diferentes estilos que devem ser aplicados.
Aqui não há erro possível, o elemento inclui os estilos que você deseja aplicar, de modo a ser visto, por exemplo, no Gmail:
A solução mais eficaz está clara, não tem erro. É preciso incluir dentro de cada elemento os estilos que o elemento terá.
Este ponto, se for considerado ao criar o template de newsletter, não é muito complicado. Mas se for preciso editar o código quando o template já estiver pronto, o problema será bem mais complicado.
Isto será mais trabalhoso e irá demorar muito mais tempo. Ou seja, a solução mais eficaz é também a que irá dar mais trabalho.
Felizmente….
Existem ferramentas que fazem este trabalho automaticamente, quando usadas corretamente.
Como por exemplo Premailer
Uma ferramenta muito fácil de usar que irá modificar os estilos do template de newsletter para o formato inline.
O processo pode ser feito em três passos muito rápidos:
1) Copiar o código no campo "Paste HTM" as the source
2) Clicar no botão "submit"
3) E na página seguinte, no campo "Click to view the html results" será possível encontrar o código preparado, pronto para copiar e colar na Mailrelay
Muito fácil, não?
É sem dúvida uma ferramenta muito útil que pode ajudar a resolver muitos problemas de exibição em templates de newsletter.
Mas cuidado, a ferramenta não funciona em 100% dos casos, é incapaz de corrigir todos os problemas de todos os templates.
Também não irá alterar o código HTML base (que mencionamos no ponto 3), corrigir isto seria mais difícil. Mas para o que explicamos pode funcionar muito bem e facilitar muito sua vida.
Antes de encerrar eu gostaria de recomendar um outro artigo que fala sobre isto, que você pode encontrar neste link.
Com estes dois artigos, você tem muitos recursos para solucionar vários problemas nos seus templates de newsletter.