Como criar um modelo de e-mail com HTML e CSS?

Como designers e desenvolvedores, um dia seu cliente solicitará um modelo de e-mail para seu boletim informativo. Devo dizer que os modelos de e-mail não são tão empolgantes simplesmente porque há uma grande lacuna no suporte para HTML e CSS. Você imaginaria que na era de hoje não seria o caso, pois estamos avançando com HTML5 e CSS3. No entanto, lamento dizer que, quando se trata de renderizar e-mails, esse não é o caso.

A primeira coisa a ter em mente ao criar um modelo de email HTML é o fato de que todos os estilos CSS devem ser feitos inline. Em qualquer outro caso, este é um grande não-não. Mas, como há muito pouco suporte para CSS externo e até CSS na cabeça, inline é a maneira de fazer isso. Além disso – e tenho certeza que você já ouviu falar sobre isso antes – o modelo deve ser criado com TABLEs, não DIVs. Mais uma vez, isso é lamentável, mas é o caminho a percorrer. Dado que os e-mails não são tão grandes no geral, projetá-los e criá-los não é difícil – é apenas monótono em comparação com o design da web ou móvel.

O design

 Recomendado para você: Como acelerar seu processo de design usando estruturas CSS modernas?

A estrutura

No corpo da página HTML, cole o código abaixo. Simplesmente olhando para o código, você pode dizer que não há muito na estrutura deste e-mail. Isso é realmente uma coisa muito boa, pois os e-mails nunca devem ser complexos. Até agora, há também uma quantidade minúscula de estilo apenas o que especifica a largura total da tabela e que não há nada entre as células da tabela.

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

O estilo

Ok, agora vamos adicionar um pouco de CSS dentro do conteúdo do documento. Não é nada extravagante apenas uma redefinição e uma definição de cor e estilo de link. Eu teria muito cuidado com o CSS que você coloca aqui, pois muitas vezes é ignorado pelos clientes de e-mail.

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

O conteúdo

Chegou a hora de encher as mesas de conteúdo. Você pode encontrar as imagens dentro do arquivo fornecido acima – no início deste tutorial. Agora você deve preencher todo o texto e imagens que devem estar dentro deste e-mail. Observe que no tutorial você não precisa vincular os hiperlinks a nada e também pode usar suas próprias imagens. Até agora, dentro do código, defini a largura para todas as três imagens apenas para ter certeza de que seu tamanho está definido.

Há algo que eu preciso que você esteja extremamente ciente: as imagens são ótimas para e-mails, desde que sejam a: pequenas em tamanho e b: tenham uma tag alt que as descreva bem. Tenho certeza de que você sabe que, para que as imagens apareçam em um e-mail, o destinatário deste e-mail deve permitir que as imagens apareçam. Se não o fizerem, não há nada que lhes diga o que devem esperar. Também é um problema de acessibilidade se você não fornecer uma descrição para usuários cegos. No entanto, isso é outra história. Então, a lição é: sempre use uma imagem pequena com uma tag alt!

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

O estilo embutido

A última coisa que faremos é fornecer o estilo CSS embutido para este modelo de email HTML. É o que faz a aparência do e-mail como você pode ver até agora, este e-mail não estava tão bonito assim. Vou dividir esta parte em pequenos pedaços para que não fique muito grande.

 Você também pode gostar de: 7 dicas úteis para tornar a linha de assunto do seu e-mail mais clicável.

Corpo

Primeiro, vamos definir a cor de fundo de toda a página de e-mail, bem como o tamanho e a cor da fonte padrão.

 <body bgcolor="#f7d973" ></body>

Tabela

A próxima coisa a fazer é centralizar o conteúdo do e-mail e fornecer sua própria cor de fundo para que se destaque.

Primeira Linha - Cabeçalho

Há muitas coisas acontecendo dentro da célula da primeira linha. Observe que o estilo inline está no <td> e não no <tr>. O que estamos fazendo aqui é uma nova cor de fundo para combinar com a do logotipo. Além disso, há algum preenchimento e alinhamento também. Agora, estou alterando a cor do texto para branco porque o texto alternativo será preto por padrão. Você não poderá vê-lo neste plano de fundo, então estou me certificando de que você possa alterar a cor do texto. Pode parecer inútil para você, mas como eu disse isso é muito importante para pessoas que não têm imagens permitidas por padrão.

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

Segunda linha

Dentro da linha, há, mais uma vez, apenas uma célula que abrange duas colunas. Esta célula está sendo manipulada um pouco, adicionando algum preenchimento a ela e uma linha de quebra na parte inferior para separar seu conteúdo da linha abaixo. Também temos uma grande manchete que está ganhando espaço nas margens. E, é isso para esta linha.

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

Terceira fila

Para ambas as células aqui estamos definindo a largura e o preenchimento. Eles são exatamente os mesmos para que as células sejam divididas uniformemente ao meio. Além disso, não há mais nada, pois as células são preenchidas com uma imagem e algum texto sobre ela.

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

Quarta linha

Esta é de longe a seção mais estilizada deste modelo de email HTML. Como você pode ver pelo código abaixo, há muita coisa acontecendo. Primeiro, toda a linha está recebendo uma nova cor de fundo e cor de texto para garantir que o texto esteja visível – assim como no cabeçalho. Tanto a primeira quanto a segunda célula e seu conteúdo estão recebendo exatamente as mesmas mudanças de estilo. Primeiro, a própria célula está recebendo um novo plano de fundo e cor de texto. Em seguida, o link em seu título é alterado para amarelo. Por fim, o último parágrafo está sendo sublinhado e, para adicionar alguma separação, uma margem também é adicionada. Como eu disse, a segunda célula e seu conteúdo estão recebendo exatamente a mesma estilização.

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <prsws_divider">