Você gostaria de criar seu próprio template de newsletter, mas têm pouca experiência (ou nenhuma) em linguagem de programação e códigos? Este artigo pode ser de muita ajuda na criação de uma newsletter básica.
Vou tentar dar instruções claras e não muito técnicas, no entanto, não se preocupe, porque você poderá baixar o arquivo com o html e as imagens no final do artigo, e você poderá brincar um pouco com o código!
Primeiro temos um arquivo html básico com as primeiras linhas de código, se você abri-lo com um programa como o Dreamweaver o código será exibido por padrão:
Dentro da tag title, vamos inserir um título para a campanha, por exemplo: <title>Minha newsletter</title>, e em seguida, antes de fechar a tag head, vamos colocar estilos CSS que dão instruções para a campanha e irão melhorar sua exibição, esses estilos podem ser modificados conforme necessário. O código ficaria assim:
Em seguida, temos a tag body, entre as quais estão inseridas as informações que serão exibidas pelos clientes de e-mail dos usuários. Como estes são muitos (e funcionam de forma diferente, afetando a exibição dos emails) é melhor não exagerar em regras CSS, para aumentar as chances de que a mensagem seja exibida corretamente, por exemplo no gmail, yahoo, hotmail, etc. Podemos localizar dentro de "body" várias regras para isto:
O mais indicado ao criar uma newsletter é usar tabelas, definindo a altura e a largura de cada uma, para garantir que a mensagem será exibida corretamente. Se queremos uma determinada cor de fundo é melhor usar uma tabela que ocupe a totalidade da área, por isso, neste caso, vamos usar as seguintes propriedades (você pode mudar a cor, alterando a propriedade bgcolor utilizando outro código html com a cor desejada):
Também especificamos o tipo de fonte que o usuário irá visualizar no email, como eu disse antes, é melhor usar estilos em cada tabela, mesmo em colunas, por vezes, repetindo o mesmo estilo. É melhor ser redundante e ter tudo sob controle nestes casos. Dentro da tag table vamos inserir as tags tr (linhas) e td (Colunas), para ordenar as informações. A primeira mensagem é " Se você não puder ver corretamente este email, visite a versão Web ", sempre é aconselhável oferecer aos usuários esta opção. O link usa a função web_version
Em seguida vamos inserir um novo tr e td, dentro colocaremos uma nova tabela (Colocar uma tabela dentro de outra é uma boa maneira de usar uma estrutura medianamente complexa e prevenir problemas de exibição). Esta tabela contém as principais informações.
Na verdade, para obter uma newsletter com margens adequadas para a informação, podemos inserir outra tabela dentro desta, novamente com tag align="center" mas com uma largura menor, o que ficaria dessa forma:
Para ter uma margem maior ou menor (também entre margens de diferentes elementos) será preciso gerar uma coluna com uma altura definida, dessa forma:
Chegamos no cabeçalho da mensagem, neste espaço, você pode escrever o nome da empresa, ou simplesmente inserir uma imagem com o logotipo desejado. Se a imagem contém um link para uma página web, recomenda-se inserir a tag border="0", para evitar ver uma borda azul na imagem, que é exibida por padrão em alguns softwares de email. Também é importante que cada imagem contenha um texto alternativo, alguns usuários podem ter desativada a exibição padrão de imagens e graças a este texto poderão saber o que está sendo enviado.
O passo seguinte é o título da newsletter, com uma margem superior e inferior, por isso vamos usar o método explicado anteriormente, uma coluna que irá gerar um espaço (no meu caso, 15 pixels) para para títulos iremos usar a tag para cabeçalhos "h2"
Inserindo em baixo a imagem principal da newsletter, neste caso, com 560 px de largura:
Agora vamos inserir o conteúdo principal!
Neste exemplo, temos apenas um artigo principal, mas certamente Você poderá adicionar quantos você precisar, copiando e colando o código.
No final do conteúdo, vamos incluir também um rodapé, para incluir os dados da empresa/site, e também um link de cancelamento, (o que é sempre recomendável), tudo isso dividido por uma simples linha, para manter o estilo limpo da nossa newsletter:
Depois disso deveremos fechar as tabelas (mesmo as que estiverem dentro de outras tabelas), exceto a tabela principal, que adiciona o fundo cinza. Vamos colocar uma última coluna em baixo com avisos legais, usando uma fonte pequena, e, em seguida, será preciso terminar de fechar a tabela principal.
E isso é tudo, um template de newsletter explicado passo a passo!
Como eu mencionei no início deste artigo, eu procurei não adicionar uma explicação muito técnica, de modo que alguns detalhes foram ignorados.
No entanto, se você tem alguma dúvida sobre quais estilos são melhores, se deseja dicas sobre templates de newsletters, recomendo que leia estes outros artigos que estão disponíveis em nosso blog.
Falando seriamente sobre templates de newsletter
Espero que este artigo tenha sido útil para futuras campanhas de email marketing e como prometido, você poderá baixar esse template.