Um guia completo para e-mail em HTML

Maizzle usa a estrutura Tailwind CSS para permitir que designers e desenvolvedores façam protótipos de e-mails com HTML e CSS. Ele também vem com belos modelos se você preferir não desenvolver todos os e-mails do zero. Como alternativa, você também pode considerar MJML .

Modelos de e-mail HTML à prova de balas

Cerberus e email HTML fornecem pequenas coleções de modelos confiáveis ​​e sólidos para emails em HTML responsivos que são bem testados em mais de 50 clientes de email, incluindo Gmail, Outlook, Yahoo, AOL e muitos outros. EmailFrame.work permite que você crie modelos de e-mail em HTML responsivos com opções de grade pré-construídas e componentes básicos, com suporte em mais de 60 clientes de e-mail.

Codedmails inclui 60 modelos e temas de e-mail, todos escritos em MJML e testados para compatibilidade. O código está disponível no Github e os modelos são gratuitos para uso em projetos não comerciais, enquanto os arquivos de origem MJML são fornecidos para um custo extra.

Stripo , Chamaileon , Cartões postais , Topol.io , GoodEmailCode , Pixelbuddha e Bee Free todos apresentam muitos modelos de e-mail HTML gratuitos, o Litmus fornece Modelos de e-mail responsivos para boletins informativos, atualizações de produtos e recibos, e o CampaignMonitor tem um criador de modelos de e-mail HTML gratuito com a funcionalidade arrastar e soltar.

Suporte ao recurso de e-mail em HTML: Posso enviar e-mail…?

Uma ferramenta útil que pertence ao conjunto de ferramentas de todos que se encontram em conflito com e-mails em HTML-seja de vez em quando ou regularmente-é caniemail.com . Inspirado no conceito de sucesso de caniuse.com , Can I email permite que você verifique o suporte para 179 recursos HTML e CSS em 31 clientes de e-mail.

Você pode inserir um recurso para ver quão bem ele é suportado , verificar o índice de recursos, comparar clientes de e-mail ou visualizar um placar de suporte ao cliente de e-mail que classifica os clientes de e-mail com base em seu suporte. Os dados completos também estão disponíveis como um arquivo JSON.

Um repositório para erros de e-mail

Apple Mail não exibe SVGs incorporados, Gmail não exibe e-mails com largura total, Outlook mudando o comportamento de Gifs animados-todos nós sabemos como os clientes de e-mail às vezes se comportam de maneira estranha.

Para ajudá-lo a entender o que está acontecendo quando você encontra bugs como esses, Rémi Parmentier mantém Bugs por e-mail , um GitHub repositório para comportamentos estranhos do cliente de e-mail . Ele não apenas torna a vida dos designers de e-mail mais fácil, fornecendo um local para discutir bugs, mas também tenta relatar cada bug à empresa em questão e corrigi-los para sempre. Mas, caso não seja possível, Como direcionar clientes de email fornece uma visão geral das soluções alternativas para direcionar clientes de email específicos.

Gerador de link mailto

Os bons e velhos links HTML podem fazer mais do que normalmente acreditamos. Podemos estar acostumados com o prefixo mailto: , mas na verdade gerar o código pode ser muito chato. Mailtolink.me faz uma coisa, e faz bem: gera o snippet para os links mailto incluindo CC, BCC, linha de assunto e corpo do texto.

Prompt de seleção de mailto

Às vezes, quando você clica em um endereço de e-mail, ele pode abrir um aplicativo que seus clientes não estão realmente usando. É por isso que é comum copiar e colar endereços de e-mail em vez de clicar nos links diretamente. Para evitar a frustração do outro lado, podemos usar Mailgo e MailtoUI .

Em vez de abrir um cliente de e-mail nativo, ambas as ferramentas exibem uma janela modal , permitindo ao usuário escolher um dos serviços preferidos ou copiar e colar o link. Além disso, o Mailgo pode endereçar todos os links tel , permitindo que eles abram o Telegram, WhatsApp, Skype, façam chamadas como padrão ou copiem o número do telefone-e também suporta o modo escuro.

Inspiração por e-mail

Pode parecer que apenas porque o e-mail em HTML parece muito antigo e desatualizado, também o são as possibilidades do que podemos fazer com o e-mail em HTML. No entanto, há muitos recursos , blogs e podcasts com novas técnicas de e-mail-alguns deles geralmente muito criativos !

Emails acessíveis

Com o e-mail, qual é a nossa posição em termos de acessibilidade ? Anunciamos e-mails corretamente aos leitores de tela? E o modo escuro? Repositório de e-mail acessível destaca uma série de artigos, ferramentas, apresentações e recursos sobre acessibilidade-não apenas para e-mail, mas a maioria especificamente para isso.

Com Accessible-Email.org , você pode analisar as campanhas enviadas e verificar se há melhorias de acessibilidade. Com o Modo escuro para simulador de e-mail , você pode verificar como fica seu e-mail no modo escuro.

CSS inline e e-mails HTML de transformação

Se você só precisa de um espaço limpo para transformar seu HTML e CSS, Alter.Email é uma opção confiável. Com a ferramenta, você pode escolher alguns “transformadores”-por exemplo, CSS embutido e limpar o código , remover CSS não utilizado, bem como formatar HTML e até mesmo evitar palavras de viúva. Como alternativa, você também pode usar Postdrop que também permite reduzir e embutir CSS e enviar um e-mail de teste também.

Remover CSS não utilizado de modelos de e-mail

Escrever CSS não é uma tarefa particularmente empolgante com e-mail em HTML, espalhado por ! important e estilos inline por todo o lugar. Para remover CSS não utilizado dos modelos de e-mail, existe o Email Comb . A ferramenta permite que você adicione classes e IDs que deseja ignorar, escolha se deseja minimizá-los e remover comentários, e mostra exatamente o que foi removido.

Cheatsheet para direcionar clientes de e-mail

Os clientes de e-mail modificam e removem alguns de seus HTML e CSS, geralmente sem piedade. Se um dos clientes de e-mail não se comportar como esperado, você pode tratá-lo separadamente. Uma cheatsheet para direcionar clientes de e-mail permite que você escolha um cliente de e-mail de destino e pelo menos tente endereçá-lo diretamente. Pode não funcionar o tempo todo, pois os clientes de e-mail mudam o tempo todo, mas é algo que vale a pena tentar.

Todos os recursos de e-mail em HTML

Thebetter.email fornece um repositório crescente de recursos úteis de marketing por e-mail, incluindo pessoas, sites de aprendizagem, ferramentas, detalhes sobre provedores de serviços de e-mail , boletins informativos, código e recursos de e-mail interativos. Escolhido a dedo por Jason Rodriguez, que está no setor há anos e passou muito tempo vasculhando a lama para encontrar as coisas boas.

Recursos de marketing por e-mail

Se você precisa se aprofundar nas trincheiras do e-mail HTML, práticas recomendadas e marketing por e-mail, Guias CampaignMonitor e Os Guias Mailchimp têm muitos recursos para começar. Na verdade, alguns deles serão específicos do produto, mas também são guias mais gerais sobre as práticas recomendadas para o envio de e-mails, guias de design, dicas de entrega, requisitos de anti-spam e muitos outros tópicos ao longo dessas linhas.

E se você estiver procurando por tendências contínuas em marketing por e-mail, Tendências de marketing por e-mail da Oracle inclui muitos vídeos sobre capacidade de entrega de e-mail, arquitetura modular de e-mail, acessibilidade de e-mail e também marketing por e-mail.

Modo escuro no Gmail e Outlook

Todos nós nos acostumamos com o modo escuro em muitos aplicativos e sites, mas e quanto ao suporte para o modo escuro em clientes de e-mail HTML? Podemos, é claro, enviar o mesmo e-mail para todos os assinantes, mas se você está acostumado com o modo escuro em seu sistema operacional, um e-mail claro pode ser desagradável e encorajar o abandono .

O Guia do desenvolvedor para o modo escuro no e-mail destaca algumas das diretrizes importantes para ter em mente quando você estiver construindo uma versão em modo escuro de seu e-mail em HTML. Explica como direcionar o modo escuro, como lidar com imagens e suporte geral do navegador (o que é muito bom!).

Rémi Parmentier vai um pouco mais fundo, mostrando como corrigir o problema do Gmail problemas de modo com CSS Blend Modes . O Gmail impõe a mudança de qualquer cor de texto clara para uma cor escura. Se você precisar consertá-lo, Rémi criou um uso criativo do mix-blend-mode (compatível com o Gmail) para manter a cor clara do texto, se necessário. E se você precisar garantir que seus e-mails respondam ao modo escuro do Outlook.com , Remi está coberto também.

IDE de desenvolvimento de e-mail HTML

Se você gasta muito tempo com e-mail em HTML, pode usar um editor de e-mail em HTML dedicado. Parcel é exatamente isso: um editor de código construído especificamente para codificar e projetar e-mails. Ele fornece visualizações ao vivo, para que você possa ver em tempo real o que está construindo, e também possui recursos de acessibilidade prontos para uso, para que você possa verificar problemas de acessibilidade enquanto constrói ou projeta o e-mail. Além disso, a ferramenta também permite que você colabore com sua equipe e execute testes de e-mail diretamente da ferramenta.

Como alternativa, você também pode dar uma olhada no Mail Studio , um aplicativo de desktop sofisticado (para Windows, macOS e Linux) que combina visual e edição de código em um IDE de e-mail .

O aplicativo vem com uma biblioteca de componentes, de cabeçalhos a barras de navegação e acordeões, alguns modelos de e-mail responsivos, integrações Google Fonts, suporte Sass integrado, paleta de comandos, ferramentas de colaboração, visualizações de e-mail e até integração com provedores de serviços de e-mail como MailChimp, Campaign Monitor e Sendgrid. A integração do Figma deve chegar em breve.

Gere uma visualização de e-mail de página inteira

Se precisar de uma visualização de página inteira do seu e-mail em HTML, Emailpreview.io pode ser exatamente o que você precisa. Você pode copiar/colar HTML ou importar um arquivo EML que acabou de receber e a ferramenta produzirá uma imagem totalmente renderizada do seu e-mail. Você também pode escolher a largura do dispositivo. Uma pequena ferramenta útil para ficar por perto.

Bloqueador de rastreamento de correio

A maioria dos e-mails de marketing incluem rastreadores em e-mails em HTML, para que possam acompanhar com que frequência, quando e onde os clientes abrem os e-mails. MailTrackerBlocker atua quase como um bloqueador de anúncios para navegadores, mas funciona com clientes de e-mail. A ferramenta identifica quem está rastreando os clientes e remove os pixels de rastreamento antes que eles possam ser exibidos, para que você ainda possa carregar todo o conteúdo remoto e manter seu comportamento privado. Atualmente disponível apenas para Apple Mail no macOS 10.11-11.x ( mensagem para Jeremy Keith! ).

Tornando o e-mail melhor

Caixas de entrada transbordando, spam com solicitações de backlink, pessoas enviando e-mails para você em uma sexta-feira à tarde e fazendo o acompanhamento na segunda-feira de manhã-há muitas coisas que tornam desagradável lidar com e-mail. No entanto, como não há como contornar o e-mail, há apenas uma solução: vamos melhorar a situação juntos. Com isso em mente, Chris Coyier está executando “ Email is Good ”, um site sobre produtividade de e-mail .

“E-mail é bom” analisa o que torna os e-mails irritantes, dicas e ideias sobre como podemos fazer melhor, bem como pequenas anedotas com as quais todos podem se identificar. Uma ótima oportunidade para refletir sobre como cada um de nós lida com o e-mail e as reações que nossos hábitos de e-mail podem provocar por parte do destinatário.

Conclusão

Provavelmente perdemos algumas técnicas e recursos importantes e valiosos! Portanto, deixe um comentário e consulte-os-adoraríamos atualizar este post e mantê-lo atualizado para que todos possamos voltar a ele e criar e-mail em HTML melhor e mais rápido.

Continue arrasando!

Leitura adicional

• Ferramentas de auditoria CSS
• Geradores CSS
• Geradores SVG
• Uma introdução à criação e envio de e-mail em HTML para a web Desenvolvedores
• Além disso, inscreva-se em nossa newsletter para não perder as próximas.