Modelos de e-mail transacional de código aberto

Ao configurar uma nova conta do SendGrid, a criação de um conjunto de modelos de e-mail para sua conta é uma das tarefas mais importantes a serem concluídas. Se você planeja enviar e-mail por meio de nossa API para seu aplicativo ou serviço, provavelmente precisará de vários tipos diferentes de modelos de e-mail. Alguns dos mais comuns são redefinições de senha, confirmações de e-mail e recibos.

Embora haja uma vasta seleção de modelos de e-mail pré-fabricados na web, encontrar um conjunto que seja fácil de personalizar para corresponder à sua marca nem sempre é fácil.

Também é importante testar completamente os modelos em clientes de e-mail comuns. Esse processo pode ser demorado e retardar o processo de configuração da sua conta SendGrid e começar a enviar e-mails.

Percebi que a equipe do SendGrid poderia agregar valor aos nossos clientes criando um conjunto de modelos de e-mail de código aberto que os usuários poderiam aproveitar para cobrir esses casos de uso comuns. Os modelos não são apenas fáceis de personalizar, mas você estará pronto para enviar rapidamente!

Nosso conjunto de modelos, que estamos chamando de “Colar”, abrange 5 casos de uso:

• Redefinições de senha
• Confirmação de e-mail
• Cartas de boas-vindas
• Recibos
• Digests (diárias, semanais ou mensais)

Baixe os modelos no GitHub

Para começar com nossos modelos Paste, vá até o GitHub e clone o repositório ou baixe a pasta Paste templates. Também vale a pena mencionar que esses modelos vivem em um repositório de código aberto de modelos de e-mail que outros usuários do SendGrid ajudaram a contribuir durante nosso último Hacktoberfest.

Personalizando os modelos de colagem

Depois de ter uma cópia local dos modelos do Paste, abra-os em seu editor de código preferido (eu recomendo VSCode ou Atom; ambos são gratuitos).

Eu recomendo começar com base.html, pois contém a maioria dos componentes reutilizáveis ​​encontrados em muitos outros modelos. Todos esses modelos compartilham uma estrutura comum para o HTML e, embora existam alguns estilos básicos no documento, a maioria dos estilos são encontrados inline.

Conforme você vasculha o HTML, você notará muitos comentários HTML para indicar onde os blocos começam e terminam. Estas são notas importantes que ajudarão à medida que você examina os modelos e começa a modificá-los.

Você também notará estilos em elementos HTML para cores de fundo, tipografia, espaçamento, etc. Eu o encorajo a experimentar com eles para ter noção de como eles mudam a aparência desses modelos.

Adicione seu logotipo aos modelos

Uma das primeiras coisas que você deve fazer é substituir o logotipo dos modelos de colagem pelo seu próprio. Você pode encontrar rapidamente o bloco de logotipo pesquisando seu comentário HTML, indicando seu local de início:

Dentro desse bloco, você desejará localizar a marca âncora (<a> ) e alterar o HREF para sua URL. O modelo deve estar vinculado à página inicial do SendGrid por padrão.

Depois de ajustar o URL, vamos substituir o logotipo Colar pelo seu. Eu recomendo ter seu logotipo armazenado em algum lugar ao qual você possa vincular facilmente, como seu servidor da Web ou um CDN. Depois de substituir o src do logotipo, ajuste os estilos embutidos para que a largura/altura fique correta - isso dependerá da proporção do seu logotipo. Por padrão, o logotipo Colar é quadrado de 48px, então definimos estilos de largura para 48px.

Exemplo:

Neste exemplo, a URL do logotipo Colar é referenciada junto com alguns estilos de largura para defini-la no tamanho desejado de 48px. Ajuste esses valores para seu próprio logotipo para garantir que ele fique nítido.

Personalizando as cores de fundo

Como mencionado acima, a cor de fundo é definida em uma variedade de blocos para estabelecer o estilo padrão dos modelos de colagem (cinzas e brancos). Você pode facilmente mudar isso (e deve) para combinar com as cores da sua marca.

A maneira mais fácil de alternar entre esses estilos é usar seu editor para pesquisar os estilos embutidos, bgcolor e cor de fundo. O valor dessas propriedades pode ser substituído por valores hexadecimais (por exemplo, #000000) ou nomes de cores (por exemplo, preto). À medida que você trabalha com essas alterações, é fácil manter uma guia sobre as coisas se você abrir um dos modelos em seu navegador preferido e atualizar conforme fizer as alterações.

Exemplo:

Neste exemplo, a tag body é estilizada com uma cor de fundo cinza claro. Esse valor de cor e outros dentro do modelo devem ser personalizados para corresponder à sua marca.

Botões de personalização

Os botões são um dos componentes de interface mais comuns em modelos de email. Você os usará como um apelo à ação, destacando a ação mais importante que deseja que um usuário execute, como confirmar o endereço de e-mail.

Por padrão, os botões do Paste são estilizados como blocos azuis com um raio de borda sutil para arredondar os cantos. Personalizar esses botões para combinar com sua marca é semelhante às modificações que já fizemos na cor de fundo do nosso modelo. Pesquise o bloco usando o comentário HTML que adicionamos para você:

Temos várias células de tabela que têm fundos brancos aplicados (#ffffff) para criar o bloco ao redor do botão, mas você vai querer encontrar a célula de tabela que tem os seguintes estilos abaixo.

Exemplo:

Neste exemplo, o <td> tem um bgcolor que é usado para definir a cor do botão, juntamente com um border-radius para arredondar sutilmente os cantos. Experimente esses estilos para obter uma aparência única para seus botões que combinam com sua marca.

A segunda parte do nosso botão é a âncora (<a> ) dentro da célula da tabela mostrada acima.

Essa âncora controla o URL para onde seu botão irá quando clicado, mas também os estilos de texto do rótulo. Você pode ajustar os estilos para ajustar o rótulo com base em suas preferências e no que corresponde à sua marca.

Personalizando tipografia

Por padrão, os modelos de colagem são carregados na fonte da web, Source Sans Pro, via Google Fonts. Você pode usar uma webfont diferente da coleção do Google ou usar o conjunto padrão de fontes encontrado na maioria dos computadores atualmente (Arial, Georgia, Times etc.).

Se você planeja usar uma fonte da web diferente, confira minhas dicas e truques de desenvolvimento de e-mail para obter algumas dicas úteis. Certifique-se de vasculhar o HTML em busca de qualquer estilo embutido que faça referência à família de fontes e ajuste com base em suas preferências.

Exemplo:

Neste exemplo, o <td> tem um estilo de família de fontes definido para usar o Source Sans Pro, com alguns retornos para fontes mais padrão no caso de a webfont não carregar.

Pensamentos finais

Espero que essas dicas o ajudem a personalizar esses modelos para se adequarem à sua marca e colocá-lo em funcionamento na plataforma do SendGrid. No futuro, espero expandir nosso repositório de templates de e-mail com mais templates, mas também uma ferramenta de construção que tornará o processo de customização muito mais rápido.

Se você encontrar algum problema ao longo do caminho, envie um problema no repositório do GitHub e, se quiser contribuir, envie uma solicitação pull. Procurando mais modelos para experimentar? Experimente os modelos de email HTML responsivos gratuitos do SendGrid.