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...
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...
postado por anjosarda às
3:03 PM
2 Comentários
