Designs, modelos e exemplos para 2023

Você já abriu um e-mail em seu telefone e a imagem era de baixa qualidade, o texto era muito pequeno e o botão de chamada para ação estava quebrado? Essas são todas as falhas do design de e-mail estático. E-mails responsivos são a resposta.

Dado que mais da metade dos residentes nos EUA visualizam as mensagens de marketing por e-mail em seus telefones, você precisa otimizar seus e-mails para várias telas, incluindo celular e tablet.

E-mails responsivos usam imagens e tabelas fluidas para permanecerem flexíveis em diferentes tamanhos de tela. Em última análise, eles fornecem conteúdo projetado para a experiência ideal de cada usuário.

Embora e-mails responsivos possam ser projetados usando consultas de mídia CSS, você não precisa de nenhuma experiência em codificação para criar uma. Criar um e-mail responsivo não é apenas um trabalho para programadores.

Aqui, reunimos algumas práticas recomendadas e modelos prontos para uso, além de um rápido tutorial sobre os fundamentos dos emails responsivos.

E-mails responsivos também são mais acessíveis, pois permitem que os assinantes leiam em seus dispositivos preferidos.

Para ilustrar, aqui está a aparência de um e-mail promocional que recebi no computador.

Este e-mail tem imagens incríveis, ícones de compra e está bem formatado. Quando abro o e-mail no celular, é isso que recebo.

Ainda tenho as mesmas informações e as mesmas fotos e ícones de compra. A única diferença perceptível é o formato do e-mail. É diferente para se adequar melhor à experiência móvel.

Agora, imagine se esse mesmo layout de desktop fosse aplicado ao mobile. Eu teria que aumentar o zoom no meu telefone para ver qualquer uma das fotos ou texto. Em vez de fazer isso, eu cancelaria a assinatura.

Com um e-mail responsivo, a experiência do usuário pode ser aprimorada, bem como o ROI da campanha.

Pense nisso: os assinantes satisfeitos com um design de e-mail móvel otimizado abrirão mais mensagens de marketing porque sabem que serão acessíveis e terão uma boa aparência.

Então, com toda essa conversa sobre e-mails responsivos, você deve estar ansioso para criar o seu próprio. Em seguida, veremos alguns exemplos e modelos de e-mail responsivo.

Designs de e-mail responsivos

Há muitas maneiras de criar e-mails responsivos.

Se você tiver conhecimento de codificação, poderá codificar diferentes modelos de email para diferentes tamanhos de tela. Você também pode usar um modelo pré-fabricado que funciona em todos os tamanhos de tela.

Não importa sua abordagem, você precisará de seu software de marketing por e-mail. Aqui, você pode criar um e-mail e visualizá-lo em vários dispositivos. A maioria dos softwares de e-mail mostrará como o design ficará em vários dispositivos.

O vídeo abaixo mostra como criar um e-mail com um modelo. No vídeo, o usuário está no Klaviyo, mas os conceitos são verdadeiros, independentemente do software que você usa.

Codificando um Email Responsivo

Se você deseja tornar os elementos do seu e-mail responsivos, precisará trabalhar com consultas de mídia.

Consultas de mídia são uma técnica CSS. Ele permite que você defina regras de estilo que só aparecem se certas condições forem verdadeiras. Por exemplo, você pode especificar quais tamanhos de fonte e tamanhos de imagem usar quando uma tela tiver 600px de largura ou menor.

Ao trabalhar com e-mail, você pode usar consultas de mídia para especificar a aparência do seu design em desktops, tablets e dispositivos móveis. Para fazer isso, você precisará especificar o seguinte:

• Use o seletor “@media” e especifique “tela”. Isso indica que o código afetará dispositivos com tela.
• Defina sua “largura máxima” em pixels. Isso especifica o tamanho da tela onde o código entrará em vigor.
• Especifique quaisquer guias de estilo CSS que você deseja que essa tela específica siga.

Vamos dar uma olhada no código abaixo.

tela @media e (largura máxima: 600px) {

corpo {

tamanho da fonte: 30px;

}

}

Quando aplicado ao CSS de um e-mail, o corpo do texto aparecerá em um tamanho de 30px para telas com 600px de largura ou menores.

Embora essa abordagem possa ajudá-lo a criar certos elementos de sua resposta de e-mail, recomendamos o uso de um modelo, se possível.

A menos que você tenha uma experiência abrangente em web design, codificar várias telas de mídia pode ser demorado e frustrante.

Se você não é técnico ou deseja um método mais fácil, tente usar uma ferramenta de marketing por e-mail com modelos responsivos integrados. O software de e-mail gratuito da HubSpot, por exemplo, fornece modelos de arrastar e soltar que respondem por padrão.

Exemplos de design de e-mail responsivo

É hora de explorar exemplos. Comece com este vídeo, que aborda algumas das melhores campanhas de email marketing.

Em seguida, você pode ler sobre alguns de nossos designs de e-mail responsivos favoritos.

1. Boletim TOMS

No boletim informativo da TOMS, a principal diferença entre a versão para desktop e a versão móvel é o empilhamento e o tamanho dos anúncios gráficos.

Com design responsivo, a versão móvel não possui navegação desordenada e a imagem se ajusta perfeitamente à tela. Os CTAs também foram movidos para melhor visibilidade.

Fonte da imagem

2. O Metropolitan Museum of Art

Conforme visto no boletim informativo da TOMS, o design de e-mail responsivo ajuda a empilhar o conteúdo de uma maneira visualmente atraente e fácil de digerir. Este exemplo do MET não é diferente.

No celular, o posicionamento do menu muda. Links para diferentes itens da loja de presentes estão na parte inferior da página. Isso mantém as imagens dos souvenirs disponíveis na frente e no centro.

Fonte da imagem

3. Amoreira

Novamente, com um design de e-mail responsivo, o nome do jogo está se acumulando. Trata-se de tornar o conteúdo fácil de ler e visualmente atraente, não importa quão pequeno seja o dispositivo em que alguém está visualizando o conteúdo.

A alternância de fotos e texto faz sentido para desktop, enquanto o empilhamento consistente de fotos sobre texto relacionado para celular, juntamente com as linhas divisórias, garante que o visualizador não fique confuso.

Fonte da imagem

Modelos de e-mail responsivos

Um modelo responsivo se adapta automaticamente a qualquer tamanho de tela, portanto, seja o e-mail aberto em um smartphone, tablet ou computador, ele terá uma ótima aparência e terá funcionalidade completa.

Para aqueles com menos experiência em codificação ou aqueles que desejam gastar menos tempo com design, meu conselho é usar um modelo. Eles são uma maneira infalível de garantir que seu e-mail pareça profissional e seja responsivo.

Modelos de e-mail responsivos economizam seu tempo ao criar um e-mail que poderia ter sido escolhido em uma seleção. Por exemplo, a ferramenta de marketing por e-mail da HubSpot inclui mais de 60 modelos apenas para e-mails responsivos.

Vamos dar uma olhada em algumas opções de modelo agora.

1. HubSpot

A HubSpot oferece alguns modelos de e-mail responsivos gratuitos. Se você é um cliente da HubSpot ou um usuário gratuito, pode baixá-los e experimentá-los.

Por exemplo, aqui está um dos modelos de e-mail responsivos — observe a barra lateral, onde você pode visualizar o modelo em vários dispositivos.

Fonte da imagem

Clicar nos tipos de dispositivos e certificar-se de que seu e-mail está formatado de acordo é uma das etapas finais no processo de design e é o apenas passo no processo de e-mail responsivo ao usar um software como o HubSpot.

Ao clicar no dispositivo smartphone para visualização, por exemplo, você pode ver se o seu conteúdo – incluindo tamanho da fonte e resolução da imagem – está formatado de forma agradável para dispositivos móveis.

2. Monitor de campanha

Os modelos oferecidos pelo CampaignMonitor são semelhantes a muitos outros, nos quais os resultados de e-mail responsivo são mostrados na ferramenta de visualização. Por exemplo, aqui está um modelo do CampaignMonitor:

Fonte da imagem

Você pode ver os diferentes dispositivos lado a lado para comparar os elementos de design facilmente. Pequenas edições podem ser feitas para criar a melhor experiência para todos os assinantes.

Os modelos do CampaignMonitor geralmente são gratuitos, portanto, é uma boa escolha se você tiver um orçamento mínimo.

3. Stripo

O Stripo oferece mais de 300 modelos de e-mail HTML gratuitos. Você pode escolher modelos por setor, estação, tipo e recurso. Por exemplo, aqui está um modelo da seção do setor de negócios.

Fonte da imagem

Um bom sinal de um modelo de e-mail responsivo sólido é a opção de visualizar a visualização nas variações de desktop e smartphone, conforme mostrado no modo de visualização do Stripo.

Observe como um layout de coluna única foi adotado na visualização móvel para atender às especificações dos telefones.

Stripo é um site que você pode visitar rapidamente para encontrar um modelo que atenda aos seus objetivos. Você pode considerar o Stripo se quiser experimentar e-mails responsivos ou se quiser alguma inspiração de design.

4. Contato Constante

O Constant Contact oferece mais de 200 modelos de e-mail profissionais que podem ser acessados ​​após a inscrição. Ao observar o exemplo abaixo, você pode ver que a plataforma oferece modelos de e-mail responsivos.

Fonte da imagem

Os modelos do Constant Contact têm edição de arrastar e soltar, a opção de adicionar pesquisas, funções de comércio eletrônico e uma ferramenta de biblioteca de fotos. Esses recursos podem ajudar a criar os assinantes de e-mail que desejam ver.

É útil usar um serviço como o Constant Contact porque as ferramentas específicas permitem que você mantenha a consistência, como no exemplo acima. Você pode dizer que a natureza responsiva do e-mail não compromete nenhum dos elementos de design.

Agora que examinamos algumas opções de modelo, vejamos outra maneira de fazer com que os emails responsivos funcionem, junto com as práticas recomendadas.

Melhores práticas de e-mail responsivo

O design exato do seu e-mail responsivo varia de acordo com os objetivos da sua campanha. No entanto, essas dicas podem ajudá-lo a garantir a melhor experiência para seus leitores.

• Certifique-se de que seu e-mail responsivo seja escalável e flexível. Visualize o e-mail em diferentes dispositivos para garantir que sua mensagem seja responsiva.
• Se você estiver codificando seu próprio e-mail, lembre-se de que as consultas de mídia CSS alteram os campos que são fixos para campos fluidos.
• Use fontes maiores que serão fáceis de ler em telas menores.
• Os layouts de coluna única são mais fáceis de dimensionar. Se layouts simples são bons para suas páginas da web, considere-os definitivamente para e-mails responsivos.

Certifique-se de testar seus e-mails antes de clicar em “agendar”. Finalize os designs apenas depois de ver como eles ficam em várias resoluções de tela. Muitas pessoas acessam e-mails pelo celular apenas pela facilidade.

Uma maneira simples de verificar a eficácia do seu e-mail é enviá-lo para você ou para sua equipe como um teste – ele se compara a outros e-mails de marketing responsivos em sua caixa de entrada? Se assim for, você está pronto para enviar.

Introdução aos e-mails responsivos

E-mails responsivos criam uma experiência melhor e mais acessível para seus clientes. Se você está apenas fazendo a transição, comece explorando modelos de e-mail responsivos pré-criados. Isso economizará seu tempo e, ao mesmo tempo, oferece flexibilidade de design.

Então, peça uma segunda opinião. Peça a um colega para abrir um e-mail no computador e no telefone. Você pode obter feedback honesto sobre ambas as experiências.

Por último, não tenha medo de experimentar. Você pode testar diferentes designs responsivos A/B até encontrar um layout que ressoe mais.

Em breve, você estará enviando e-mails responsivos e aumentando suas taxas de abertura.