Design de e-mails responsivos: Torne seu template compatível com dispositivos móveis

Estatísticas mostram que 41% das visualizações de e-mails vêm de dispositivos móveis, o que significa que otimizar os e-mails para telas menores é essencial. Para isso, o design de e-mails responsivos é a ferramenta que você precisa. Além disso, não é apenas uma questão de conforto para o destinatário. Tornar seu e-mail responsivo pode trazer um aumento significativo no engajamento, com até 15% mais cliques únicos.

Neste artigo, vamos discutir a essência do design de e-mails responsivos, como ele funciona e como você deve se preparar para essa transformação. Sem mais delongas, vamos direto ao ponto.

O que é design de e-mails responsivos?

Vamos começar pelo básico. O design de e-mails responsivos é uma das etapas da evolução do design de e-mails, que adapta o layout do e-mail para diferentes dispositivos, mantendo o estilo e a usabilidade. Isso significa que os assinantes terão uma ótima experiência em qualquer dispositivo ou cliente de e-mail, independentemente do tamanho da tela, já que o design do e-mail se adapta fluidamente.

O núcleo do design responsivo de e-mails

O principal conceito do design de e-mails responsivos é o uso de @media queries. Basicamente, você pode definir um estilo para qualquer largura de tela. É necessário inserir a largura máxima em pixels e usar porcentagens para definir os tamanhos dos elementos. Isso evita problemas inesperados na visualização dos e-mails.

De acordo com este exemplo, o estilo da versão para desktop é definido sem usar media queries, e o estilo para dispositivos móveis usa o tipo “screen”. Se o e-mail for visualizado em um desktop, o usuário verá o texto alinhado à esquerda; já em dispositivos móveis, o texto aparecerá centralizado.

Claro que, além do alinhamento de texto, você pode definir qualquer estilo — desde a família da fonte até o tamanho dos elementos e suas posições.

O papel das media queries no design de e-mails responsivos

Uma media query é composta por dois elementos: um tipo de consulta e uma característica — ou seja, uma especificação. Uma única media query pode ter várias propriedades, declaradas com a palavra-chave “and”. Ao mesmo tempo, a consulta pode não conter nenhuma expressão. Isso não será um erro; no entanto, geralmente, em um design de e-mail responsivo, as media queries possuem propriedades.

Abaixo está um exemplo de template de e-mail codificado com CSS e media queries no Stripo:

• all — é uma expressão padrão que declara a media query para qualquer dispositivo;
• braille — todos os dispositivos dedicados a pessoas cegas. Esses dispositivos são baseados no sistema Braille;
• embossed — impressoras que usam o sistema Braille;
• handheld — smartphones e dispositivos semelhantes;
• print — impressoras e dispositivos relacionados;
• projection — projetores;
• screen — monitores e suas telas;
• speech — codificadores de voz, programas que reproduzem a voz ou leem textos em voz alta. Por exemplo, navegadores com suporte de voz;
• tty — dispositivos com largura e comprimento de linha fixos (por exemplo, teletipos, terminais de dados, dispositivos com limitações de tela);
• tv — televisores.

Para implementar um design de e-mail responsivo, o tipo “screen” é sempre utilizado.

Aqui está uma lista dos recursos mais usados em media queries:

• width;
• height;
• device-width;
• device-height;
• orientation;
• aspect-ratio;
• device-aspect-ratio;
• color;
• color-index;
• monochrome;
• resolution;
• scan;
• grid.

A maioria desses recursos pode ter o prefixo “min-” ou “max-”. Normalmente, você insere valores mínimos e máximos em pixels e usa porcentagens para definir os demais valores.

Como funciona o design de e-mails responsivos?

Com o design responsivo, é possível exibir duas versões diferentes de um mesmo e-mail para dispositivos móveis e desktops. Claro que, para isso, você precisa criar ambos os modelos. Essa é a melhor escolha para uma abordagem mobile-first, pois permite reduzir o tamanho do modelo móvel e, assim, carregá-lo mais rapidamente.

Outra vantagem é que, ao criar uma versão separada do e-mail para dispositivos móveis, você evita rolagens infinitas, tamanhos de elementos inadequados para toques com o polegar, fontes muito grandes ou pequenas demais, rolagens horizontais ruins, etc.

No entanto, não é obrigatório criar dois modelos diferentes de e-mail. Você pode simplesmente definir dois estilos distintos e declarar qual será usado com base na largura da tela. Essa abordagem é mais comum do que a criação de modelos separados. Como resultado, você terá uma solução responsiva que não perde em qualidade visual.

Além da largura do modelo de e-mail, é possível definir tamanhos diferentes para os elementos nas versões desktop e mobile. Isso melhora significativamente a experiência do usuário.

Não há necessidade de declarar estilos que não são suportados por determinados clientes de e-mail. O design responsivo sempre se apoia na simplicidade. Além disso, além dos estilos que você pode definir para larguras e alturas diferentes, também é possível escolher o layout com base na orientação da tela.

Aqui estão os resultados de teste do Litmus para templates de e-mail responsivos usados em diferentes versões do Gmail para celular:

Requisitos para design de e-mails responsivos

Antes de transformar seu design de e-mail em responsivo, você deve conhecer alguns requisitos para garantir uma transição sem falhas.

Use apenas fontes seguras para web

Fontes seguras para web são a base do design de e-mails responsivos. Elas fazem com que o navegador carregue fontes do diretório local — ou seja, fontes pré-instaladas no computador do usuário. Fontes seguras são confiáveis porque há uma grande chance de que seus destinatários já as tenham. Aqui estão alguns exemplos de fontes seguras que você pode usar para formatar seus textos:

• Arial;
• Verdana;
• Tahoma;
• Courier New;
• Times New Roman;
• Trebuchet MS;

Escrevemos um artigo completo sobre fontes para e-mails e como usá-las corretamente para que seus textos fiquem bonitos e acessíveis para pessoas com deficiência visual. Dê uma olhada — é fundamental que designers de e-mail saibam trabalhar com fontes da maneira certa.

Você também pode se interessar

Melhores fontes de e-mail: Dicas e truques de uso

Use imagens com resolução e tamanho maiores

Assim, elas serão exibidas corretamente em telas Retina. Claro, você não pode evitar totalmente a rolagem vertical, mas evite e-mails intermináveis e não force seus usuários a dar zoom para ler algo ou clicar em um botão. A rolagem horizontal deve ser evitada em 100% dos casos.

Estruture seus e-mails

Texto puro não é permitido. Use imagens e botões, e divida o texto em pequenos parágrafos para melhor leitura. A tela não deve ser ocupada apenas por texto corrido. Use frases curtas. O comprimento ideal de uma linha de texto deve estar entre 65 e 75 caracteres.

Certifique-se de que seu primeiro elemento de call to action (CTA) esteja visível já na primeira dobra da versão móvel do seu template. Para isso, você pode até redimensionar ou cortar o banner. O ideal é usar editores que permitam editar imagens sem necessidade de ferramentas externas.

(Fonte: Maillibr)

Utilize mensagens claras e conteúdo curto

Isso não tem relação direta com responsividade, mas influencia fortemente na experiência do usuário. Nunca use tabelas de dados em seus e-mails. É crucial utilizar o espaço em dispositivos móveis da forma mais racional possível. Quanto mais conteúdo houver, mais difícil será estruturá-lo e torná-lo legível.

(Fonte: Maillibr)

Escolha um template de coluna única para dispositivos móveis

Se você usar templates com duas ou três colunas em dispositivos móveis, corre o risco de que o conteúdo fique tão pequeno a ponto de se tornar ilegível, o mesmo acontece com botões e links. Cuide do design mobile-friendly. O tamanho mínimo de um elemento clicável deve ser de 44×44 pixels.

Crie um assunto de e-mail curto e claro

Evite usar letras maiúsculas ou abreviações incomuns. Definir um assunto claro e atraente é metade do sucesso das suas campanhas de e-mail marketing. Lembre-se: assuntos personalizados funcionam melhor do que assuntos chamativos genéricos.

Use uma hierarquia vertical clara

Criar uma hierarquia para seu conteúdo é como usar tabulação na programação. O código pode até funcionar se estiver em uma linha só, mas será ilegível — o mesmo ocorre com os e-mails. Se você não deixar espaço suficiente entre linhas ou elementos, a experiência do usuário será prejudicada.

(Fonte: Maillibr)

Não sobrecarregue seus e-mails com imagens desnecessárias

Se você usar três banners, mas apenas um tiver CTA, está cometendo um erro. O mesmo vale para produtos em e-mails promocionais. Pode parecer que, ao adicionar mais produtos, você venderá mais. Mas isso não é verdade. Não adicione mais de nove produtos. Se o objetivo for vender muito mais itens, crie uma série de e-mails promocionais ou envie um único e-mail que apresente categorias de produtos com links para páginas específicas.

No seu site, há espaço suficiente para descrever cada produto e mostrar seus benefícios. No e-mail, o espaço é limitado: cabe apenas uma pequena imagem, o nome do produto e o preço. E só. Não tente inserir informações gerais que todos já sabem achando que isso aumentará as vendas. Isso não funciona.

(Fonte: Maillibr)

É melhor escolher um editor de e-mails que ofereça várias soluções prontas de design para cartões de compras com produtos. Isso economiza tempo e torna o fluxo de trabalho mais eficiente. Se o editor fornece elementos de design de e-mail gratuitos e separados, você pode combiná-los em um único template responsivo — o que é muito melhor do que depender de templates prontos. Ao usar apenas componentes individuais de uma biblioteca personalizada, seu e-mail nunca será igual ao de outra pessoa.

Incorpore imagens fluidas

Sim, como diz o título, é melhor tornar suas imagens fluidas no design responsivo de e-mails — mas o que isso significa? Imagens fluidas são aquelas que se adaptam a diferentes tamanhos de tela especificados nas media queries, ou cujos tamanhos são definidos em porcentagens com base nas dimensões máximas ou em unidades relativas. Isso evita a rolagem horizontal.

Aqui está um exemplo de como tornar a imagem fluida (para celulares com largura máxima de 480px) usando uma media query:

 <style type="text/css">
   @media only screen and (max-width: 480px){
       .emailImage{
           height:auto !important;
           max-width:600px !important;
           width: 100% !important;
       }
   }
</style>

Abaixo estão as unidades relativas mais utilizadas:

• percentual — %;
• ex (tamanho da fonte com base na altura do “x”) — ex;
• em (tamanho da fonte) — em;
• rem (tamanho da fonte para elementos raiz) — rem;
• altura da janela de visualização — vh;
• largura da janela de visualização — vw;
• máximo da viewport — vmax;
• mínimo da viewport — vmin;
• fração (fração do espaço disponível) — fr;
• caractere (largura do caractere) — ch.

Quanto aos vídeos, você também pode definir tamanhos adequados tanto para desktop quanto para dispositivos móveis da mesma forma que faz com imagens. Tornar suas imagens e vídeos fluidos evita problemas na exibição do e-mail.

Outra solução é usar imagens SVG em vez dos formatos mais populares como PNG e JPEG. Esse formato permite ampliar e redimensionar a tela sem perder a qualidade da imagem.

Além disso, o formato SVG permite alterar a cor e o fundo da imagem diretamente no código ao declarar o elemento. No entanto, é importante saber que imagens SVG costumam ter tamanho de arquivo maior do que PNG e JPEG com a mesma resolução. Talvez por isso ainda sejam usadas com menos frequência.

Ajuste seus textos

Como já mencionado nas exigências de design para criar um template de e-mail responsivo, o comprimento ideal de uma linha deve ser entre 65 e 75 caracteres. A largura total de 600 px do e-mail limita bastante o volume de texto possível. Mesmo poucas frases já ocupam muito espaço.

Tente usar o mínimo de texto possível, mas ainda assim aborde o tema. Frases genéricas e clichês não são bem-vindos. Seja criativo, mas lembre-se de que o texto também deve conter chamadas para ação. Após a leitura, não deve haver dúvidas nem confusões sobre o propósito da mensagem.

Se você usar espaçamento duplo entre linhas, pode funcionar bem no desktop, mas arruinará a experiência no celular. Este é o momento certo para usar uma media query que defina um espaçamento diferente entre linhas para dispositivos móveis — isso resolverá o problema.

A fonte mais usada com tamanho de 14 px é perfeita para desktops, mas não é grande o suficiente para dispositivos móveis. Use fontes com, no mínimo, 16 px para o conteúdo textual. Ao mesmo tempo, evite usar tamanhos excessivamente grandes para títulos e subtítulos. Não será uma boa experiência se o título ocupar 3 a 4 linhas.

Nunca escreva texto depois do rodapé apenas para seguir a regra da proporção de 60% de imagem e 40% de texto. Às vezes, filtros de spam bloqueiam mensagens compostas apenas por elementos gráficos. Nesses casos, pense se todas as imagens são realmente necessárias para transmitir sua mensagem. Crie mais blocos de conteúdo no corpo do e-mail e forneça apenas informações úteis.

Depois de aplicar todos esses requisitos, você terá um e-mail perfeitamente estruturado e responsivo. Aqui está um exemplo de um ótimo e-mail responsivo com todos os critérios aplicados:

(Fonte: Maillibr)

Conclusão

O design de e-mails responsivos abre novas possibilidades para a otimização móvel das suas campanhas. Ao adotar essa abordagem, você garante que seus destinatários tenham a mesma experiência ao interagir com seus newsletters, independentemente do dispositivo usado para abri-los.

No entanto, lembre-se de que, junto com as soluções tecnológicas, vêm nuances e requisitos que devem ser considerados ao criar e-mails responsivos. A escolha correta de fontes, estrutura do conteúdo, imagens e hierarquia geral ajudará você a criar campanhas de e-mail marketing verdadeiramente responsivas, nas quais o conteúdo pareça natural, tanto no desktop quanto no celular.