Neste guia, vamos explorar as definições de botões de e-mail e estudar os fundamentos de design de e-mails. Com exemplos reais para comparar, você terá uma compreensão sólida de como cor, texto e otimização para dispositivos móveis impactam sua eficácia.
Um botão de e-mail em HTML é um dos pilares do marketing por e-mail de sucesso. Para mim, ele é um atalho para a página do site e um elemento de incentivo para comprar ou ler um post no blog. No entanto, quanto mais e-mails os destinatários recebem, mais exigentes eles se tornam. Há uma saída? Sim.
Implementar apenas a responsividade pode aumentar as taxas de cliques em até 15%. A acessibilidade, a psicologia das cores e a escolha do texto aumentam ainda mais as chances.
Então, qual é a receita do botão de e-mail para conquistar as pessoas? Como projetá-los sem habilidades de programação?
Juntos, responderemos a essas perguntas, compararemos quais emoções e ações diferentes botões despertam e aprenderemos como criar botões de e-mail em HTML com a Stripo. Vamos começar!
Entendendo os botões de e-mail em HTML
Antes de aprender como criar botões de e-mail, sugiro que estudemos esses elementos e revisemos seus tipos.
O que é um botão de e-mail em HTML?
Um botão em HTML é um elemento de layout de e-mail clicável, estilizado com folhas de estilo em cascata (CSS). Diferentemente dos elementos de texto, os botões se destacam, tornando-os impossíveis de ignorar.
Os botões de e-mail vêm em vários formatos e servem a múltiplos propósitos. É aqui que a diferenciação entra em cena:
- Botão de call to action, ou CTA: Este botão incentiva os destinatários do e-mail a agir — comprar, obter um desconto, ler um artigo ou agendar uma reunião — daí o nome do botão.
(Fonte: e-mail da ConnectTeam) - Botão somente texto: A principal característica desse botão é que ele usa apenas texto, sem elementos de estilo que lembrem um botão. O texto com hiperlink geralmente serve como opção de cancelamento de inscrição ou direciona os leitores para políticas e condições de serviço.
(Fonte: e-mail da Travel Awaits) - Botão bulletproof: O design desse botão garante a renderização correta em todos os clientes de e-mail. O segredo está em sua formação — ele é construído usando código HTML e CSS inline. Mesmo com as imagens desativadas no correio, esses botões permanecem iguais. Existem alguns subtipos de botões bulletproof com os quais você pode trabalhar:
- botões com padding: Este botão de e-mail é baseado em uma tabela HTML com estilos CSS para adicionar mais espaço ao redor do texto;
- Botões VML: VML significa Vector Markup Language. Essa tecnologia é usada, em particular, na criação de botões à prova de falhas para o Microsoft Outlook;
- botões baseados em borda: Em vez de usar padding em uma tabela de botão, você os estiliza com bordas grossas para definir seu formato.
(Fonte: e-mail da Ryanair)
- Botão baseado em imagem: Para criar botões baseados em imagens, você precisa de arquivos de imagem (JPG, PNG e JPEG) que representem um botão. Você pode experimentar o estilo ou as fontes, mas essa variante não é totalmente prática. E-mails baseados apenas em imagens podem carregar lentamente. Além disso, com as imagens desativadas, o botão desaparece da visualização e o e-mail não é exibido corretamente:
Agora, vamos dar uma olhada no mesmo e-mail com as imagens ativadas e botões baseados em imagens:
(Fonte: e-mail da Reserved)
(Fonte: e-mail da Reserved) - Botão de rede social: Esse tipo de botão de e-mail faz link para perfis de redes sociais e é usado principalmente no cabeçalho ou rodapé. Os botões são menores e representam uma plataforma de mídia social.
(Fonte: e-mail da Brevo)
Compreender os tipos de botões e seus pontos fortes é fundamental para aprimorar suas campanhas de e-mail. Agora, vamos discutir seu impacto real.
Por que os botões de e-mail em HTML são importantes?
Nada é insignificante no email marketing. Botões de email em HTML podem parecer triviais, mas influenciam o engajamento e criam uma experiência positiva para o usuário. Como?
Um botão de CTA bem elaborado pode aumentar os cliques em 371% e impulsionar as vendas em 1617%.
Cores contrastantes, mensagens de texto claras e fontes aumentadas fazem os botões de email se destacarem e motivam os destinatários a completarem uma ação.
Além da aparência, botões em HTML tornam os emails fáceis de navegar e frequentemente dividem o texto longo. Um exemplo pode ser mais convincente.
Você notou que a frase “Explore Adventure Fix GO” foi usada duas vezes na captura de tela abaixo? Isso mesmo! A primeira vez, foi mencionada no texto, e na segunda instância, serviu como texto do botão.
(Fonte: Email da Adventure Fix)
Eu notei apenas no botão a princípio — e só depois de ler atentamente o texto percebi que foi repetido! Isto mostra o quão poderosos e notáveis são os botões.
A mensagem do botão nunca deixa de chamar a atenção, então botões de email bem elaborados são mais do que um elemento, são uma ferramenta. Sugiro que avancemos para o design e vejamos o que torna alguns botões ótimos.
Design de botões de email em HTML
Elaborar botões é tanto uma ciência quanto uma arte. Eles devem ser utilizáveis, acessíveis, rápidos de carregar e esteticamente agradáveis. Embora o visual do botão em HTML possa ser a primeira coisa que chama atenção, a acessibilidade faz com que funcione para todos.
Botões de email que não são ajustados para leitores de tela ou pessoas com deficiência desaparecem do contexto e se perdem. É por isso que a acessibilidade é o próximo tópico que abordaremos.
Acessibilidade
A acessibilidade permite que todos os destinatários, incluindo assinantes com deficiência visual e aqueles que utilizam leitores de tela, interajam com os emails.
De acordo com as Diretrizes de Acessibilidade para Conteúdo da Web, há alguns pontos a considerar ao criar conteúdo de email:
- Tecnologias assistivas devem ser capazes de definir o propósito do botão usando apenas texto.
- Se o seu botão em HTML for animado, ele não pode incluir mais de três piscadas por segundo.
- Um botão de email e a cor de seu texto devem ter uma proporção de contraste mínima de 4.5:1.
- Um botão inteiro deve ter um tamanho mínimo de 24 × 24 pixels CSS.
- Elementos de layout, incluindo botões, devem ser totalmente operáveis através de um teclado.
A boa notícia é que, se você criar seus modelos com o Stripo, tudo, incluindo botões de email, será acessível. Se você usar outras ferramentas ou trabalhar com o editor HTML, mantenha esses pontos em mente enquanto avançamos para as dicas de design.
Escolha de cores
Vou começar com a psicologia das cores
Você sabia que a cor vermelha, como cor de fundo, é considerada ter uma grande influência? Ela está associada ao poder, por isso o botão de e-mail abaixo imediatamente me instigou a clicar. Sua taxa de contraste de 5.63 também o torna visualmente acessível e fácil de identificar.
(Fonte: E-mail da New Balance)
No entanto, enquanto a New Balance se beneficia da escolha da cor de fundo, empresas de saúde devem evitá-la. Vermelho pode causar ansiedade, então verde e azul, que representam tranquilidade e estabilidade, são escolhas melhores.
O próximo exemplo de cor que analisaremos é o amarelo, que é frequentemente associado à felicidade. Do ponto de vista do contraste, ele tem uma taxa de 6.51, que atende aos requisitos e atrai atenção. Não é surpresa que uma companhia aérea tenha escolhido esta cor de fundo para o botão.
(Fonte: E-mail da Ryanair)
Texto do botão
Agora que discutimos as cores, sugiro que passemos para o texto do botão. Chamar a atenção do leitor não é suficiente. O botão de e-mail deve servir como um motivador e encorajar ações.
O primeiro botão que analisaremos é preciso e compacto. Ele destaca a ação desejada, que é comprar agora. O tamanho da fonte é 14 px; a família de fontes é Verdana, e trata-se de uma fonte sans-serif. Com uma proporção de contraste de 18,42, o texto é mais do que legível e compreensível.
(Fonte: E-mail da Zappos)
O próximo texto de botão não incentiva muito, mas desperta curiosidade. Como se trata de um botão baseado em imagem, o código HTML não fornece detalhes sobre o tamanho ou a família da fonte. A proporção de contraste é 20,12, mas a diferença de estilo é clara: itálico para mistério e letras maiúsculas para intensidade.
(Fonte: E-mail da Reserved)
A escolha de botões de e-mail pretos não é acidental; mesmo com as mesmas cores, cada um desperta emoções diferentes. O texto que você escolhe para os botões é tão importante quanto o design.
Agora, será que os botões da minha caixa de entrada estarão de acordo com as recomendações para dispositivos móveis? Vamos ver.
Otimização para dispositivos móveis
O botão de e-mail deve ser funcional em dispositivos móveis. Se você ainda tiver dúvidas, os números podem convencê-lo!
Aproximadamente 61% dos destinatários de e-mails usam seus dispositivos móveis para verificar a caixa de entrada.
Não otimizar os elementos de layout significa perder potenciais clientes. Pessoalmente, dou alguns cliques nos botões de e-mail — se não funcionarem, não valem a pena. Com certeza, isso não precisa acontecer com os seus e-mails.
Aqui estão os pontos-chave a considerar:
- área de toque: as diretrizes de usabilidade do Google recomendam uma área mínima de 48 dp × 48 dp. Garanta que os botões de e-mail sejam fáceis de tocar;
- posicionamento do botão de e-mail: evite agrupar vários botões de call-to-action, pois isso dificulta tocar no desejado;
(Fonte: E-mail da The North Face)
- sistemas operacionais: Os sistemas operacionais podem tratar de forma diferente os mesmos elementos criados com código HTML. Dispositivos Android e iOS podem renderizar botões de e-mail de maneira distinta. Recomendo testar os elementos para evitar que isso aconteça.
Com todos os pontos de responsividade em mente, é hora de criar um botão de e-mail e partir para a prática.
Criando botões de e-mail em HTML com o Stripo
Os botões de e-mail são um elemento pequeno que ainda assim deve ser acessível e otimizado para dispositivos móveis. No entanto, a criação consome um tempo que a equipe de marketing por e-mail talvez não tenha.
É aí que o construtor de templates do Stripo pode salvar o dia! Veja como você pode criar um botão:
- Abra o Editor na sua conta.
- Arraste e solte o bloco de botão de e-mail na área do template:
- O botão foi adicionado.
Depois que o botão de e-mail estiver no template, você pode começar a configurá-lo. Se clicar no elemento, verá duas abas.
- Aba Configurações: Aqui, você pode editar o texto do botão, adicionar links, alinhar o botão, ajustar as margens para desktop, definir a altura e adicionar ícones.
- Aba Estilos: Esta aba permite escolher a cor do fundo do bloco, a cor do botão, a família de fontes, o tamanho da fonte e o raio do contorno.
Para garantir que seus botões de e-mail estejam otimizados para dispositivos móveis, use o seletor no canto superior direito. Depois de alternar, você pode ocultar elementos nos celulares para liberar espaço se o e-mail ficar carregado.
O botão criado no Stripo já é acessível e semanticamente correto, portanto será exibido corretamente e manterá os cantos arredondados em qualquer cliente de e-mail.
Se você quiser economizar ainda mais tempo, nossa equipe possui uma biblioteca de templates que você pode usar. Todos os templates de e-mail são editáveis, para que você possa ajustá-los às suas necessidades.
Concluindo
Apesar do seu tamanho, os botões de e-mail são uma parte essencial do layout. Tornar seus botões acessíveis, com bom contraste e otimizados para diferentes clientes de e-mail e dispositivos móveis pode melhorar suas campanhas de e-mail e aumentar as taxas de conversão.
Isso é algo com que a Stripo pode ajudar você! Enquanto você se concentra no design e nos elementos visuais, nós cuidaremos do código.
Na segunda parte deste guia, vamos aprender como criar botões de e-mail usando o editor HTML e o código. Fique ligado para mais dicas e truques de especialistas da Stripo!
0 comentários