Como designers e desenvolvedores, um dia seu cliente solicitará um modelo de e-mail para seu tipo de 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 a 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 e-mail em HTML é o fato de que todos os estilos CSS devem ser feitos em linha. Em qualquer outro caso, este é um grande não-não. Mas, como há muito pouco suporte para CSS externo e até mesmo 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.
Índice mostra
O design
A estrutura
O estilo
O conteúdo
O estilo embutido
Corpo
Mesa
Primeira linha - cabeçalho
Segunda linha
Terceira fila
Quarta Fila
Quinta Linha – Rodapé
Palavras Finais
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.
Ok, agora vamos adicionar algum CSS dentro do conteúdo do documento. Não é nada sofisticado, 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.
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 neste 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 no código, defini a largura para todas as três imagens apenas para garantir que seu tamanho seja definido.
Há algo que eu preciso que você esteja extremamente ciente: as imagens são ótimas para e-mails, desde que sejam a: tamanho pequeno 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 desse e-mail precisa 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 é: use sempre uma imagem pequena com alt tag!
<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 e-mail HTML. É o que faz a aparência do e-mail, como você pode ver até agora, este e-mail não parece tão bonito assim. Vou quebrar esta parte em pedaços pequenos para que não fique muito pesado.
Você também pode gostar de: 7 dicas úteis para tornar sua linha de assunto de 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>
Mesa
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 embutido 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, por isso estou me certificando de que você pode 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.
Dentro da linha, há, mais uma vez, apenas uma célula que se estende por duas colunas. Esta célula está sendo ligeiramente manipulada 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 largura e 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 Fila
Esta é de longe a seção mais estilizada deste modelo de e-mail em 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 alterações de estilo. Primeiro, a própria célula está recebendo um novo plano de fundo e cor de texto. Em seguida, o link dentro de seu cabeçalho é 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> <plwptoc12">Fifth Row – Footer<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> <plwptoc12">Fifth Row – Footer
E, finalmente, o rodapé. Há muito pouco acontecendo aqui; apenas algum espaçamento via preenchimento e é isso!
<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Palavras Finais
Este tutorial é um pouco longo, mas espero que agora você entenda o que é necessário para criar um modelo de e-mail HTML do zero. Não é um conceito complicado, mas pode ser tedioso. Agora, é a sua vez de sair e começar a fazer e-mails incríveis e sofisticados! Você pode combinar várias técnicas de criação de um modelo de e-mail para torná-lo mais exclusivo.
Este artigo foi escrito por Hannah Butler. Ela trabalha como desenvolvedora web e designer. Além disso, ela gosta de compartilhar sua experiência na forma de artigos. Nesse caso, ela tem sua própria seção no site WriteMyPaper4Me.co. No futuro, ela vai começar a escrever um blog para descrever seus métodos de trabalho para outras pessoas.
