Este é o futuro do design de e-mail

Muito se tem falado sobre o fato de o design de e-mail estar preso ao passado. Os designers que lidam com seus primeiros projetos lamentam o uso de tabelas e estilos embutidos. Os profissionais de marketing que planejam suas primeiras campanhas se recusam a pensar além da mentalidade de lote e explosão.

Mas alguns remetentes intrépidos se recusam a permitir que as tecnologias e mentalidades (às vezes) desatualizadas em torno do design de e-mail os detenham. Eles estão ultrapassando os limites do design de e-mail, usando técnicas comumente encontradas em web design avançado para surpreender, encantar e conectar-se com seus assinantes.

Vamos dar uma olhada nos desafios associados ao design experimental de e-mail e resumir algumas de nossas campanhas futurísticas favoritas por e-mail.

Email Marketing em 2020 Prepare-se para o futuro do marketing por e-mail com as percepções de 20 especialistas líderes, além de resultados de pesquisas de milhares de profissionais de marketing e consumidores. Baixe Agora

O design do e-mail não precisa ser limitante

Quando a maioria das pessoas pensa em email marketing, elas pensam em boletins informativos enfadonhos e enfadonhos enviados por empresas que procuram vender algo. E, se você tem a tarefa de criar uma campanha de e-mail, provavelmente está olhando para uma pilha de tabelas HTML e CSS embutido e contando os minutos até terminar de hackear um e-mail que funcione bem em qualquer lugar.

Embora seja verdade que os fundamentos do design de e-mail são um pouco antigos, não há realmente nenhum limite para o que você pode fazer com eles, com um pouco de criatividade, planejamento e muitos testes. Sim, os designers de e-mail precisam usar designs baseados em tabelas (obrigado, Outlook!), CSS embutido e nadar em um mar de hacks, mas, como mostram os exemplos abaixo, você ainda pode fazer algumas coisas incríveis na caixa de entrada.

Para provar isso, aqui estão alguns de nossos exemplos favoritos de e-mails que estão quebrando as regras e ultrapassando os limites do design de e-mail.

Um carrossel em um e-mail?

Há algum tempo, a varejista britânica B&Q enviou um e-mail que incendiou o setor.

Nesta campanha, os usuários podem passar o mouse ou tocar nos botões e assistir as diferentes seções de conteúdo deslizarem suavemente para dentro e para fora do e-mail. Comumente chamada de carrossel, essa técnica tem sido amplamente usada no mundo da web, mas é rara em campanhas por e-mail. Alguns podem reclamar que os carrosséis são ineficazes e apenas para exibição, mas a campanha da B&Q é um ótimo exemplo de como usar técnicas de ponta para surpreender os assinantes de e-mail.

O e-mail usa uma série de propriedades CSS3, junto com alguma segmentação inteligente, para realizar sua mágica. Usando transições CSS, animações, z-index e a propriedade overflow, os designers criaram um e-mail inteligente que implora para ser acessado.

O que é ainda mais impressionante é que tudo volta perfeitamente para clientes de e-mail que não suportam essas técnicas mais avançadas.

Cores loucas e Star Wars

A agência de e-mail do Reino Unido, Action Rocket, lidera o design de e-mail há algum tempo. Com seu habilmente intitulado resumo semanal de notícias por e-mail, Email Weekly, eles testam algumas técnicas criativas que podem vir a ser utilizadas nas campanhas dos clientes.

Um dos nossos exemplos favoritos é o e-mail que fazia a pergunta: “De que cor é este e-mail?”.

Usando animações de quadro-chave CSS, eles animam as cores de fundo da seção de título, o que cria um efeito hipnotizante e alucinatório. É sutil no início, mas uma vez que o assinante percebe a animação, ele não pode se virar.

Outro grande exemplo da Action Rocket é seu recente resumo inspirado em Star Wars que fez uso da propriedade experimental -webkit-perspective, junto com as transformações CSS, para recriar o icônico rastreamento de abertura do filme de ficção científica favorito de todos.

Infográficos em um e-mail?

Embora o bloco de exibição da agência de e-mail envie consistentemente ótimos e-mails, foi o infográfico recente deles que realmente chamou nossa atenção.

Semelhante às cores de fundo no exemplo Email Weekly, o bloco de exibição usa animações de quadro-chave CSS para adicionar um pouco de vida a uma campanha já bem projetada. O que é realmente bom é que o e-mail é perfeitamente responsivo, empilhando cada seção muito bem em dispositivos móveis. O design responsivo e os ícones animados servem para aprimorar alguns dados excelentes sobre o uso de e-mail móvel.

Não vimos muitos infográficos como esse em um e-mail, o que o torna ainda mais impressionante e inovador. Adoraríamos ver mais exemplos de infográficos, e é por isso que estamos realizando um Concurso da Comunidade dedicado a eles!

Vídeo HTML5 e tours interativos

Gostamos de praticar o que pregamos, e é por isso que tornamos nossos e-mails legais e responsivos, apesar de ter um público predominantemente de desktop. Esse também é o raciocínio por trás de algumas de nossas próprias campanhas de e-mail de ponta, como nosso histórico de vídeo HTML5 da Email Design Conference do ano passado (que estamos hospedando novamente neste verão ...).

Nosso designer, Kevin, usou um direcionamento avançado de cliente de e-mail para aprimorar progressivamente um design simples de outra forma. Se você está curioso para saber exatamente como ele conseguiu, ele escreveu uma postagem no blog detalhando o processo.

E, para comemorar o lançamento de nosso editor de código de e-mail, Builder, ele levou as coisas ainda mais longe, criando um tour interativo direto em um e-mail.

Fazendo uso de animações CSS, hack da caixa de seleção e uso liberal da propriedade de conteúdo CSS, ele mostra alguns dos recursos do Builder direto na caixa de entrada - dando aos assinantes uma amostra do produto sem precisar fazer login. Há muitos de código que o alimenta, mas você pode conferir diretamente no Builder (como o e-mail Inception).

Menus de e-mail mais saborosos

Assim como o e-mail carrossel, o designer Jerry Martinez se inspirou na web para implementar um menu de hambúrguer para assinantes de celular.

Os elementos de navegação são sempre um truque para designers de e-mail, especialmente em dispositivos móveis. Como tendem a ocupar uma quantidade significativa de espaço quando empilhados, eles podem desviar a atenção da frase de chamariz principal de uma campanha. Para resolver o problema, Jerry elaborou um elegante menu de hambúrguer que permite aos usuários móveis exibir itens de navegação seletivamente.

Ficamos tão impressionados com a solução de Jerry que convidamos pessoas para mostrar outros padrões de navegação criativos em um de nossos concursos da comunidade ...

Concursos da comunidade: The Truly Cutting Edge

Nossos concursos da comunidade são onde realmente desafiamos as pessoas a apresentarem algumas ideias malucas. A cada mês, damos a eles um tema e deixamos que aprimorem suas habilidades. Nosso primeiro concurso, olhando para usos criativos de texto ALT, rendeu alguns resultados surpreendentes, como Space Invaders em um e-mail:

Para o nosso segundo concurso, tivemos pessoas que sugeriram padrões de navegação interessantes. Ficamos impressionados com alguns dos resultados, como o conceito de navegação pegajoso de Remi Parmentier:

Tentar algo novo?

Embora seja empolgante experimentar coisas novas por e-mail, muitas coisas podem dar errado se você não testar suas campanhas por completo. As visualizações de email facilitam o teste de qualquer técnica em clientes de e-mail de desktop, webmail e móvel.

Experimente Litmus grátis →