() translation by (you can also view the original English article)
Neste tutorial nós vamos dar uma olhada no framerwork Foundation para Emails da ZURB. Nós vamos configurá-lo, explicar o que vem no pacote e, em seguida, construir um simples e-mail responsivo.
Frameworks
Na metade do último ano eu me familiarizei com um par de frameworks e boilerplates para criação de emails HTML. Antes dessas ferramentas, o desenvolvimento atual sempre foi difícil para testar e corrigir, sem mencionar fazer emails responsivos.
Codificação de emails HTML é um animal muito diferente em relação à criação de uma página web normal. É como viajar no tempo para 1999. Nós precisamos usar layouts baseados em tabelas, estilos inline e acomodar clientes como apps desktop (Thunderbird, Outlook) e webmails (Gmail, Yahoo).
Para resolver este enigma e obter resultados confiáveis, temos duas opções:
- Siga qualquer um dos tutoriais de Nicole Merlin
- escolha um moderno framework de email HTML como Foundation para Emails
Para os fins deste tutorial, vamos obviamente com a segunda opção.
O que há na caixa?
A stack de e-mail ZURB fornece tudo em um pacote de solução para a criação de e-mails.
Consiste em:
- Gulp: um sistema de compilação para automatizar o fluxo de trabalho
- Inky HTML: para converter simples código para tabelas
- Sass: o popular pré-processador de CSS
- Inliner: para estilos inline
- BrowserSync: um servidor de teste para recarga
- Image Compression: para auto compressão de imagens
Foundation para Emails vai assistir seu código, compilando, incluindo os estilos em inline, então minificando o resultado, pronto para produção. Ele foi amplamente testado em muitos aplicativos de desktop e móveis; para a lista completa dos que tem suportado você pode verificar a seção de compatibilidade. Você também pode querer consultar o guia oficial ao começar com o framework.
Configurando o Projeto
Para todo o processo, Eu uso Windows 10, a versão 64 bit. Se você usa um sistema diferente você ainda será capaz de seguir em frente.
O stack trabalha com Node.js e seu gerenciador de pacotes npm. Para instalar Foundation para Emails nós abrimos nosso terminal, então nós usamos o comando:
1 |
npm install --global foundation-cli |
Em seguida, alterar o diretório para uma pasta do projeto (onde quer que você deseja executar este projeto) usando cd [project folder path]. No diretório do projeto o próximo comando deve ser:
1 |
foundation new --framework emails
|
Você vai ser perguntado "Como o projeto é chamado? (sem espaços)", neste ponto você entra com o nome do projeto, tecle enter, em seguida, sente por um momento enquanto as dependências do projeto são instaladas.
Ligue Seus Motores
Agora nós configuramos todos os arquivos de nosso projeto, nossos módulos Node estão instalados, e nossos componentes Bower estão instalados. Inicie o framework e o servidor, vá para a pasta do projeto e use o comando:
1 |
foundation watch |
O endereço web padrão (geralmente http://localhost:3000/) será aberto diretamente em seu browser assim que executá-lo. Você vai ver um template do novo email, está pronto para começar:
Src
Em sua pasta do projeto você vai encontrar (entre outras coisas) um pasta src. Nesta pasta você vai encontrar:
-
assets, estilos e imagens -
layouts, blocos de layout -
pages, a base do código HTML -
partials, partes reusáveis de html
A página index pode ser encontrada aqui: src/pages/index.html
Note: Se você não está familiarizado com Node.js, você pode querer verificar o guia para iniciante apenas para reforçar o que nós estamos fazendo:
Grids
Foundation usa um grid de doze colunas. É interessante notar que o espaço horizontal em um e-mail é geralmente estreito, especialmente quando o e-mail mudou para mobile, por isso é aconselhável a utilização de uma ou duas colunas apenas. Para mais e melhores práticas, confira o guia:
Foundation para Emails faz uso de Inky, a sua nova linguagem de template visa remover o markup complexo que as tabelas causam inevitavelmente. Estas são as tags Inky para nos ajudar a marcação das grids:
-
<container>: envolve o elemento -
<row>: envolve as linhas -
<columns>: o elemento de coluna para conteúdo real
Nós também podemos especificar o tamanho do grid com atributos small e large.
Esta é uma seção de coluna.
1 |
<container>
|
2 |
<row>
|
3 |
<columns small="12" large="12">Column One</columns> |
4 |
</row>
|
5 |
</container>
|
Este markup simples, quando compilado, nos dá o seguinte:
1 |
<table class="container"> |
2 |
<tbody>
|
3 |
<tr>
|
4 |
<td>
|
5 |
<table class="row"> |
6 |
<tbody>
|
7 |
<tr>
|
8 |
<th class="small-12 large-12 columns first last"> |
9 |
<table>
|
10 |
<tr>
|
11 |
<th>Column One</th> |
12 |
<th class="expander"></th> |
13 |
</tr>
|
14 |
</table>
|
15 |
</th>
|
16 |
</tr>
|
17 |
</tbody>
|
18 |
</table>
|
19 |
</td>
|
20 |
</tr>
|
21 |
</tbody>
|
22 |
</table>
|
Este exemplo separado é uma fileira de duas colunas (cada coluna desmorona a 12 de largura em pequenos pontos de interrupção, ficando 6 de largura para grande).
1 |
<container>
|
2 |
<row>
|
3 |
<columns small="12" large="6">Column One</columns> |
4 |
<columns small="12" large="6">Column Two</columns> |
5 |
</row>
|
6 |
</container>
|
Em essência, nós vamos usar um elemento <container>, com uma série de elementos <row> e <column> para montar nossa estrutura.
Montando Nosso Email
Agora nós entendemos o uso básico do Inky, vamos mudar o assunto do email. Em pages/index.html nós podemos mudar os seguintes detalhes para o cabeçalho do documento – você pode estar familiarizado com esta forma de "Front Matter", se você já usou YAML:
1 |
--- |
2 |
subject: Cake Poker Summer Tournament |
3 |
--- |
Logo Area
Para inserir uma imagem da logo nós usamos o padrão HTML <img> com uma <column>. O caminho para imagem da logo é relativa ao documento, na pasta assets. Eu também adicionei uma linha vazia acima da imagem em outra <row> com uma <column> vazia:
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
</columns>
|
4 |
</row>
|
5 |
<row>
|
6 |
<columns small="12" large="12"> |
7 |
<img src="../assets/img/logo.png" alt="Cake Poker logo"> |
8 |
</columns>
|
9 |
</row>
|
Texto de introdução
Eu então adicionei outro par de linhas dentro do <container>, com algum texto de introdução, uma recepção e o conteúdo do grande prêmio.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<p><strong>Our Dear Poker fan!</strong> We got news for you: the summer championship is coming soon. If you want to participate, please register your place before the 5th of June!</p> |
4 |
</columns>
|
5 |
</row>
|
6 |
<row>
|
7 |
<columns small="12" large="12"> |
8 |
<p>The grand prize is <strong>1 million euros</strong> and life time 10% online rakeback!</p> |
9 |
</columns>
|
10 |
</row>
|
Mais Imagens
Eu adicionei outra imagem sobre o torneio da cidade, de novo em relação ao documento.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<center>
|
4 |
<img src="../assets/img/london.jpg" alt="London picture"> |
5 |
</center>
|
6 |
</columns>
|
7 |
</row>
|
Observe que a tag <img> é envolvida em uma tag <center>. Isso desencadeia uma das classes de alinhamento do Inky, centrando nossa imagem sem nos preocupar com isso.
Detalhes
A seção de detalhes é um pouco mais envolvida, fornecendo mais informação sobre o evento. Para essa seção eu uso duas colunas por linha, cada uma explicando uma parte específica. Novamente, cada metade recolhe em uma coluna em telas de dispositivos móveis.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<p>Details about the tournament</p> |
4 |
</columns>
|
5 |
</row>
|
6 |
<row>
|
7 |
<columns small="12" large="6"> |
8 |
<p><em>London, Royal Hall of Gamblers</em></p> |
9 |
</columns>
|
10 |
<columns small="12" large="6"> |
11 |
<p>The perfect place for a modern poker championship.</p> |
12 |
</columns>
|
13 |
</row>
|
14 |
<row>
|
15 |
<columns small="12" large="6"> |
16 |
<p><em>Markuee Hotel</em></p> |
17 |
</columns>
|
18 |
<columns small="12" large="6"> |
19 |
<p>Nearby four star **** accomodation with full service and great food.</p> |
20 |
</columns>
|
21 |
</row>
|
22 |
<row>
|
23 |
<columns small="12" large="6"> |
24 |
<p><em>Massage</em></p> |
25 |
</columns>
|
26 |
<columns small="12" large="6"> |
27 |
<p>A free service for all tournament players.</p> |
28 |
</columns>
|
29 |
</row>
|
30 |
<row>
|
31 |
<columns small="12" large="6"> |
32 |
<p><em>Buy-in</em></p> |
33 |
</columns>
|
34 |
<columns small="12" large="6"> |
35 |
<p>500 + 50 GBP</p> |
36 |
</columns>
|
37 |
</row>
|
Botão
Finalmente eu adicionei um botão de Registro para se inscrever. Eu usei o componente fornecido <button>, centralizando-o com a tag <center>.
1 |
<row>
|
2 |
<columns small="12" large="12"> |
3 |
<center>
|
4 |
<button href="http://webdesign.tutsplus.com">Register</button> |
5 |
</center>
|
6 |
</columns>
|
7 |
</row>
|
8 |
<row>
|
9 |
<columns small="12" large="12"> |
10 |
</columns>
|
11 |
</row>
|
Versão Compilada
Como você montou e mudou coisas, seu projeto será continuamente atualizado no browser. O código compilado pode ser encontrado na pasta do projeto dist, os principais arquivos sendo index.html e css/app.css.
Compilando o Email Finalizado
Quando estamos satisfeitos com o que temos, podemos usar este comando para o código inline com estilos e comprimir a coisa toda:
1 |
npm run build |
Após o processo de compilação, o que você encontrará na pasta dist então é uma versão minified, pronta para a produção, mas certamente não é adequado para qualquer alteração!
Conclusão
Você completou sua primeira sessão, fazendo um email HTML responsivo com o framework Foundation para Emails! Nós fizemos um simples layout, com um e duas linhas, imagens, com valioso texto e um botão de Registro no fim.
Para inspiração, dê uma olhada na categoria Email Templates no Mercado Envato. Talvez projete, construa e, em seguida, submeta o seu próprio!
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
