Como o design pode contribuir com a entregabilidade dos emails?

Publicado em:

Antes de tudo, uma pergunta importante: você sabe qual a diferença entre entrega e entregabilidade? Não?! Calma, eu explico!

Há quem diga que essas duas palavrinhas são diferentes formas de descrever uma mesma ação. Adianto: ledo engano! Muito embora sejam parecidas, têm conceitos (um pouco) distintos.

Quando falamos de entrega, estamos nos referindo ao número de emails enviados pela plataforma de disparo de email marketing que chegaram aos provedores - Gmail, Hotmail. Outlook, Uol, Bol. Aol… - sem sofrer nenhum tipo de bloqueio. Na entrega não há como mensurar quantos, de fato, chegaram à caixa de entrada e quantos foram categorizados como spam; apenas se foram aceitos ou não pelo provedor. Isso quer dizer que, por exemplo, você pode ter um percentual de 100% de entrega, mas, entretanto, contudo, todavia (!), todos eles terem caído na caixa de spam. Ruim, né?

Agora, quando o assunto é entregabilidade, a coisa muda de figura. Ao pé da letra, entregabilidade é a união das máximas: entrega + habilidade. Ou seja, a entregabilidade está relacionada à habilidade de um email conseguir chegar à caixa de entrada. Ainda parece o mesmo? Sim, mas espere! A entregabilidade é algo (muuuito) mais complexo.

Para medí-la é necessário estar atento à um conjunto de configurações e estratégias que são fundamentadas em boas práticas e reputação de domínios e IPs. Além disso, os provedores são verdadeiros “fiscais" do volume, estão de olho na frequência e, principalmente, no engajamento. É com todos esses dados que é tomada - ou, melhor dizendo, “filtrada" - a decisão: cair na caixa de entrada ou na caixa de spam.

Um dos piores pesadelos de um designer, que produz email marketing, é o de ver um criativo bonito, do qual foram dedicadas horas e horas de trabalho, ir direto ao spam. Nós queremos morrer com isso. (Sério!)

A verdade é que, em questão de entregabilidade, não há uma receita de bolo. E, sendo (mais) sincera, seria mentira se disséssemos existir um método 100% eficaz e que sana, de vez, todas as chances de um email não atingir o esperado (a caixa de entrada!), ainda mais quando se trata de design.

Oi? Como o design entra na “jogada”?

Conforme comentei antes, existem vários fatores que podem influenciar para o bem ou para o mal (reputação de IPs, base engajada/não engajada, domínio…). O design, dentro de todo esse “universo”, é (só) uma pequeníssima parte. Mas não é como se “ser uma pequeníssima parte” o tornasse menos importante. Longe disso! Fazer uso das boas práticas é equivalente a percorrer caminhos que podem auxiliar no processo de categorização dos emails.

Logo, é essencial que você tenha esclarecidos, em mente, alguns (vários) pontos antes de desenhá-lo - o seu email.

Papel e caneta em mãos (?) que o papo é longo!

Boas práticas para design

• Colunas únicas tornam a vida (beeeem) mais simples!

Pra quê complicar?! Simplificar aqui é a palavra de “ordem”. Emails de coluna única são ideais para a maioria dos casos por dois motivos: 1. tornam a experiência do usuário mobile melhor, e; 2. facilitam o scanneamento de conteúdo dos leitores.

Com o pensamento nesse usuário - móvel -, alguns dos grandes players do mercado já começaram a olhar para os benefícios da coluna única, deixando, assim, o foco na experiência desktop de lado. Porque, afinal, uma coluna fica bem nos dois mundos.

• Pra quê maior? 600px basta.

O recomendado, segundo as boas práticas de email marketing, é que a largura máxima de um email seja igual ou próxima a 600 pixels. (Com a ajuda de media queries e layouts fluídos), esse detalhe fará com que o conteúdo seja utilizado na sua plenitude, ajustando-se facilmente em todos os clientes web e desktop.

• Usuários mobile em mente!

Com o aumento da popularidade dos dispositivos móveis, alguns designers de email começaram a deixar em segundo plano a experiência desktop para adotar o conceito de “mobile first”. Isso significa que, inicialmente, eles criam o email com o cliente móvel em mente e, em seguida, garantem que ele também fique bem no desktop.

Ao colocar estes usuários em primeiro lugar, os designers esperam aumentar o engajamento e os cliques em dispositivos móveis.

Esse tipo de abordagem pode (e deve!) ser usada, especialmente, em emails mais simples, como emails transacionais, redefinições de senhas e atualizações de conta.

• Todo cliente de email é singular.

Contar, minuciosamente, pixels? Não! Pratique a lei do desapego porque fazê-lo, neste caso, é preciso. Ainda mais quando falamos de diferentes clientes de email. Ao invés disso, direcione (todos) os esforços para obter um email que passe a essência da marca e que seja fácil de ler e clicar em todos os clientes de email.

• Imagens ausentes ou bloqueadas? Plano B nelas!

Alguns clientes bloquearão as imagens por padrão. Usuários alterarão suas configurações para bloquear imagens, de modo que possam usar menos dados. As imagens não podem ser o único meio, dentro de um email, de transmissão de mensagem. Alt nelas!

• Safe fonts ftw!

Você já deve ter percebido que boa parte dos clientes não suportam Google Fonts, não? Por esse motivo, é importante que se tenha uma boa fonte “reserva”. Ela garantirá que o seu layout fique bom mesmo sem fontes web personalizadas.

Imagino que você, também, queira ter certeza de que está usando uma fonte “reserva" compatível com o Outlook, certo? Uma das várias peculiaridades do Outllok é que uma fonte não reconhecida por seu sistema fará com que ela caia automaticamente em Times New Roman. Você pode resolver esse probleminha chato utilizando fontes que são universalmente suportadas, como, por exemplo: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, a própria Times New Roman, Trebuchet MS, Verdana, Σψμβολ2 (Symbol) e Webdings.

• Evite (desde já!) emails que contém apenas imagens.

Se um assinante tiver ativado o bloqueio de imagem, toda a mensagem poderá ser perdida. Caso seja de extrema necessidade fazer uso de texto em imagens estilize o seu texto “alt” para garantir que sua mensagem será transmitida, caso a imagem não seja carregada.

Entenda que emails com base em imagens são ruins tanto para o plano de dados do destinatário quanto, em questão de acessibilidade, para deficientes visuais. Sendo assim, use texto HTML sempre que possível.

…e não tente esconder isso. Afinal, quem é que quer bancar o inconveniente e enviar emails à pessoas que não estão interessadas no conteúdo? Esse link, geralmente, deve aparecer dentro ou logo abaixo do rodapé.

Quer ganhar uns bons pontinhos com o usuário e evitar o descadastro?! Invista em um painel de preferências, onde ele possa escolher qual o tipo de emails que tem interesse em receber e com qual frequência.

Boas práticas para HTML

• Table, a tataravó dos floats

Esqueça os divs e floats! Você vai se sentir codificando na pré-história, sim, eu sei! Porém, as tables são a maneira mais confiável de obter um layout consistente. Tables também permitem que você replique algo que muitos clientes de email não permitem: floats (ok, não realmente floats de CSS). Com elas, você pode aproveitar o atributo align, que foi o predecessor dos modernos floats de CSS.

Ao usar align=“left”, as tabelas serão empilhadas em telas menores. Essa é a base do design responsivo e fluido. Funciona da seguinte forma: você tem duas tabelas com 300px de largura e align=“left” dentro do mesmo container. Se a tela tiver 600 ou mais pixels de largura (como terá para a maioria dos clientes de desktop), as tabelas aparecerão lado a lado. Agora, se a tela tiver apenas 400 px de largura, as duas tabelas serão empilhadas, uma em cima da outra. Tables são totalmente seguras, então sinta-se livre para usá-las! Você também pode recorrer ao colspan e rowspan, contanto que conte suas colunas e linhas cuidadosamente.

Um outro ponto importante é o de se atentar aos <td>’s vazios, pois alguns clientes de email, ao renderizar o código, não lidam com isso como o esperado. Esse problema pode ser corrigido adicionando “ " ou caractere de espaço, sem quebra. Você pode ajustar o tamanho desse caractere usando CSS, para que ele não atrapalhe o seu layout.

• Mais comentários, por favor!

Incluir comentários no código facilitará na hora da edição de modelos. Como o desenvolvimento de email (diário) é repleto de hacks e correções, vá por mim: pode ser útil observar o porquê de se ter adicionado um estilo, trecho ou elemento específico ao código.

• Codifique caracteres especiais.

Quando se fala de provedores de email, renderizar o conteúdo não é uma tarefa fácil. Por exemplo, se o seu provedor de serviços usar algum tipo diferente de codificação do selecionado para seu e-mail, isso poderá fazer com que caracteres especiais (como ©) apareçam incorretamente. Aparecerá, no lugar, um quadrado preto ou um losango. Você não quer isso, quer? Para evitar o problema, é imprescindível que se use um codificador de caracteres. E não é preciso entrar em pânico, caso não tenha um. Você encontra com facilidade várias tabelas “perdidas" por aí, na web (como essa tabela de entidades HTML).

• Abaixo de 100kb, já!

Sei que isso parece desafiador e impossível, dependendo da necessidade e informação a ser passada no email. Mas, veja, existe uma boa razão para manter o seu email abaixo de 100kb: mantendo-o leve, ele conseguirá passar, com tranquilidade, por mais filtros de spam.

Para isso, considere:

  • Remover estilos redundantes ou não usados;
  • Mover parte do conteúdo do email para uma página de destino (seja ela uma categoria, landing page, hotsite…), e;
  • Remover caracteres desnecessários do código (aquela tabelinha de caracteres especiais serve até para acentuação e alguns tipos de pontuação, viu?).

• Código para telas de alto DPI

É de extrema importância ficar de olho em como o seu email se comporta em diferentes tipos e tamanhos de monitor. Afinal, monitores maiores podem ter problemas ao dimensionar determinadas partes do email (altura, largura, tamanho da fonte, etc… principalmente, se elas estiverem codificadas em pixels). Para garantir que adaptações corretas aconteçam, é necessário que o seu layout seja fluído.

• De olho no pre-header!

Em boa parte das caixas de entrada, o texto pre-header é exibido após a linha de assunto do email. Aparentemente sem importância? Eu sei. Mas e se eu te disser que esse texto é fácil de codificar e que pode fazer uma enorme diferença nas taxas de abertura? Pois é.

• Java, flash, forms, html e css complexos? Eles não!

Não preciso nem dizer que Javascript e Flash são completamente incompatíveis, né?

Já o HTML5 e CSS3 (ainda) têm suporte limitado e devem ser utilizados com cautela.

• Cellpadding para espaçamento

Direto e reto: cellpadding fornece espaçamento confiável em todos os clientes de email.

• Teste seu email!

Essa é a melhor prática - e para tudo na vida. Afinal, todo cliente de e-mail tem peculiaridades diferentes quando se trata de renderizar código. O Outlook, por exemplo, pode ser especialmente desafiador.

Então, a única maneira de saber seu e-mail ficará ótimo em todos os lugares é testá-lo. Já existem no mercado ferramentas que auxiliam nesse processo de teste (onde é possível visualizar um único email em mais de 50 dispositivos de email e clientes).

Boas práticas para imagens

• Sobre telas “Retina Ready”…

Não é novidade pra ninguém que muitos dos dispositivos agora incluem telas de “retina”. Tecnologia apostada pela Apple, Retina Ready “significa” que os dispositivos de exibição irão mostrar mais pixels por DPI, resultando em imagens mais nítidas. Isso nos “obriga" a utilizar imagens bem maiores. Além disso, o HiDPI - como é chamado - não é mais um recurso experimental. É possível configurar o Photoshop para baixa e alta densidade.

• Endereços absolutos sempre!

Você pode estar usando referências de imagens locais para o seu teste, mas quando faz o seu envio final, referências absolutas de imagens são uma obrigação.

• Display:block

Você já recebeu um email com a famigerada linhazinha branca entre as imagens? Para que isso não aconteça, display:block nelas!

• Diga não à imagens de fundo.

Além de (em alguns casos) comprometerem o carregamento, planos de fundo, por meio de CSS, são algo que os clientes de e-mail podem não entender ao renderizar o conteúdo.

Boas práticas para CSS

• CSS inline

Alguns clientes ainda não suportam estilos incorporados e precisam de estilos in-line.

• CSS shorthand, aqui, não!

Problemas com interpretação de seu CSS? Verifique se você não está usando uma declaração abreviada. Por exemplo, margin-top: 5px pode funcionar onde margin: 5px 0 0 0; não funciona. É importante também evitar códigos hexadecimais de três dígitos. Alguns clientes não os reconhecerão, portanto, certifique-se de usar sempre o hexadecimal completo, de seis dígitos.

• Tudo é !important

Se você é um desenvolvedor, com certeza foi instruído a evitá-lo.

No entanto, ao codificar e-mails, você descobrirá que essa declaração - !important - pode ser inestimável. Você pode usá-lo para substituir estilos que o cliente de email adiciona ou modifica (especialmente quando se fala de responsivo).

• Media queries são nossas aliadas!

Usadas para criar estilos personalizados para diferentes clientes e/ou tamanhos de tela. Com as media queries, torna-se possível controlar tamanhos de fonte, imagem e fazer com que algumas tabelas tenham 100% de largura, de modo que preencham (satisfatoriamente), por exemplo, uma tela de celular. Há, também, a possibilidade de ocultar conteúdos que não são necessários em um dispositivos móveis.

• Por fim, a prática mais importante de todas: TESTE

Por mais que você esteja fazendo uso de todas as boas práticas, a parte mais importante de qualquer processo é o teste. Afinal, não faz sentido gastar o tempo certificando-se de que os seus emails ficarão ótimos em dispositivos diferentes se você não testá-los, não é? Chega de peso na consciência e incerteza! O teste dá, a você, a confiança necessária para clicar em “enviar”.