HTML em e-mails

Como havida dito, quando isto aqui estiver muito parado vou postar um tutorial. Entenderei se nenhum dos habituais leitores comentar esta postagem.

---

Me perguntaram outro dia (na verdade já faz algum tempo) como formatar e-mails usando HTML para fazer aqueles e-mails informativos com uma aparência bem profissional. Eu tinha apenas uma noção de como era feito, achei interessante pesquisar e venho aqui apresentar os resultados.

Precisaremos de basicamente duas coisas para isto: um programa de edição e envio de e-mails, e algum conhecimento em HTML. Mostrarei também como usar o Dreamweaver e o Photoshop para formatar o conteúdo do e-mail.

Bem, primeiramente temos que ter o programa de edição e envio de e-mails. Usarei nos exemplos o Thunderbird, porque ele é mais fácil de configurar e usar que o Outlook. O e-mail que usarei será um do Gmail. Caso você não tenha estes dois ítens, crie um e-mail do gmail e baixe o Thunderbird clicando nos links abaixo:
http://mail.google.com/
http://br.mozdev.org/thunderbird/




Depois de instalado o Thunderbird, abra-o e vá em
Arquivo > Novo > Conta... ^[1]
Selecione Gmail, Avançar, escreva o nome/nick que você quer que apareça nas mensagens, e logo abaixo escreva o seu e-mail do Gmail. Clique novamente em Avançar, depois em Concluir.
Feito isso dê um Ctrl+N, ou vá em
Arquivo > Novo > Mensagem
Preencha os campos com um outro endereço de e-mail seu em "para", um assunto qualquer , uma mensagem qualquer, e clique em "Enviar agora". Depois de um tempo carregando ele irá pedir a senha do seu e-mail, escreva sua senha, deixe a opção de memorizar a senha marcada e dê ok. Você pode também configurar seu e-mail do Gmail no Thunderbird seguindo as instruções dadas pelo Google no seguinte endereço: [link]
Novamente dê um Ctrl+N. Aberta a caixa onde redigi-se a mensagem, clique na caixa de texto e vá no menu Inserir > Código-fonte HTML... ^[2]
Este é o campo onde coloca-se o código HTML do e-mail, que será editado apenas antes de ser inserido no e-mail através desta opção.

A seguir mostrarei como de fazer o design do e-mail em si, como resolver alguns problemas como o não tão bom desempenho do CSS em e-mails, como usar o Photoshop para construir um layout clicável, etc.

Segundo o resultado de minhas pesquisas em diversos serviços de e-mail, o melhor tamanho para se formatar o design do e-mail é 500 pixels de largura. A altura pode ser de acordo com a preferência de cada um e a quantidade de conteúdo (só não faça uma altura enorme), mas creio ser esta a melhor largura pois nem todos os e-mails são abertos em um pedaço grande da páginas, e uma largura muito grande pode vir a gerar barra de rolagem lateral no navegador do usuário (ou na caixa de leitura do programa de e-mail).

Agora vem uma notícia bombástica para aqueles preferem respeitar os padrões do WC3... Usar CSS para posicionar os elementos no e-mail pode não ser a melhor opção. Em muitos casos os parâmetros de posicionamento não são respeitados e o design sai todo desconfigurado. Como resolver tal problema?! Que profiram ofensas contra minha pessoa os xiitas de web standards, mas o que sugiro é que vocês usem tabelas para posicionar. Os testes que fiz com tabelas até então funcionaram bem, esta é uma das soluções mais viáveis para resolver o problema do CSS nos e-mails. Dêem uma olhada neste exemplo tosco que eu fiz de um posicionamento com tabelas, insiram o código da página em um e-mail depois mandem para algum de seus endereços. Ah, escolham a opção de enviar apenas o formato original para não correr o risco do serviço de e-mails de quem recebe a mensagem optar por abrir a mensagem de texto comum. Aliais, é bom lembrar quem nem todos os e-mails lêem e-mails com HTML, então dê uma pesquisada se os e-mails das pessoas para quem você quer mandar mensagens suportam HTML nos e-mails. Enfim, continuando... Vejam o resultado do e-mail formatado com uma tabela (exemplo acima), depois acessem esta página aqui, copiem o seu código fonte e repitam o teste. Fica claro que CSS não é a melhor opção se você tiver à sua disposição um bom editor WYSIWYG^[3].

Com o Dreamweaver, você pode fazer uma tabela com a ferramenta indicada na figura.

Depois as células com a ferramenta do lado (direito).
Enfim, existem várias apostilas e tutoriais por ai explicando como construir layout no Dreamweaver com tabelas, este não é o objetivo desta postagem, até porque para fazer páginas eu não aconselho de forma alguma o uso de tabelas para posicionar, apenas neste caso específico tabelas vem a ter utilidade no posicionamento, no entanto existe uma série de razões porque elas não são mais recomendáveis para isto.

Outro jeito possível, é criar o design no Photoshop, depois salvar a imagem inteira e usar o mapeamento de área clicável no Dreamweaver. Basta importar a imagem, selecioná-la, marcar as áreas clicáveis com as ferramentas indicadas nesta imagem depois selecionar as marcações e preencher os campos dos links.
Lembrando que em todos os casos a largura recomendada é de 500 pixels.

Eu iria descrever também como fatiar a imagem no Photoshop para fazer o design, mas acho que vou deixar isto para o tutorial de como se fazer o design do site no Photoshop depois passá-lo para HTML e CSS, depois que tal tutorial estiver pronto postarei seu link no lugar deste parágrafo.

Espero que tenha sido útil...