Criando um HTML responsivo para email

03 set Criando um HTML responsivo para email

Posted at 19:17h in Sem categoria by
0 Likes

Publicado por Leonardo Salvador no dia 14/08/2015 design

Ao longo dos últimos anos o uso crescente de dispositivos móveis tem provocado uma evolução na forma como dispomos conteúdos na web. O objetivo buscado é possibilitar uma web fluida e mais acessível para seus usuários. Nasce então o cenário do Web Design Responsivo. E o que isso tem a ver com emails? Tudo.

Um estudo realizado recentemente pelo Litmus mostra que 53% dos usuários online estão utilizando dispositivos móveis para checar seus emails. Isso representa um crescimento de mais de 500% em apenas 4 anos. Um bom motivo para você começar a desenvolver HTML para emails utilizando técnicas empregadas no Web Design Responsivo.

De volta para o… Passado

O desenvolvimento para email não evoluiu da mesma forma que o desenvolvimento para web. A tecnologia dos clientes de email é arcaica e faltam padrões. Sendo assim, fazer um bom HTML para email se torna uma tarefa complicada, uma vez que para uma campanha abrir em diferentes clientes de email é necessário, além de fazer um template em tabela, deixar vários vícios de lado. Você pode conferir algumas boas práticas no post “Boas práticas para o HTML de email marketing”.

De volta para o passado

Para o caso de dispositivos móveis, apresento algumas dicas que podem melhorar a experiência do usuário. Lembrando que você pode, e provavelmente deve, otimizar ainda mais:

  • Mobile first: Priorizar o contéudo para telas pequenas é muito importante para envolver o usuário da melhor forma possível.
  • Single-column: Uma única coluna com até 640px garante que nenhum conteúdo estará completamente fora de visão quando o zoom estiver ampliado.
  • Call-to-action: O guia da Apple, Apple’s iOS Human Interface Guidelines, recomenda uma área mínima de 44x44pxpara ícones, facilitando a vida do usuário na hora de tocá-lo com os dedos.
  • Tamanho da fonte: Os dispositivos da Apple redimensionam automaticamente o tamanho da fonte para 13px, então nunca use valores menores que isso. Outros dispositivos, como Android e Windows Phone, usam o tamanho da fonte predefinidos no CSS. Portanto, tenha bom senso na hora de defini-los.
  • Use % ao invés de px: Utilize porcentagem para as larguras dos elementos. Isso garante a acessibilidade em dispositivos com a tela em tamanhos não previstos nas media queries.
  • Hierarquia vertical: A diminuição real da tela oferece maior credibilidade na ideia de “dobra”. Call-to-actions significativos devem ser colocados o mais próximo possível do topo. Se eles não ficam visíveis de imediato, talvez não sejam acionados.
  • Imagens: Não assuma que as imagens serão vistas, pois a maioria dos clientes não exibe imagens por padrão.

Vamos ao que interessa!

A melhor forma de desenvolver um email responsivo é utilizando tabelas e CSS em inline, já que alguns clientes de email ignoram as declarações de estilo feitas no head. Além disso, há alguns boirleplates disponíveis para o desenvolvimento de email que ajudam a dar o primeiro passo em um projeto criado do zero. Eu recomendo o HTML Email Boirleplate.

Abaixo, apresento algumas ideias iniciais para o desenvolvimento de email responsivo:

Configurando o DOCTYPE

O Hotmail e o Gmail inserem automaticamente o DOCTYPE XTML 1.0 Strict, por isso não é uma má ideia usá-lo. É importante testar exaustivamente o seu email com e sem um DOCTYPE, pois muitos clientes de email irão simplesmente retirá-lo por completo. Outros clientes, como o Yahoo!, removem automaticamente a versão Strict e inserem a versão Transitional. Particularmente, utilizo a versão Transitional, pois é a mais recomendada segundo uma pesquisa realizada pelo Campaign Monitor.

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Meta tags, Resets e muita Media Query

Agora podemos inserir algumas meta tags para garantir que nosso email será exibido corretamente em dispositivos móveis:

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial scale=1.0"/>
    <title>Titulo do email</title>
  </head>
  <body>
  <!-- conteúdo -->
  </body>
</html>
  • Meta tag content-type: É responsável por chavear qual tabela de caracteres a página está utilizando.
  • Meta tag viewport: Faz com que os dispositivos móveis dimensionem corretamente o conteúdo do layout.

Além disso, o reset garante uma maior padronização do layout entre os clientes de email, o que realmente faz a diferença, por isso sempre que puder não deixe de usar. Vocẽ não precisa usar tudo, mas algumas propriedades são essenciais:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Titulo do email</title>

    <style type="text/css">
      .ExternalClass {width:100%;} /* Força o Hotmail a exibir o email com a largura total */
      .ExternalClass, .ExternalClass td {line-height: 100%;} /* Força o Hotmail a exibir o espaçamento normal entre linhas */
      table {border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } /* Remove o espaçamento entorno das tabelas no Outlook 07, 10 */
      table td {border-collapse: collapse;} /* Corrige o padding no Outlook 07, 10 */
      td {margin: 0; padding: 0; font-size: 0px; line-height: 0px;} /* Zera os espaçamentos */
      img {display: block; max-width: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;}
  </style>
</head>

Agora vamos inserir as media queries. Neste exemplo vou utilizar apenas um nível de especificação, mas você pode criar quantas desejar para atender as necessidades do seu layout.

1
2
3
4
5

@media only screen and (max-width: 600px) {
   img[class="hide"] {
    display:block!important;
  }
}

No exemplo acima estamos adicionando uma classe hide com display: none no elemento img para telas menores que 600px. O valor setado com !important garante que qualquer estilo interno seja substituído. Utilizar important! na head para sobrescrever os estilos inline do body garante que seu layout irá se adaptar aos valores de largura setados. O resultado é uma ótima experiência móvel.

É interessante notar que dessa maneira conseguimos manipular outras características do layout, como restringir a largura da coluna de nosso email.

1
2
3
4
5

@media only screen and (max-width: 600px) {
    table[class="content-wrap"] {
    width: 94%!important;
    }
}

Agora temos em nossa media query uma classe content-wrap. Ela faz com que as tabelas se adaptem a largura de 94%, isso em dispositivos com largura máxima de 600px. Agora precisamos especificar uma largura fixa de 600px adicionando-a a tabela. Com isso teremos um elemento que dimensiona proporcionalmente dentro de determinado tamanho, contanto que os atributos de largura dos elementos dentro dessa tabela sejam especificados com porcentagem. Esse é um modelo básico de email responsivo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<body>
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="100%">
        <!--Content wrapper-->
        <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="content-wrap">
          <tr>
            <td width="100%" height="20"></td>
          </tr>
          <tr>
            <td>
              <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td width="100%">
                    <!-- Content -->
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td width="100%" height="20"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

Conclusão

Criar HTML para email ainda é uma tarefa difícil. A não padronização entre os dispositivos, a arquitetura arcaica dos clientes de email e dos motores de renderização dificultam a vida de designers e programadores. Mas como a tecnologia tem evoluido, aos poucos esse processo está tornando-se mais fácil para que desenvolvedores forneçam aos usuários layouts fluidos e com maior interação. O apoio crescente a consultas de media queries mudou a paisagem de construção de emails para dispositivos móveis, melhorando a experiência do usuário em um número cada vez maior de dispositivos. Cabe agora a nós, designers e desenvolvedores, experimentar formas criativas para atingir cada vez mais esse público alvo.