Como criar lindos botões de e-mail à prova de balas que absolutamente funcionam
Publicados: 2021-06-11Se sua página da web é sua loja e seu e-mail é sua vitrine, então o botão de call to action (CTA) é sua incrível vitrine que leva as pessoas a entrar. Ou algo assim. Minha metáfora pode ter se desfeito aí.
Nem é preciso dizer que o CTA é uma das partes mais importantes do seu e-mail. E se for difícil de encontrar, difícil de usar ou danificado de alguma forma, seus assinantes vão fugir. (Fugir!)
Mas não se preocupe. Estamos aqui para ajudar a garantir que seu botão de CTA não seja um coelho sedento de sangue afastando seus assinantes. Nesta postagem do blog, vamos mergulhar um pouco mais fundo nos métodos de criação de botões para garantir que eles sejam à prova de balas para seus assinantes.
Prepare-se para aprender:
- O que é um botão à prova de balas?
- Práticas recomendadas de design de botão
- 5 técnicas de codificação
- Botão de preenchimento condicional
- Botão VML
- Botão de preenchimento
- Botão de borda
- Preenchimento + botão de borda
- Melhorias avançadas
- Suporte ao cliente por e-mail
O que é um botão à prova de balas?
Os botões à prova de balas são botões de call to action criados com código em vez de imagens. Você pode trocar com segurança seus GIFs, PNGs e JPEGs por HTML e CSS. Ao usar apenas o código, o botão será exibido em todos os clientes de e-mail, mesmo com as imagens desativadas, tornando-os “à prova de balas”.
Além do mais, você pode atualizar o conteúdo e o estilo de seus botões simplesmente editando seu modelo HTML. Você não precisa mais perder tempo criando botões em uma ferramenta de design como o Photoshop, enviando-os para um servidor e atualizando seu HTML.
Não use imagens
Direi isso uma vez e nunca mais direi. O único botão verdadeiramente à prova de balas é uma imagem.
*suspiro*
Eu sei. Mas essa é realmente a única maneira de garantir que seu botão tenha a mesma aparência em 100% dos clientes de e-mail. Porque todos nós sabemos o quão inconsistentes nossos e-mails podem parecer em diferentes clientes de e-mail, aplicativos e dispositivos.
Apesar disso, você nunca deve usar um botão baseado em imagem. Os botões de imagem se perdem quando as imagens são desligadas por causa do bloqueio de imagem e não estão acessíveis para seus assinantes que usam leitores de tela (mais sobre isso em um segundo).
Se seus CTAs estão contidos em imagens, há uma boa chance de que os assinantes estejam perdendo sua mensagem. Pior ainda, eles não estão interagindo com suas campanhas.
Usar botões de CTA baseados em imagem também afeta a acessibilidade do seu e-mail. Se você estiver ocultando o contexto do CTA dentro de uma imagem, os leitores de tela podem não conseguir lê-los, tornando seu e-mail inacessível para assinantes com deficiência visual.
Agora que você sabe mais sobre botões de imagem, deve perceber que minha afirmação inicial é quase sempre verdadeira. Os botões baseados em imagem têm a mesma aparência em todos os clientes de e-mail onde as imagens são ativadas e apenas se o assinante não estiver usando um leitor de tela . Então, eles são realmente à prova de balas? Não, eles não são. E como os dois casos mencionados acima são impossíveis de rastrear usando o rastreamento de e-mail padrão, não há como saber qual porcentagem de seus assinantes está tendo essa experiência ruim.
Portanto, descarte o CTA de imagem e certifique-se de que seus assinantes possam ver e usar seus CTAs, independentemente do dispositivo que estejam usando.
Os ingredientes de um belo design de botão
Os botões são mais do que apenas código. Existem vários fatores que tornam seus botões utilizáveis e atraentes.
Forma de botão
Faça seus botões parecerem botões.
Todos nós gostamos de criar botões divertidos e exclusivos, mas muitas vezes se você se afastar muito do que é esperado, os assinantes perderão a intenção - e não tomarão nenhuma atitude. Sim, as palavras podem dizer que algo é clicável, mas como dizem, “Uma imagem vale mais que mil palavras”.
Use formatos de botão padrão para garantir que você prenda a atenção das pessoas, especialmente se elas estiverem digitalizando. As formas padrão incluem:
- Cantos arredondados
- Cantos quadrados
- Em forma de pílula
- Botão fantasma
- Botão sombreado
Isso não quer dizer que você não possa fazer coisas divertidas com botões. O Magic Spoon adicionou alguns GIFs animados divertidos aos botões para chamar ainda mais atenção para eles.
Tamanho do botão
Com mais de 40% dos assinantes abrindo e-mails em dispositivos móveis, de acordo com nossos dados anuais de participação de mercado de clientes de e-mail, é importante que seu botão seja projetado para funcionar em todos os dispositivos.
Se o seu botão for muito pequeno, será difícil clicar em dispositivos móveis. Se for muito grande, parece menos um botão e mais um elemento de design.
Existem vários estudos sobre tamanhos de botão em telas sensíveis ao toque, mas a pesquisa parece ser feita mais comumente com milímetros como a unidade principal de medida. O que é menos do que ideal. Mas alguns fizeram uma proporção decente de milímetro a pixel.
O tamanho ideal para botões de fácil clique em dispositivos móveis foi traduzido para ser entre 42px e 72px (aproximadamente 11-19 mm). Isso parece estar na média para a altura do botão vista em toda a web, e os botões que usamos aqui no Litmus também se enquadram nessa faixa.
Em um estudo que subiu para 30 mm, a precisão toque para clique atingiu o patamar de 20 mm, então há um ponto em que o tamanho do botão não faz mais tanta diferença.
Espaço do botão
Certifique-se de que haja espaço em branco suficiente ao redor dos botões também, para que eles se destaquem. Isso também torna mais fácil para seus assinantes clicarem no botão correto.
O melhor exemplo disso seria um e-mail com muitos links em um parágrafo. Se você agrupar seus links juntos, seus assinantes nunca clicarão com precisão no que você deseja que eles cliquem, especialmente no celular.
Feedback visual
Nem todo cliente de e-mail oferece suporte a elementos interativos, mas, quando possível, adicionar um pouco de interatividade para fornecer feedback visual ajuda os assinantes a saberem que sua interação foi registrada.
É um sinal extra para eles de que algo pode ser clicado.
Isso pode ser tão simples quanto uma mudança de cor ou tão complexo quanto você deseja. (Sabemos que às vezes é divertido fazer tudo, então não se segure, mas saiba quando se controlar.)
Nosso próprio botão padrão tem uma mudança de cor, bem como um efeito de botão.
Mas também tentamos algo novo e nos divertimos muito com os botões do boletim informativo de janeiro. Um excelente elemento de design que também foi divertido de "empurrar".
Botão de texto
Mantenha sua cópia ou rótulo real do CTA acionável e direto ao ponto. Diga aos assinantes o que você deseja que eles façam da maneira mais clara e concisa possível.
Normalmente, 1 a 5 palavras são suficientes.
Esse comprimento também mantém seu e-mail escaneável. E se você tiver mais a dizer? Inclua-o em um título sobre o botão. Ao manter regularmente os CTAs dentro de 1 a 5 palavras, isso faz com que o raro momento em que você o examina se destaque de uma forma muito mais significativa.
5 maneiras de codificar um botão à prova de balas
Com mais de 300.000 renderizações de e-mail em potencial, é realmente surpreendente que você não possa fazer um botão de tamanho único que funcione em qualquer lugar?
O que você pode fazer é criar um botão que funcione em quase todos os lugares. E existem alguns métodos diferentes para criar esses botões, dependendo de suas necessidades. Dê uma olhada neles para descobrir qual deles funciona melhor para oferecer suporte aos seus assinantes.
1. Botão de preenchimento condicional
Agradecimentos a Mark Robbins por este botão de preenchimento condicional. É o que usamos aqui no Litmus.
Este botão usa o estilo do link para estilizá-lo para todos, exceto para o Outlook. Em seguida, ele usa código condicional para adicionar preenchimento específico do Outlook. Como o preenchimento do Outlook é controlado separadamente, você pode editá-lo sem afetar a aparência do botão em outros clientes de e-mail.
