Primeiras aulas do curso Email Marketing Responsivo parte 1: sua newsletter adaptável

Email Marketing Responsivo parte 1: sua newsletter adaptável

O Projeto Bytebank - Introdução

Eu sou o Natan Souza, instrutor de UX e Front-end da Caelum e da Alura. Talvez, você já me conheça de outros treinamentos, agora, nós conheceremos a magia do E-mail Marketing Responsivo.

Nós temos as ciências exatas, humanas, e temos o E-mail marketing responsivo - quase à parte da realidade. Tentarei fazer com que tudo isso faça sentido para você. Nós abandonaremos a ideia do e-mail marketing padrão, para deixá-lo mais interessante quando for aberto em diferentes dispositivos, por exemplo, no celular.

email marketing responsivo aberto no celular, com logo de empresa (Bytebank) no topo, texto personalizado, desenho de cartão bancário e um botão verde com "aceitar convite"

Observe como layout fica mais legível e organizado quando está em um formato responsivo, tornando a experiência do usuário mais agradável. No curso, trabalharemos com porcentagem, Web design responsivo, sendo imprescindível que você já tenha conhecimentos de Front-end.

São pré-requisitos os seguintes cursos:

Nas duas partes do curso, veremos como transformar um e-mail marketing tradicional em um layout mais agradável na versão mobile, deixando nosso produto mais interessante do ponto de vista do usuário.

Trabalharemos com conhecimentos Front-end, no entanto, é possível que você estranhe as abordagens utilizadas, pois elas podem não coincidir com as boas práticas previamente apreendidas - mas você verá que tudo fará sentido durante o treinamento.

Na segunda parte do curso, falaremos sobre media queries e trabalharemos com a parte de testes. Apresentaremos as vantagens e desvantagens de se testar o e-mail, além as melhores maneiras de fazê-lo.

Espero que você goste do curso, até logo!

O Projeto Bytebank - Tabelas pra que te quero

Vamos começar supondo que trabalhamos para a Bytebank, uma empresa de serviços digitais bancários, que oferece para os clientes uma conta 100% digital. Seu principal produto é o cartão de crédito.

A equipe de Marketing do Bytebank pediu ao time de Front-end a criação de um e-mail marketing de convite do aceite do cartão. Na minha época, para ingressarmos no Orkut, por exemplo, também tínhamos que aceitar um convite enviado por quem já fazia parte da rede social. A Bytebank vai funcionar da mesma maneira.

Nosso e-mail terá um pequeno texto:

"Oi, Natan Souza

João Vicente convidou você para o banco mais digital que existe na atualidade!"

Abaixo teremos links convidando o usuário para assistir um vídeo de apresentação.

Para melhorar a primeira impressão do usuário e trabalharmos com a parte de UX também, incluímos o nome do potencial cliente na imagem do cartão. Assim, a pessoa consegue visualizar a aparência do cartão após aceitar o convite, cujo texto será uma preocupação da equipe de Back-end.

Na parte de baixo do e-mail, são citadas duas vantagens do Bytebank: o oferecimento de ingresso sem burocracias e o fato de ser 100% digital.

parte inferior do e-mail, com ícones e textos informando sobre o cadastro facilitado e a presença 100% online, além de redes sociais e fácil acesso à contato para eventuais dúvidas e afins

Há algumas informações da empresa, e links para as redes sociais no rodapé do e-mail. Se você fez o curso de E-mail Marketing (espero que sim!), você passou por todas as etapas, incluindo compreensão do briefing, elaboração do layout, consideração dos respiros internos, além de tudo que envolve a criação do HTML.

Para este curso, usaremos o editor Sublime, mas tenha a liberdade de usar a ferramenta que preferir para a edição de texto.

Você encontra o arquivo HTML do e-mail marketing nos exercícios, disponível para uso no decorrer do curso.

Ao abrirmos o arquivo convite-original.html, é possível perceber que estamos usando um Doctype antigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Convite do ByteBank</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ... -->

Se analisarmos o arquivo, veremos que ele possui uma tabela logo após a abertura da tag <body>:

<body>


  <center>
    <table align="center" cellpadding="0" cellspacing="0" border="0" width="600">

     <tbody>
      <tr bgcolor="#0000000">
        <td colspan="3" align="center" style="padding: 5px;">
          <img src="images/Top_Logo.png" alt="ByteBank - digital de verdade">
        </td>
      </tr>

<!-- ... -->

Estamos usando esse Doctype que vai contra as boas práticas comumente adotadas, as quais inclusive foram apresentadas nos cursos da Alura. No entanto, não temos opção! Trabalharemos com esse código porque nossos usuários não utilizam apenas Chrome, Firefox, Safari, Edge ou IE. Dependemos de outros client-side emails ("clientes de e-mail", traduzido para o português).

Por exemplo, dependemos do Gmail, do Outlook.com, dentre outros. É preciso considerar ainda se o usuário está abrindo o Gmail no navegador ou no aplicativo, e todos esses cenários se distinguem uns dos outros.

As funcionalidade continuarão as mesmas, mas se o navegador não der suporte para uma borda arredondada usada no e-mail, nosso layout vai ser alterado. Significa que precisamos lidar com essas particularidades e, para evitar problemas, utilizaremos tabelas.

Caso o suporte para diferentes tipos de clientes não seja necessário, há a liberdade de usar <div> e outras tags do HTML5. Minha recomendação, no entanto, é a adoção do <table>. Desta forma, temos a garantia de que nosso e-mail funcionará em diversos e-mail clients.

Se alterarmos o valor da borda da tabela para 1, conseguiremos visualizar a estrutura da tabela:

<body>
    <center>
    <table align="center" cellpadding="0" cellspacing="0" border="1" width="600">

<!-- ... -->

e-mail com bordas de tabela visíveis, envolvendo todo o conteúdo do e-mail marketing, que ficam separados em vários pedaços

Vamos analisar o código de uma tag <tr>, localizada dentro do <table>:

<tr>
    <td width="100" rowspan="8">&nbsp;</td>
    <td width="400" align="center">
        <img src="images/Logo_ByteBank.png" alt="ByteBank">
    </td>
    <td width="100" rowspan="8">&nbsp;</td>
</tr>

Este trecho é referente a primeira linha da tabela. Adicionaremos um bgcolor vermelho dentro de uma <td> para facilitar sua localização na tabela.

<tr>
    <td width="100" rowspan="8">&nbsp;</td>
    <td width="400" align="center" bgcolor="red">
        <img src="images/Logo_ByteBank.png" alt="ByteBank">
    </td>
    <td width="100" rowspan="8">&nbsp;</td>
</tr>

A primeira <td> possui valor de rowspan igual a 8, ou seja, ela está ocupando oito linhas.

pedaço superior do e-mail, em vermelho, contendo o logo e o nome "Bytebank"

Podemos testar modificando os valores das tds e verificar quais são as áreas relacionadas na tabela. Porém trabalharemos com o código como estava anteriormente:

<tr>
    <td width="100" rowspan="8">&nbsp;</td>
    <td width="400" align="center">
        <img src="images/Logo_ByteBank.png" alt="ByteBank">
    </td>
    <td width="100" rowspan="8">&nbsp;</td>
</tr>

Na <tr> seguinte, encontraremos no código um atributo não utilizado com frequência atualmente.

<tr>
    <td align="center">
        <font size="6" face="Bariol, Arial, sans-serif"><br>
        Oi, <strong>Natan Souza</strong><br><br>
        </font>
    </td>
</tr>

O atributo face era bastante utilizado na tag <font>, para indicação das alterações da família de fonte. Observe que no lugar do font size no CSS, colocamos o atributo size diretamente na <font>.

Se descermos mais no código, encontraremos pequenas "gambiarras" com uma linha inteira com diversos &nbsp (non-breaking space), usada quando não queremos uma quebra automática da linha.

<tr>
    <td align="center">
        <a href="#" style="text-decoration: none">
        <font size="3" face="Bariol, Arial, sans-serif" color="#47a138">
            Veja o vídeo >
        </font>
        </a>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <a href="#" style="text-decoration: none">
        <font size="3" face="Bariol, Arial, sans-serif" color="#47a138">
            Veja a apresentação >
        </font>
        </a>
    </td>
</tr>

No caso do e-mail marketing, não é possível focarmos em boas práticas se queremos atender o maior número de client-side. Infelizmente, nosso código ficará um pouco "sujo".

A seguir, vamos analisar o trecho referente à imagem exibida do cartão, na qual o nome do cliente em potencial é colocado de forma dinâmica:

<tr>
    <td align="center">
        <img src="images/Bg_Cartao.jpg" alt="">
    </td>
</tr>

<tr>
    <td style="background: url(images/Bg_Nome_Cartao.jpg) repeat-y center;">
        <font color="#FFFFFF" style="font-family: sans-serif; padding-left: 23%">
        NATAN SOUZA
        </font>
    </td>
</tr>

A imagem poderia vir pronta do Back-end, mas optei por resolver o problema de outra maneira, incluindo o nome do cliente.

Então, temos nosso HTML e acreditamos que tudo está funcionando corretamente. No entanto, ao abrirmos o e-mail no celular, ele é exibido da seguinte forma:

email desconfigurado

O e-mail é exibido integralmente, e por isso as fontes ficaram bem pequenas. Precisaríamos dar zoom com os dedos para ler o texto.

No curso, apresentaremos os clients email a que daremos suporte, sendo que o primeiro é o Gmail, mas o objetivo é evitar que o usuário tenha que dar um zoom durante a leitura da mensagem, prejudicando a experiência.

Na versão responsiva que construiremos, o conteúdo vai se adaptando proporcionalmente ao dispositivo utilizado, tornando a leitura mais agradável. O conteúdo do rodapé, por exemplo, poderão ser exibidas uma embaixo da outra, em coluna:

"cadastro fácil" e "100%" online um embaixo do outro

A legibilidade melhorou muito, e o layout faz mais sentido. É o que faremos nas próximas aulas!

O Projeto Bytebank - Começando o responsivo

A lista de pré-requisitos do curso inclui o de Web Design Responsivo, no qual são abordados media queries, unidades de medida e UX.

Nosso e-mail ainda não está responsivo; qual seria o primeiro ponto a ser trabalhado? O ideal seria que a mensagem ocupasse a tela inteira, ou seja, 100% do espaço. Logo, a primeira alteração será na largura da tabela, cujo valor do width passará de 600 para 90%. Não usaremos o valor completo para o layout não se chocar com as quinas.

<center>
    <table align="center" cellpadding="0" cellspacing="0" border="0" width="90%">

         <tbody>
            <tr bgcolor="#0000000">
                <td colspan="3" align="center" style="padding: 5px;">
                <img src="images/Top_Logo.png" alt="ByteBank - digital de verdade">
                </td>
            </tr>
<!--...-->
</center>

A partir desta alteração, o e-mail ficará da seguinte maneira:

e-mail com nome e logo da empresa, "Bytebank", no topo, seguido do texto, links, imagem de cartão personalizada e um botão verde com "aceitar convite"

Porém, apenas esta alteração não faz com que o e-mail seja responsivo e, se ele for aberto no celular, os textos ainda estarão pequenos. Apesar de ser uma newsletter simples, com uma coluna, as vantagens ainda ficarão lado a lado na parte inferior.

A seguir, abriremos a opção de Inspecionar do navegador e acessaremos o "DevTools", que nos oferece a opção de visualizarmos o e-mail em diferentes dispositivos.

Navegador com Devtools aberto, simulando a visualização do e-mail em um iPhone 5, com código fonte no painel à direita

Se selecionarmos o iPhone 5, por exemplo, a fonte aparece legível, no entanto o usuário precisa rolar a tela para visualizar a mensagem. De qualquer forma, as vantagens oferecidas pela empresa se posicionarão uma embaixo da outra. Da maneira como está atualmente, isto ainda prejudica bastante a experiência do usuário.

Ao alterarmos a largura do e-mail, o nome do cliente acabou se alinhando para fora dos limites da imagem do cartão.

nome do cliente em potencial ("Natan Souza") vazando para o lado esquerdo do cartao

Poderíamos resolver esse problema com um pequeno truque, no caso, definindo um padding para os dois lados. Porém devemos evitar ao máximo o uso de CSS!

Até agora, para visualizarmos as alterações feitas no e-mail, precisamos atualizar constantemente o navegador, a menos que você tenha um Browser sync. Se você estiver utilizando o Dreamweaver, existe o modo "Live", em que aquilo que codificamos vai sendo replicado na tela automaticamente.

Caso esteja usando o Sublime, existe um plugin que poderá ser baixado se você já tiver o Package Control. Para acessar o plugin Browser refresh, clicaremos em "Sublime Text" no menu superior, e depois selecionaremos "Preferences > Package Settings > Browser Refresh > Key Bindings".

Com o plugin configurado, quando fizermos qualquer modificação no código e salvarmos o arquivo com "Control + Shift + R", a página será alterada automaticamente no código. Desta forma, ganhamos tempo no nosso trabalho. Se você tiver instalado um live preview, conseguirá visualizar rapidamente as alterações.

Para a resolução dos problemas surgidos na página após a alteração da altura, é preciso entender como funcionam os espaçamentos. Adicionaremos o valor 1 para a borda, e desta forma visualizaremos a tabela novamente:

tabela de uma coluna com várias linhas, com bordas visíveis

O trabalho do padding está sendo realizado pelas tags tds, referentes a cada coluna. O espaçamento da altura foi definido com o atributo rowspan, que acopla diversas células e cria uma single column (coluna única). Queremos um design responsivo, e se analisarmos a versão final do e-mail, não precisamos de um espaço vazio e grande nas laterais.

e-mail com as margens menores nas laterais

À medida em que reduzimos o tamanho da tela, queremos que o e-mail marketing também se reduza proporcionalmente. Sendo assim, esta td não é necessária.

Como melhoraremos o respiro interno em um elemento? Podemos adicionar o padding, mas ele não poderá ser incluído como um atributo do HTML por ser, na verdade, uma propriedade do CSS. Tanto o rowspan como colspan (relacionado com as colunas), não são recomendados na criação de e-mail marketing responsivo.

Então, apagaremos todas as referências do rowspan no código, incluindo seus valores, como no trecho abaixo:

<tr>
    <td width="100">&nbsp;</td>
    <td width="400" align="center">
        <img src="images/Logo_ByteBank.png" alt="ByteBank">
    </td>
    <td width="100">&nbsp;</td>
</tr>

Com o atalho "command + D", pode-se selecionar todos os trechos iguais em um código. Podemos utilizar esse comando para selecionar e apagar todos os rowspan de uma vez.

No browser, veremos o resultado das alterações.

e-mail quebrado com o nome e logo da empresa em coluna diferente da do restante do conteúdo

O e-mail ficou "quebrado". Apesar de sabermos que não é bom usar os atributos rowspan e colspan, quando aquele foi removido, o código deixou de funcionar corretamente. Sua estrutura foi pensada para um e-mail com tamanho fixo, então teríamos que refazê-lo praticamente do zero.

Para não perdermos os textos e nomes de imagens, vamos apenas deixar comentado o trecho da tag <center>, localizado abaixo da abertura do <body> até seu fechamento, tomando cuidado para remover os comentários que estão dentro deste código.

<!-- <center>
    <table align="center" cellpadding="0" cellspacing="0" border="0" width="90%">

         <tbody>
            <tr bgcolor="#0000000">
                <td colspan="3" align="center" style="padding: 5px;">
                <img src="images/Top_Logo.png" alt="ByteBank - digital de verdade">
                </td>
            </tr>
<!--...
</center> -->

Ficaremos com a página em branco no browser. A seguir, começaremos a construir o e-mail responsivo, abaixo da tag body, em que adicionaremos uma nova tabela:

<body>
    <table border="1">
        <tr>
            <td>
            vbnm,
            </td>
        </tr>
    </table>

Para visualizarmos a borda, incluiremos o border com valor 1, e conseguiremos perceber a existência da tabela no navegador.

página do navegador em branco e um texto qualquer contido em uma tabela simples

Em seguida, vamos conferir o layout da versão final. Incluiremos uma linha preta, na primeira linha, adicionando o bgcolor na <tr>, enquanto na <td> guardaremos uma imagem.

<body>
    <table border="1">
        <tr bgcolor="#000000">
            <td>
                <img src="images/Top_Logo.png" alt="ByteBank - digital de verdade">
            </td>
        </tr>
    </table>
<!--...-->
</body>

No browser, veremos um pequeno quadrado com a imagem dentro.

tabela com a imagem do logo

O próximo passo será adicionar uma largura (width) de 90%.

    <table border="1" width="90%">
        <tr bgcolor="#000000">
            <td>
                <img src="images/Top_Logo.png" alt="ByteBank - digital de verdade">
            </td>
        </tr>
    </table>

tabela com uma linha larga preenchida com a imagem e com a cor preta

Observe que no caminho da imagem, incluímos a pasta images e puxamos o arquivo Top_Logo.png. Temos também o atributo alt, e sobre o qual nos aprofundaremos mais a seguir.

E como colocaremos a linha no centro da página? Eu adicionaria uma classe no estilo do arquivo, por exemplo, .top-logo:

<style>
    img {
        display: block;
    }

    .top-logo {
        margin: 0 auto;
        width: 10px;
    } 
</style>

Em seguida, adicionaria o class no img.

    <table border="1" width="90%">
        <tr bgcolor="#000000">
            <td>
                <img src="images/Top_Logo.png" alt="ByteBank - digital de verdade" class="top-logo">
            </td>
        </tr>
    </table>

Porém, teríamos um problema. Será que o Gmail dá suporte para margin ou para auto? Não sabemos. Descobriremos acessando o site Campaign monitor, mais especificamente, a parte sobre suporte para CSS. Nele, encontraremos um guia que nos indica o que funciona ou não. Buscaremos nele, quem nos oferece suporte para margem:

suporte para margin

Vemos que o Outlook.com não dá suporte para margem, se queremos dar suporte para esse email client , não usaremos o margin. Porém, sem margem, nosso elemento nunca poderá ser centralizado desta forma. Temos que encontrar uma maneira de dependermos menos do CSS, se queremos centralizar o conteúdo da <td>, usaremos o atributo align="center".

    <table border="1" width="90%">
        <tr bgcolor="#000000">
            <td align="center">
                <img src="images/Top_Logo.png" alt="ByteBank - digital de verdade" class="top-logo">
            </td>
        </tr>
    </table>

Agora, a imagem ficará centralizada na linha.

imagem do logo centralizada na linha

Conseguimos!

Sobre o curso Email Marketing Responsivo parte 1: sua newsletter adaptável

O curso Email Marketing Responsivo parte 1: sua newsletter adaptável possui 136 minutos de vídeos, em um total de 47 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana