Projetar seus e-mails

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Identificar as diretrizes de design e acessibilidade de emails.
Comparar os diferentes níveis de design responsivo.

Princípios de design de email

Agora que você construiu um ótimo conteúdo, é hora de voltar e revisar seus emails para obter diretrizes de acessibilidade e princípios de design de email. Você não precisa ser um designer para reconhecer e aplicar um bom design aos seus emails. Então, com isso em mente, nesta unidade vamos nos concentrar em quatro princípios de design: Acessibilidade, Clareza, Responsividade móvel e Emoção.

Ser acessível

De acordo com Merriam-Webster, a acessibilidade é definida como "de fácil uso, acesso ou adaptação para uso por pessoas com deficiência". Seguir as diretrizes de acessibilidade faz com que seus emails possam ser visualizados por todos os assinantes, independentemente de suas habilidades ou deficiências. E, sinceramente, as diretrizes também incentivam um ótimo design. Moral da história: acessibilidade não fica em segundo plano; é o seu guia para um ótimo conteúdo.

Mas como você pode criar conteúdo acessível? Existem muitos recursos para garantir acessibilidade (incluindo alguns listados no final desta unidade), mas aqui estão algumas dicas importantes para você começar.

Use linhas de assunto precisas. Seja claro, mas cativante em sua linha de assunto.
Organize-se em uma ordem de leitura lógica. O conteúdo deve ser fácil de navegar e percorrer. Consistência de conteúdo, layouts e estilos visuais é fundamental.
Use fontes grandes e legíveis. Exiba partes importantes do conteúdo em negrito e aumente o tamanho da fonte (16pt ou mais) para facilitar a leitura e a digestão do seu conteúdo.
Ajuste o espaçamento da linha. Seja generoso com o espaçamento de linha para facilitar a leitura e tornar o texto mais agradável aos olhos.
Use botões grandes e clicáveis com etiquetas claras. Os botões devem ser quadrados de, pelo menos, 44 pixels para celular, sinalizar uma ação e definir a expectativa de onde o usuário será levado quando clicar neles (pense: leia mais, compre aqui, compre agora). Curiosidade: um estudo do MIT descobriu que a largura média do dedo indicador é de cerca de 1,5 a 1,7 cm para a maioria dos adultos, o que equivale a 45 a 57 pixels. E muitos usuários utilizam o polegar (cerca de 2,5 cm de largura) para clicar em um botão em uma tela móvel.
Use opções de texto dinâmico e somente texto. Texto dinâmico é texto HTML ou editável que não está incorporado em uma imagem. Inclua texto dinâmico sempre que possível, para tempos de carga e capacidade de resposta mais rápidos e uma melhor experiência quando as imagens são desativadas. Bônus: texto dinâmico parece melhor. O texto dinâmico nunca é pixelado e permanece nítido em todos os dispositivos.
Escolha as cores com atenção. Use um esquema de cores (incluindo fundos, botões, links e texto) que tenha alto contraste de cores para garantir a legibilidade entre os níveis de brilho. Aqui estão as diretrizes de proporção de contraste para você seguir.
Texto pequeno (menos de 18 pixels) deve ser de, pelo menos, 4,5 a 1.
Texto grande (mais de 24 pixels) deve ser de 3,0 a 1.
Teste suas cores em aremycolorsaccessible.com.

Confira os exemplos de texto pequeno, texto em negrito e texto grande que atendem às diretrizes de contraste (marcado como aprovado) ou não (marcado como falha).

Um exemplo de contrastes de cores baseados em texto pequeno, em negrito e grande.

Pronto para se aprofundar ainda mais? Temos algumas dicas de codificação a fim de tornar seu conteúdo ainda mais fácil para pessoas que usam leitores de tela e tecnologias de assistência.

Dica	Descrição	Exemplo
Inclua tags ALT. Dê as informações necessárias sobre uma imagem, mas que sejam as mais curtas e concisas possível.	Uma tag ALT (também chamada de texto ALT ou descrição ALT) é adicionada ao HTML para fornecer uma descrição de texto dessa imagem. As tags também são úteis onde as imagens podem ser bloqueadas ou têm o carregamento lento.	`alt="Descriptive text about an image"` (alt="Texto descritivo sobre uma imagem")
Verifique se as tabelas de layout têm um atributo role="presentation". Trate as tabelas como um layout baseado em div adicionando role="presentation" a cada <tabela>.	Mesas aninhadas podem criar uma experiência desagradável para pessoas que usam tecnologias de assistência.	`<table role="presentation" border="0" cellpadding="0" cellspacing="0"></table>`
Use tags de HTML semântico. Programe seus parágrafos, listas e títulos com identificadores específicos para ajudar os usuários a navegar e consumir conteúdo com mais facilidade.	HTML semântico é HTML que adiciona significado ou contexto ao código, o que, por sua vez, ajuda as tecnologias de assistência.	`<header></header> <section> <article> <figure> <img> <figcaption></figcaption> </figure> </article> </section> <footer></footer>`

Ser claro

O princípio de design da clareza refere-se a quão legível e digerível seu conteúdo é para o usuário. A clareza é um elemento importante nas diretrizes de acessibilidade e reitera a necessidade de ter um fluxo lógico, bom espaçamento de linhas e fontes legíveis. Ela também se refere à clareza da mensagem da sua marca no design de email. Como você pode fazer isso? Seja transparente em relação ao valor de suas mensagens e mantenha as frases curtas. O espaço em branco é uma coisa boa. Também como mencionamos na unidade anterior, o posicionamento do conteúdo é fundamental. Use um formato de email consistente que coloque seu conteúdo mais importante primeiro. Torne seus emails simples, mas significativos.

Embora seja conhecido por sua carreira literária, Antoine de Saint-Exupéry tinha palavras sábias que todos os designers e não designers deveriam seguir: "um designer sabe que alcançou a perfeição não quando não há mais nada a acrescentar, mas quando não há mais nada a tirar."

Ser responsivo em dispositivos móveis

De acordo com o Estudo de adoção e uso do consumidor da Adestra, 71% dos consumidores excluem emails que não ficam bem no celular. Não arrisque exclusões; otimize seus emails para dispositivos móveis! Há três opções a considerar na otimização para dispositivos móveis. Selecione o que funciona para sua marca, avaliando como seus clientes estão interagindo com suas mensagens e quanto tempo e experiência sua equipe de produção de email tem para criar e codificar emails. Vamos ver suas opções.

Descrição

Quando utilizar

O que é necessário saber

Com reconhecimento de dispositivos móveis

Um único layout, projetado para reduzir a escala e ainda ficar bem no celular.

Entrega rápida, baixo esforço

Layout de coluna única
Gráficos primários de largura total
Tamanhos de texto maiores (17px+ para texto do corpo, 26px+ para cabeçalhos)
Botões CTA grandes e que podem ser tocados

Com reconhecimento de responsividade

Cabeçalhos e pés responsivos.

Elementos que podem ser repetidos, esforço inicial.

Os módulos de cabeçalho e rodapé incluem consultas de mídia que permitem mudanças e adaptação simples

Conteúdo suprimido
Navegação empilhada

Corpo de email mantém táticas de reconhecimento de ambiente móvel

Coluna única
Grandes tamanhos de texto
Botões CTA largos

Responsivo

O conteúdo modular se adapta ao tamanho da tela do dispositivo.

Experiência ideal, esforço contínuo.

Usa uma consulta de @media CSS3 que ativa estilos alternativos com base no ambiente de visualização geral.
Detecta o tamanho da tela (px) – pequeno X grande
Recua para a versão desktop quando @media não é compatível

Adicionar emoção

De acordo com a Interaction Design Foundation, o design emocional busca provocar emoções adequadas a fim de criar uma experiência positiva para o usuário. E o que a emoção tem a ver com emails? Simples: se os assinantes se importam, eles não vão apagar. Os emails podem evocar uma resposta emocional por meio da narrativa e da estética geral de suas campanhas. Vamos rever algumas considerações sobre os elementos visuais do seu email.

Identidade visual

Mantenha-se fiel à sua marca. Use padrões claros da marca que correspondam ao seu site, de modo que se um usuário clicar em um CTA, sua experiência de email será contínua em relação à experiência de aplicativo web ou móvel. Consistência, clareza.

Imagens e gráficos

Envolva-se com os clientes usando gráficos de alta resolução e imagens propositais que os conectam à sua marca. Aqui vão algumas dicas específicas.

Dobre o tamanho de suas imagens, incluindo seu logotipo, para contar com as telas de retina de alta resolução. Quando a imagem é reduzida no email, ela parece mais nítida.
Veja o email sem essas imagens. Se as imagens não são carregadas ou são desativadas, seu conteúdo ainda funciona?

GIFs animados

GIFs animados são uma ótima maneira de chamar a atenção, mostrar várias imagens ou mostrar como algo funciona. No entanto, eles podem causar problemas de acessibilidade para assinantes com deficiência visual. Reveja suas animações em relação a essas considerações.

Verifique se seus GIFs animados têm transições suaves.
Taxas de exibição de conteúdo entre 2 Hz e 55 Hz podem prejudicar os usuários com epilepsia fotossensível.

Explore animação e vídeo, mas teste e revise o tempo de carregamento e o tamanho do arquivo. Se agregar valor, mantenha-os. Se não for o caso, remova-os.

Por fim, considere rever o módulo Práticas de marketing inclusivo para ter certeza de que seu conteúdo terá o tom certo e terá a mesma representação. Na próxima unidade, examinaremos a etapa mais importante antes de clicar em Enviar: o teste.

Procurando ajuda?

Descubra mais