Prévia da caixa de entrada
Antes de alguém abrir seu e-mail, tudo o que a pessoa vê é uma linha numa lista: quem enviou, o assunto e algumas palavras em cinza. Digite os seus e veja como sete layouts de caixa de entrada os mostram, e onde os cortam.
As palavras em cinza depois ou abaixo do assunto. Deixe vazio para ver o que a caixa de entrada mostra quando uma mensagem não tem nenhuma.
O primeiro texto visível do e-mail, de cima para baixo, incluindo um link “ver no navegador” ou descrições de imagens. Os clientes de e-mail o usam quando o texto de prévia está ausente ou é curto demais.
A prévia é desenhada pelo seu navegador enquanto você digita. Nada do que você insere aqui é enviado para nós ou armazenado.
Na caixa de entrada
Sete linhas de caixa de entrada redesenhadas em HTML em larguras típicas, exibidas como mensagem não lida. São aproximações próximas: o corte real muda com a largura da janela, a configuração de densidade, o tamanho da fonte e as fontes instaladas no dispositivo. As contagens de caracteres são medidas a partir desses desenhos.
O que observar
Preheader oculto para colar
Coloque este bloco primeiro dentro de <body>, antes de qualquer outro texto. A div fica invisível na mensagem aberta, mas as listas da caixa de entrada a leem porque é o primeiro texto do HTML. A longa sequência de ‌ depois da sua frase é o preenchimento: caracteres de largura zero e em branco que ocupam o resto da área de prévia, para que o cliente não tenha espaço para acrescentar “Veja este e-mail no seu navegador” ou um link de menu.
As três partes de uma linha da caixa de entrada
Uma caixa de entrada é uma lista de linhas, e cada linha é montada com as mesmas três partes da mensagem.
- Nome do remetente
- O nome de exibição no cabeçalho
From, a parte antes do endereço:From: Harbor Books <orders@harborbooks.example>. Geralmente vem primeiro ou em negrito, e é por ele que as pessoas decidem se conhecem você. - Assunto
- O cabeçalho
Subject. Uma linha em todos os layouts, cortada com reticências quando falta espaço. - Texto de pré-visualização
- Este nem é um cabeçalho. O programa de e-mail lê o começo do corpo da mensagem e mostra as primeiras palavras que encontra. Quando o pessoal de marketing coloca uma frase ali de propósito, chama isso de preheader.
Você controla as duas primeiras diretamente. A terceira, só decidindo qual é o primeiro texto do seu HTML.
O corte depende da largura, não de uma contagem de caracteres
Você provavelmente já leu que o assunto deve ficar abaixo de 50 caracteres. É uma regra prática, porque nenhum programa de e-mail conta caracteres. Cada um dá ao assunto uma caixa de certa largura e deixa o texto transbordar. Uma linha de letras estreitas cabe mais que uma linha de maiúsculas. “illicit little fib” é bem mais curto na tela que “WWW MMM SUMMER”, e os dois têm mais ou menos o mesmo número de caracteres.
Esta página funciona do mesmo jeito. Cada maquete é um layout HTML real numa largura típica, com as fontes que aquele programa pede, e o navegador corta o texto como o programa cortaria. O script então mede quantos dos seus caracteres sobreviveram. Leia os números como “cerca de”, já que seu leitor pode ter uma fonte maior, uma janela mais estreita ou um aparelho sem aquela fonte.
| Layout | Como a linha é montada |
|---|---|
| Gmail e Yahoo Mail num navegador de computador | Uma linha. Uma coluna fixa para o remetente, depois assunto e prévia dividem a largura restante, então um assunto longo empurra a prévia para fora. |
| Outlook no computador, Apple Mail no Mac | Uma coluna de lista estreita ao lado do painel de leitura. Remetente, assunto e prévia ganham cada um sua própria linha. O Apple Mail dá duas linhas à prévia. |
| Gmail e Outlook no celular | Três linhas empilhadas, de uma linha cada, ao lado de uma inicial redonda. |
| Apple Mail no iPhone | Remetente, assunto e duas linhas de prévia por padrão. O leitor pode ajustar de nenhuma a cinco. |
Definir o texto de pré-visualização, e preenchê-lo
Para escolher o texto de pré-visualização, faça da sua frase o primeiro texto do corpo e esconda-a da mensagem aberta. O bloco que esta página gera faz isso com uma div que não ocupa espaço e não tem cor visível.
Tem um porém. Se a sua frase tem 60 caracteres e o programa tem espaço para 110, ele continua lendo e acrescenta o que vier depois: “View this email in your browser”, o texto alternativo do seu logo, “Home | Shop | Contact”. Para impedir isso, coloque depois da frase uma longa sequência de caracteres que ocupam espaço na prévia mas não desenham nada, ou seja, um zero-width non-joiner e um espaço não separável, repetidos (‌ ). O programa enche a área de prévia com eles e para.
Os programas de e-mail mudam a forma de montar as prévias sem avisar ninguém, e alguns juntam os caracteres em branco. Antes de um envio grande, mande um teste para você mesmo e confira no celular.
Em que se baseiam as observações
A lista abaixo das maquetes vem de medições simples do que você digitou:
- Pontos de corte do assunto e do nome do remetente, tirados dos desenhos, com o layout de celular mais curto citado para você.
- Texto de pré-visualização: ausente, repetindo o assunto (mesmo começo, ou pelo menos 80% das mesmas palavras), ou mais curto que o espaço, de modo que o texto do corpo vem em seguida.
- Forma: mais de 70% de letras maiúsculas, dois ou mais pontos de exclamação, o número de emojis, um “Re:” ou “Fwd:” numa mensagem que não é resposta.
- Vocabulário de spam: uma lista curta em inglês (“free”, “act now”, “guaranteed”…), mostrada como informação.
Nada disso decide onde sua mensagem vai parar. Os provedores de e-mail filtram principalmente por quem envia, ou seja, se o domínio passa em SPF, DKIM e DMARC e como os destinatários trataram os e-mails dele antes. Você pode verificar esse lado com a verificação de autenticação de e-mail. As palavras importam para o que vem depois da entrega, quando uma pessoa decide se abre a mensagem.
Perguntas frequentes
Qual deve ser o tamanho do assunto de um e-mail?
Os celulares mostram cerca de 30 a 45 caracteres do assunto, conforme as letras e o programa. Coloque nesse espaço as palavras que identificam a mensagem. Um assunto mais longo não tem problema quando o resto é detalhe que um leitor no computador vai ver.
O que é o texto de preheader de um e-mail?
A frase mostrada depois ou embaixo do assunto na lista da caixa de entrada. É o primeiro texto no corpo da mensagem, geralmente escondido do e-mail aberto com CSS para aparecer só na lista.
Por que meu e-mail mostra "View this email in your browser" na caixa de entrada?
Porque esse link é o primeiro texto do seu HTML e nenhum texto de pré-visualização vem antes dele. Adicione um preheader escondido como primeiro elemento do corpo e preencha-o para que o programa não continue até o link.
Quantos caracteres de pré-visualização o Gmail mostra?
Não há um número fixo. Num navegador de computador, o Gmail põe assunto e prévia numa só linha, então a prévia fica com o que o assunto deixar, de nada a mais de 100 caracteres. No celular ela ganha uma linha só para ela, cerca de 35 a 45 caracteres.
O que ‌ faz num preheader?
É um enchimento que não desenha nada. Um zero-width non-joiner seguido de um espaço não separável, repetido muitas vezes depois da sua frase de prévia, ocupa o resto da área de pré-visualização para que nenhum outro texto da mensagem seja acrescentado.
Emojis ou palavras como "grátis" mandam um e-mail para o spam?
Raramente por si sós. Os filtros pesam a autenticação e a reputação do remetente muito mais que o vocabulário. Mas um assunto que acumula maiúsculas, pontos de exclamação e palavras de venda parece lixo para quem lê, e isso já é motivo suficiente para moderar.