Como criar um email com apenas HTML

A melhor forma de entender qualquer processo é realizá-lo desde o começo,hoje faremos isso com o design de e-mails,construindo um modelo de e-mail em HTML, do zero.

O Pontapé Inicial

Para começar, gostaria de mencionar de onde eu consegui meus recursos.

Os belos ícones 2D são do Pierre Borodin lá no Dribbble
As fontes usadas foram a Oil Can, Source Sans Pro e Mission Script
Os ícones de mídia social são da Metrize Icons

Mão na massa

Para começar, você precisará iniciar o documento HTML do seu e-mail com a estrutura padrão do HTML:

Com isso, podemos começar a construir o resto da nossa estrutura.

Criando o Corpo e a Tabela Principal

Primeiro, adicionaremos a estrutura básica do nosso e-mail, começando pela tag <body> Atribuiremos o valor zero (0) para as margens e espaçamentos internos (padding), para evitar qualquer espaço inesperado.

Também adicionaremos uma tabela de largura 100%. Ela se comportará como a verdadeira tag <body> do nosso e-mail,porque a estilização dela (tag <body> ) não é totalmente suportada. Se você quiser adicionar alguma cor de fundo ao “corpo” do seu e-mail, você terá de aplicar a essa tabela.

Configure os atributos cellpadding e cellspacing para zero, de modo que, mais uma vez, não obtenha qualquer espaço inesperado.

Nota: Manteremos o atributo border="1" em todas as nossas tabelas, assim, poderemos ver o esqueleto do nosso layout enquanto o construímos. Nós removeremos esse atributo, logo ao final, usando os comandos Pesquisar & Substituir.

Agora, posicione e centralize uma tabela de 600px de largura dentro da tabela envoltória. 600px é a largura máxima segura para que seus e-mails possam ser visualizados corretamente, na maioria dos clientes de e-mail web e desktop, e na maioria das resoluções.

Configure essa largura usando HTML ao invés do CSS, usando o atributo width. A regra de ouro no desenvolvimento de e-mails em HTML é: Se um atributo ou elemento existir no HTML, use-o ao invés da propriedade CSS.

Nós substituiremos nossa saudação ‘Olá!’ por essa tabela:

Também adicionamos uma propriedade de estilo em linha, que configura a propriedade border-collapse para collapse. Se não fizermos isso, as novas versões do Outlook adicionarão um pequeno espaço entre nossa tabela e nossa borda.

Criando a Estrutura e o Cabeçalho

Em nosso design, podemos ver que o e-mail é dividio em três seções lógicas, assim, criaremos uma linha para cada uma delas.

Dupliquemos a linha solitária que já criamos, para que tenhamos um total de três linhas. Alterei o texto dentro delas para facilitar a identificação de cada uma.

Agora, coloriremos cada uma, igual ao design. Como bgcolor é um atributo HTML válido, nós o usuaremos para configurar a cor de fundo ao invés de fazê-lo através do CSS. Sempre lembre de usar todos os seis caracteres da representação hexadecimal, uma vez que o atalho dos três caracteres nem sempre funcionará.

Certo, agora, focaremos na Linha 1. Ajustaremos o espaçamento interno para, então, adicionar nossa imagem.

Usando Espaçamento Interno

Quando usarmos espaçamento interno em e-mails, sempre devemos especificar cada um dos valores (top, right, bottom e left), caso contrário, poderemos acabar com problemas inesperados (ex: padding: 10px 10px 8px 5px; ), mas, se ainda estiver tendo problemas, talvez queira escrever a forma completa ( padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px; ).

Se estiver com problemas piores que não foram resolvidos da forma anterior (por exemplo, sua plataforma de envio remove seu CSS), simplesmente, não o use. Prefira usar células vazias para criar espaço. Não há necessidade de se usar GIFs espaçadores, apenas tenha certeza de adicionar style="line-height: 0; font-size: 0;" à célula, insira um dentro dela e especifique as altura e largura. Eis um exemplo:

Também perceba que é seguro usar espaçamento interno em tags td , mas não em divs ou ps. Eles se comportam de forma bem imprevisíveis.

Assim, adicionaremos um pouco de CSS em linha para gerar espaçamento interno na célula. Depois, adicionaremos nossa imagem, configuraremos o texto alternativo e colocaremos o atributo style="display:block;", que é uma forma comum de resolver o problema de espaços abaixo de imagens, que alguns clientes de e-mails adicionam. Centralizaremos nossa imagem adicionando align="center" à nossa tag td. Também adicionaremos um atributo alt, que é muito importante, uma vez que, na maioria das vezes, as imagens em nossos e-mails não serão carregadas automaticamente.

Nota: Se o conteúdo do seu cabeçalho for, realmente, importante para sua mensagem, não use um cabeçalho feito totalmente com imagem. Lembre-se, imagens são bloqueadas por padrão pela maioria dos clientes de e-mails, assim, se há algum aspecto do seu conteúdo que seja crucial, nunca o inclua em uma imagem. Nesse exemplo, porém, o meu cabeçalho é bem supérfluo.

Criando a Área do Conteúdo

Primeiramente, adicionaremos espaçamento interno na célula central para que a tabela interna tenha algum espaço ao redor, como em nosso design.

Agora, adicionaremos uma tabela com três linhas para nosso conteúdo principal - um para a chamada principal, uma para o texto introdutório e uma para a linha com duas colunas. Configuraremos essa tabela com largura igual a 100% ao invés de usar um valor fixo em pixels, uma vez que isso nos ajudará mais à frente, quando tivermos de tornar nosso e-mail em responsivo. Se você sempre configurar as larguras em pixels, você terá inúmeros valores que terá de sobrescrever nas media queries. Se suas tabelas internas usam percentuais, então, quando ajustar a largura do elemento pai, tudo irá ajustar automaticamente.

Agora, adicionaremos nosso conteúdo e também adicionaremos o espaçamento interno para a célula central.

Adicionaremos, agora, nossas duas colunas de conteúdo em nossa Linha 3. Já que queremos uma “margem” entre essas duas células, porém, margin não é suportado, criaremos uma tabela com três colunas, deixando a célula central em branco entre as outras duas colunas.

Embora eu seja adepto dos percentuais, quando temos conteúdo com um tamanho específico, pode ser bem complicado converter esse valor para percentual (nesse caso, as colunas teria 48.1% de largura, o que seria bem confuso). Por isso, e já que nossas duas imagens tem 260px de largura, com uma célula de 20px de largura no meio (Esses valores totalizarão 540px, que são os 600px de largura de nossa tabela, menos os 30px de espaçamento interno de cada lado). Tenha certeza de configurar suas font-size e line-height e adicione um na célula margem.

Também configuraremos o atributo valign para “top” para ambas as células, assim, elas alinharão verticalmente, mesmo que uma coluna tenha mais texto que a outra. O valor padrão do alinhamento vertical é “middle”.

Adicionemos, agora, nossas imagens e conteúdo nas colunas. Como precisamos de muitas linhas, vamos inserir mais outra tabela porque não podemos usar os atributos colspan ou rowspan. Também adicionaremos um pouco de espaçamento interno entre a imagem e o texto em cada coluna.

Nós configuramos a largura das imagens, usando HTML, como sendo 100% da largura da coluna. Isso serve para quando formos ajustar a parte responsiva do e-mail, onde só precisaremos alterar a largura do elemento pai. Teremos de sobrescrever a altura em pixels, porque usar style=”height: auto”não funcionará em todos os clientes (leia-se, Outlook). Então, configuraremos em pixels mesmo. Isso significa que teremos de usar a propriedade height: auto!important nas imagens que usarmos nas media queries, para sobrescrever o valor em pixels. Poderíamos fazer isso com uma única classe, mas como não podemos usar, teremos de fazer assim. Quanto menos coisas tivermos de sobrescrever, melhor.

O Rodapé

Agora, adicionaremos o espaçamento interno ao nosso rodapé.

Dentro dessa célula, colocaremos mais outra tabela para obtermos nossas duas colunas.

Criaremos mais outra tabela para nossos ícones de redes sociais. Configuraremos a célula pai para align=”right”. Tenha certeza de configurar border=”0” nos links dessas imagens (para evitar a borda azul de âncoras) e não esqueça de aplicar o display:block.

entre elas. Configuraremos essa célula com 75% de largura e a outra com 25%.

Agora é só substituir o border=”1” por border=”0” para desabilitar as bordas e ver como ficou.E acabamos! Está tudo pronto!

O resultado final:

Precisando de um site?

A melhor forma de entender qualquer processo é realizá-lo desde o começo, hoje faremos isso com o design de e-mails,construindo um modelo de e-mail em HTML, do zero.

CleanDesign, agência de webdesign.

Ter um site é colocar sua empresa na internet. Construir estratégias para que a imagem da sua empresa seja agregada a um valor é presença online. Um site projetado profissionalmente, é fundamental para aumentar as vendas, impulsionar os resultados e expandir seus negócios. Se você quer ser levado a sério como empresa, precisa levar a sério a tarefa de assumir negócios. Nada se conecta mais com seus clientes online do que seu próprio site profissional.

Quais as vantagens para uma empresa?

Está em dúvida se vale a pena investir na presença online da sua empresa? Veja as principais vantagens dessa prática:

Facilidade em ser encontrado por novos clientes;
Aumento da credibilidade e reputação da empresa;
Auxilia na fidelização dos clientes atuais;
Divulgação dos trabalhos desenvolvidos;
Crescimento da empresa pela valorização da marca;
Desenvolvimento de ações de marketing a um custo mais baixo;
Expansão da visibilidade da sua empresa para um público maior;
Maior interação com seus clientes e, assim, melhor compreensão sobre seus perfis.

Você sabia que a CleanDesign pode ajudar você e sua empresa a ter mais e melhores resultados com a internet? Clique no botão abaixo e conheça os nossos pacotes de Webdesign Premium, com tarifas únicas e sem mensalidades.

Webdesign Premium

Ganhe dinheiro encurtando links!

E se você pudesse receber dinheiro pelos links que você compartilha nas redes sociais? Cadastre-se agora mesmo na exe.io e comece a faturar encurtando os seus links. ;)