Como criar e enviar e-mails em HTML via Gmail usando o Stripo?

Segundo Statista, em 2019, o número de usuários de e-mail em todo o mundo atingiu o número dos 3,9 bilhões. 1,4 bilhões deles usam o Gmail, de acordo com a Wikipedia. Parece que 35,8% de todos os usuários preferem esse cliente de e-mail.

Há casos em que os e-mails em texto sem formatação não são suficientes. É aí que os e-mails em HTML vêm em socorro. 

No entanto, é muito difícil, quase impossível criar um e-mail em HTML no Gmail. Por quê? Porque esse cliente de e-mail não fornece as ferramentas apropriadas. E honestamente, não há necessidade para elas.

A Internet oferece um grande número de editores de templates de e-mail em HTML. A grande maioria deles permite a criação de templates de e-mail responsivos, enquanto apenas alguns permitem exportá-los diretamente para o Gmail.

Quer fazer o mesmo em minutos?

Você pode querer enviar um e-mail em HTML no Gmail por vários motivos. O motivo principal para enviar templates de e-mail para o Gmail é que você pode executar sua campanha de marketing sem usar nenhuma ferramenta de terceiros, porque já sabe enviar e-mails em massa no Gmail.

Neste artigo, irei:

• Criar um template de e-mail em HTML;
• exportá-lo para sua conta do Gmail;
• destacar alguns recursos técnicos do Gmail;
• e, finalmente, pesquisaremos como o Stripo ajuda a lidar com eles - em outras palavras, o que torna nossos templates compatíveis com o Gmail.

1. Criando um e-mail

Antes de exportar templates de e-mail para sua conta do Gmail, você precisa criar um.

Há três maneiras de fazê-lo:

1. A primeira maneira é usar nossos templates de e-mail projetados em HTML.

Stripo oferece mais de 300 templates prontos para uso. Eles são categorizados em alguns tipos: confirmação, carrinho abandonado, promoção, boas-vindas, etc. E categorizados por recursos: HTML tradicional, e-mail interativo (escrito em HTML5) e AMP (escrito em HTML AMP) - como sabemos, a tecnologia AMP é suportada pelo Gmail. Escolha aquele que você desejar. Definitivamente, você precisará personalizá-lo para que seu template em HTML se adapte ao estilo da sua marca. Isso não deve demorar muito.

2. A segunda maneira é criar um template em HTML do zero.

Você precisará fazer login na sua conta Stripo, ir para a guia Templates e escolher os "Templates básicos". Lá você encontrará a nossa nova oferta "Master Template". Crie um template de e-mail universal para vários propósitos. E simplesmente combine os módulos de acordo com o objetivo da sua campanha de marketing.

Você também pode escolher o "Template vazio" nesta seção para simplesmente arrastar blocos básicos para o seu template em HTML do Gmail.

3. A terceira maneira é inserir/importar seu código HTML.

Você também precisa acessar sua conta pessoal, na guia "templates" -> "templates básicos" e escolher "Meu HTML".

Abra este "template" e insira seu código HTML personalizado.

A primeira opção é a mais fácil, a menos que você tenha seu próprio template HTML criado. Vamos pesquisar.

Então, como você pode modificar nossos templates de e-mail prontos para uso?

Publicamos muitos artigos sobre como trabalhar com nosso editor. Ainda assim, gostaria de adicionar algumas considerações aqui.

Você já escolheu o template que queria ...

Agora você precisa abri-lo no editor:

Passo 1: Como criar uma linha de assunto e um pré-cabeçalho com o Stripo e como será o seu e-mail

É um fato bem conhecido que o pré-cabeçalho é algo que os destinatários veem primeiro antes de abrirem um e-mail. E, sejamos honestos, eles decidem se devem abrir o e-mail ou não pelos seguintes fatores: seu nome, assunto e pré-cabeçalho.

É por isso que recomendamos enfaticamente que você nunca omita essa opção.

Importante mencionar:

Você pode aplicar qualquer fonte que desejar ao texto do cabeçalho ao criar um template. No entanto, o Gmail usará "Arial" ao exibir esse texto na visualização de e-mail. No entanto, no corpo do e-mail, a fonte escolhida será a que você escolheu.

(Fonte Arial, pré-visualização do cabeçalho na linha de assunto)

(Apliquei a fonte Courier New no texto do cabeçalho anterior no template)

Importante notar:

Por favor, sempre adicione o link "Visualizar no navegador". Também poderia ser chamado de "versão Web".

Para obter um link para a versão web do seu e-mail, você precisa:

• entrar no "modo de visualização";
• em uma nova janela, clicar em "Copiar" para salvar o link na sua área de transferência;

• colar este link no respectivo campo.

Passo 2: Como adicionar um cabeçalho e logo com o Stripo e como será o seu e-mail

Já foi dito muitas vezes que o cabeçalho é o rosto do seu e-mail e também da sua marca. Certifique-se de adicionar o logotipo da empresa e seu nome. 

Você também pode adicionar ícones de redes sociais e informações de contato no cabeçalho do e-mail.

Importante mencionar:

Se você colocar um menu acima do banner, ele poderá ser considerado um elemento do cabeçalho.

Passo 3: Como adicionar um banner com o Stripo e como será o seu e-mail

Este é o nosso elemento favorito dos templates. Os banners definem o clima do e-mail inteiro. Portanto, você precisa dedicar bastante atenção a ele. Encontre e insira a melhor imagem que você tiver. Tenho o orgulho de dizer que, atualmente, somos o único editor que permite aplicar filtros especiais a imagens em banner sem precisar de nenhum editor de fotos ou ferramentas de terceiros. Em seguida, você pode colocar o texto sobre esta imagem e envolvê-lo em fontes decorativas / banner - oferecemos mais de 40 opções.

Além disso, você pode aplicar uma imagem adicional em um banner. Isso permite criar banners de várias camadas sem nenhum editor de fotos.

Para obter mais informações sobre como criar banners, consulte nossa postagem no blog "Como criar banners com Stripo em menos de 10 minutos". 

Passo 4: Como adicionar estruturas com Stripo e como será o seu e-mail

Uma imagem e um texto, duas fotos e dois blocos de texto seguidos? Você decide. Esse é um recurso comum, e muitos editores permitem escolher entre um ou dois blocos em uma linha. Enquanto estiver conosco, você pode escolher até quatro deles.

Aqui, você pode inserir imagens, textos, botões, vídeos, etc.

Dê uma olhada no exemplo de duas colunas em uma estrutura:

Três colunas em uma estrutura:

Como você pode ver, você pode adicionar um botão abaixo da descrição a cada bloco.

Estrutura de quatro colunas:

Importante mencionar:

Se 4 colunas em uma estrutura não forem suficientes, você poderá adicionar mais 4 colunas. O que dá 8 colunas no total.

Para fazer isso, você precisa:

• Colocar um ponteiro do mouse sobre uma estrutura inteira no template HTML do Gmail - se feito corretamente, você verá o rótulo "Estrutura";

• no painel de configurações, clique em "+";

• então você pode definir a largura das suas colunas ou igualar todas elas.

Aplique imagens ou cores de plano de fundo a cada bloco separadamente, ou uma única para uma estrutura inteira.

Passo 5. Como adicionar ícones de redes sociais com o Stripo e como será o seu e-mail

Posicione-os onde quiser.  

Oferecemos 45 ícones de mídia social, não apenas os típicos para Facebook, Twitter e Instagram. Fizemos o possível para reunir todos eles para sua conveniência.

Como bônus, você pode selecionar o esquema de cores e definir seu tamanho.

Isso é muito simples: arraste e solte o bloco "Social" na estrutura necessária, crie seus ícones e cole seus URLs nos campos "Link".

O que há de tão bom nos nossos ícones de mídia social? 

Você os configura apenas uma vez — e usa em todas as campanhas sem a necessidade de adicionar links e trabalhar no design deles. 

Você precisa fazer as respectivas configurações no seu perfil com o Stripo. Ao criar sua próxima campanha, basta arrastar o bloco básico "Social" no seu e-mail em HTML do Gmail e o Stripo inserirá os ícones que você já escolheu, com os respectivos links e o design que você definiu.

Para obter mais informações sobre como adicionar e definir ícones de redes sociais aos seus templates de e-mail em HTML, consulte nossa postagem no blog.

Passo 6. Como usar nossa biblioteca de módulos para ajudá-lo a criar e-mails em HTML no Gmail

Você com certeza valoriza muito seu tempo e não quer ficar criando templates semelhantes todos os dias. Conosco é a mesma coisa, quando criamos uma nova campanha. Por esse motivo, decidimos criar a Biblioteca de módulos de conteúdo. É muito fácil usar nossa biblioteca: depois de criar um template, salve o módulo / elemento de e-mail necessário na biblioteca, dê um nome a ele. E na próxima vez em que iniciar uma nova campanha, você só precisará arrastá-lo e soltar em um novo template.

Salve elementos de e-mail, containers ou estruturas inteiras.

Na guia "Meus módulos", você verá os módulos que você salvou anteriormente. Nos "Módulos de template", você pode ver os blocos que foram extraídos do próprio template pelo sistema. E a seção "Avançado" contém os módulos que foram criados por nossos programadores e designers.

Passo 7. Como criar anotações de promoção do Gmail com Stripo e como será o seu e-mail nos dispositivos móveis

O Gmail divide os e-mails recebidos em guias: principal para e-mails pessoais, e-mails promocionais, atualizações etc. Cada usuário define o número de guias por conta própria.

Se você estiver enviando e-mails em massa via Gmail, é provável que seus e-mails caiam na guia "Promoções".

As anotações de promoção ajudarão seus e-mails a se destacarem entre os vários e-mails recebidos nas caixas de entrada dos usuários.

Experimente

Esse recurso é destinado apenas a dispositivos móveis.

Para mais informações sobre como criar anotações, consulte nossa postagem no blog .

Passo 8. Como adicionar elementos AMP a seus e-mails e como será o seu e-mail no Gmail

Em março de 2019, o Google lançou sua compatibilidade com conteúdo AMP para e-mails. E Stripo é o primeiro construtor de templates de e-mail de arrastar e soltar que permite criar e-mails com conteúdo AMP sem precisar saber programar.

Stripo oferece dois blocos AMP de arrastar e soltar:

• acordeão - para apresentar seu conteúdo em seções. Dessa maneira ele tem uma aparência muito mais estruturada;

• carrossel de imagens - para colocar 3-16 banners em uma tela. Os destinatários precisarão apenas clicar na "seta" para ver todas as imagens do carrossel.

Você também pode criar componentes AMP com o playground do Google e incorporá-los aos templates de e-mail em HTML do Gmail para o nosso editor de código aberto.

Para mais informações sobre como criar e-mails com conteúdo AMP com o Stripo, consulte nossa postagem dedicada no blog.

Passo 9: Como ajustar seu e-mail HTML ao Gmail em dispositivos móveis

Literalmente, todos os construtores de e-mail agora fornecem aos usuários templates de e-mail responsivos. Ainda assim, alguns deles podem renderizar-se incorretamente em dispositivos móveis - fontes pequenas, recuos ausentes e preenchimentos inexistentes. Isso arruína seu design de e-mail e torna sua cópia ilegível.  

Stripo permite ajustar seus e-mails ao aplicativo do Gmail com apenas um clique.

Para ativar esta opção, você precisa:

• Ir para Aparência;
• entrar na guia Configurações gerais;

• ativar o botão Adaptar para aplicativo do Gmail.

Lembre-se de que você também pode adicionar os seguintes recursos nos seus e-mails em HTML do Gmail:

• efeito rollover de imagens - funciona em desktops;
• cronômetros de contagem regressiva - funciona em desktops e celulares;
• links ancorados para guias de menu — funciona em desktops e celulares;
• Botões animados por CSS  — funciona em desktops;
• formulários de pesquisa — funciona em desktops; em dispositivos móveis, os destinatários veem o link para o questionário no Google.

Todos os elementos mencionados acima se renderizam perfeitamente no Gmail, mas podem ser facilmente criados com o Stripo, com pouca ou nenhuma habilidade de programação em HTML.

2. Exportando e-mails em HTML para o Gmail

Este é o meu passo favorito.

No entanto, antes de exportar seu e-mail, recomendamos fazer uma pré-visualização. Como? Basta clicar no botão de preview logo acima do seu e-mail. Ele se parece com isso:

Aqui você verá as versões para computador e celular do seu e-mail.

A versão desktop do seu e-mail também pode ter duas versões: HTML e HTML AMP. Você precisa visualizar as duas. Se você gosta do que vê e nosso validador de código AMP não detectar nenhum erro no seu e-mail, você pode exportá-lo.

• clique no botão exportar;

• em uma janela pop-up, escolha Gmail;

Nota: verifique se a opção da janela pop-up no seu navegador está ativa.

• em uma nova janela pop-up, você será solicitado a fazer login no Google;
• dê acesso ao Stripo aos seus rascunhos clicando no botão "Permitir";
• encontre seu template HTML na pasta Rascunhos. Ele está pronto para ser enviado.

Importante notar:

Você tem que fazer isso apenas uma vez. Ao exportar e-mails em HTML para o Gmail na próxima vez, você só precisará escolher o Gmail na lista de Exportação - e o e-mail será exportado imediatamente.

Experimente Stripo

Como você pode usar templates de e-mail em HTML no Gmail? Basta digitar a linha de assunto se você não o tiver feito no Stripo, inserir um destinatário ou um grupo de destinatários, se você deseja enviar e-mails em massa e impressionar os destinatários com seus e-mails elegantes!

A propósito, você ainda pode editar os templates antes de enviá-los! 

3 e 4. Restrições técnicas do Gmail e como lidar com algumas delas usando o Stripo

Me deparei com muitos fatos e hipóteses sobre o Gmail e decidi testar todos. Aqui estão eles:

Hipótese 1. O Gmail sugere que os destinatários baixem imagens sem links

A Web diz que, se qualquer imagem em um e-mail em HTML não contiver links, o Gmail sugerirá que seus usuários façam o download.

Eu testei - isso é verdade. Você pode não querer esse botão de "download" porque isso prejudica todo o design, e o e-mail não parece profissional dessa maneira.

Solução: ao fazer upload de imagens para inserir em um e-mail, você ainda pode adicionar um link. Mas mesmo se você esquecer disso, nosso sistema tem um "link" definido como padrão:

Ele não levará seus usuários a lugar nenhum, mas não haverá o botão irritante de "download" sobre as imagens nos e-mails.

Conclusão: verdade.

Hipótese 2. Imagens sem texto alternativo podem ir para a pasta Spam

Aposto que você também ouviu que e-mails com imagens entram na pasta de spam quando não há texto alternativo (tag alt) em todas as imagens usadas.

Enviei deliberadamente muitos e-mails sem texto alternativo e eles chegaram à caixa de entrada sem problemas. No entanto, desta vez testei apenas o Gmail. Portanto, não podemos prometer que seus e-mails sem texto alternativo serão aprovados nos filtros de spam do Outlook ou do Apple Mail. Consequentemente, se você enviar e-mails não apenas para usuários do Gmail, precisará de texto alternativo para passar pelos filtros de spam.

Não importa o quão fácil seja passar os filtros de SPAM, é altamente recomendável que você adicione textos alternativos às imagens. Se eles forem bloqueados por clientes de email, os destinatários ainda terão uma idéia do que é a mensagem. Tente deixar o texto alternativo o mais claro possível.

Conclusão: os emails sem o texto Alt são entregues ao Incoming. Mas isso pode ser apenas sorte :) Além disso, precisamos adicionar texto alternativo às imagens para outros clientes de email e para acessibilidade.

Hipótese 3. Gmail corta mensagens

Isso é verdade. O Gmail recorta e-mails com mais de 102 kB. 

No final da parte visível de um e-mail, ele oferece "visualizar a mensagem inteira".

Atualmente, não há possibilidade técnica de contornar isso. No entanto, você pode avaliar seus e-mails conosco:

• basta clicar no botão “exportar”;
• escolha "HTML";
• baixar o arquivo HTML;

• e, com o botão direito, basta verificar as propriedades do arquivo.

As propriedades do arquivo dizem que este tem 65 kB. Verifiquei essas informações com alguns aplicativos, incluindo mail-tester.com. Todos eles confirmaram o tamanho do arquivo.

Conclusão: verdade. Sabemos como avaliar nossos e-mails com o testador de e-mail ou qualquer outra ferramenta do tipo.

Hipótese 4. O Gmail não suporta a classe <div>

O Gmail transfere e exibe esses atributos. Testado.

Conclusão: falso.

Hipótese 5. O botão Desfazer não funciona para e-mails em massa

Totalmente falso, caso você use o Gmail sem complementos como o Gmail Mail Merge. Tudo o que você precisa fazer é acessar as configurações, encontrar o "Desfazer Envio" e escolher o tempo desejado: 5, 10, 20 ou 30 segundos.

Tentei aplicar esse truque aos meus e-mails em massa e funcionou.

Conclusão: falso.

Hipótese 6. Blocos de texto com mais de 8.500 caracteres são removidos

Como uma redatora ou só por ser mulher, adoro frases longas e explicações detalhadas. E decidi inserir um dos artigos no bloco de texto. Esse artigo continha cerca de 10.000 caracteres, excluindo espaços. E enviei esse e-mail para um amigo. Meu e-mail foi entregue, nenhum dos blocos foi cortado ou removido.

Então, podemos dizer que essa hipótese não foi confirmada. O que é ótimo, a propósito. Mas duvido sinceramente que alguém envie um e-mail tão grande a um cliente.

Conclusão: falso.

Hipótese 7. Os números de telefone e os endereços de e-mail tornam-se clicáveis nos e-mails em HTML no Gmail

Ouvi dizer que o Gmail insere links para nossos endereços de e-mail e números de telefone nos e-mails, tornando-os clicáveis, por assim dizer. Eu testei vários números de telefone celular e endereços eletrônicos. E sabe o quê? Nenhum dos números ficou clicável. Eu ainda tenho que destacar e copiá-lo para usar.

Ainda!! A situação com os endereços de e-mail foi bem engraçada. Eles ficaram cinza, mas clicáveis ou azuis, sublinhados, mas não clicáveis.

Conclusão: falso. Temos que cuidar disso manualmente :)

Hipótese 8. Os fundos não são renderizados no Gmail para desktop se a largura do e-mail exceder 640 pixels

Muitos profissionais de marketing de e-mail afirmam que o Gmail não exibe a cor de plano de fundo de um e-mail nem a imagem de plano de fundo se a largura do e-mail exceder 640 pixels.

E, é claro, testamos isso.

A imagem/cor de plano de fundo - testamos as duas - foram exibidas no Gmail em todos os dispositivos e navegadores da web.

(Largura da parte do conteúdo - 670 pixels, SO - macOS)

Conclusão: falso.

Hipótese 9. O Gmail substitui as fontes personalizadas pelas padrão

Fontes personalizadas tornam suas campanhas de e-mail ainda mais exclusivas; No entanto, isso é verdade: O Gmail tende a substituir as fontes personalizadas pela fonte padrão - Arial.

Eu testei isso com 4 fontes diferentes.

Veja como funcionou:

1. Great Vibes - funcionou bem em dispositivos móveis e computadores;
2. Dokdo - foi substituída pela Arial;
3. Alexa Std - foi substituída pela Arial;
4. Montserrat - foi substituída pela Arial.

Conclusão: verdade. Mas você precisa testar para descobrir quais das suas fontes preferidas não serão substituídas pelas fontes padrão.

Lembre-se de que você pode fazer upload de fontes personalizadas com o Stripo.

5. Preview e teste

Sempre, antes de enviar e-mail em HTML no Gmail e ou mesmo de exportá-lo, certifique-se de pré-visualizar e testar seus e-mails. 

Nossa ferramenta de teste de e-mail permite que você visualize e-mails em mais de 90 clientes e dispositivos de e-mail sem sair do editor.

Conclusão

Agora que você sabe como criar um e-mail em HTML no Gmail, e como o Stripo não leva muito tempo, esperamos que, a partir de agora, você envie apenas e-mails em HTML elegantes para seus amigos e colegas.

Se você tiver alguma dúvida, deixe um comentário abaixo ou envie um e-mail para support@stripo.email.