Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Seu Primeiro Email Responsivo Construido Com Foundation para E-mails

by
Difficulty:BeginnerLength:ShortLanguages:

Portuguese (Português) translation by Cândido Sales Gomes (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:

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:

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:

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:

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.

Este markup simples, quando compilado, nos dá o seguinte:

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).

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:

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:

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.

Mais Imagens

Eu adicionei outra imagem sobre o torneio da cidade, de novo em relação ao documento.

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.

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>.

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:

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.