Enviar e-mails HTML elegantes através do Gmail nunca foi tão fácil! Sem add-ons, sem a necessidade de extensões. Porque Stripo permite criar e empurrar e-mails HTML para seu cliente de e-mail favorito com apenas um clique..
Neste artigo, eu irei:
- criar um modelo de e-mail HTML;
- exportá-lo para minha conta Gmail;
- destacar algumas características técnicas do Gmail;
- e, finalmente, veremos como Stripo ajuda a lidar com eles - em outras palavras, o que torna nossos templates compatíveis com o Gmail.
1. Creating an email
Prior to exporting email templates to your Gmail account, you need to build one.
Há 3 formas de fazer isso:
Forma 1. Usando nossos modelos de e-mail HTML pré-construídos
A Stripo oferece mais de 1000 modelos prontos para uso. Eles são agrupados em categorias por tipos, como confirmação, carrinho abandonado, promoção, boas-vindas, etc., por recursos, como HTML tradicional, interativo (escrito em HTML5), e e-mails AMP (escrito em HTML AMP) - como sabemos, o AMP para e-mail é totalmente suportado pelo Gmail, e por épocas do anos e feriados. Escolha aquele que você mais gosta. Com certeza, você precisará personalizá-lo para que seu modelo de e-mail HTML do Gmail se ajuste ao estilo de sua marca. Isso não irá tomar muito tempo.
Forma 2. Criação de um modelo de e-mail HTML a partir do zero
Entre em sua conta Stripo, vá para a guia Templates, depois escolha os "Modelos básicos". Lá você encontrará 8 modelos de e-mail, também conhecidas como protótipos. O "Training Template" contém uma explicação de como usar nossos blocos Arrastar-e-Soltar.
Você também pode escolher o "Template vazio" nesta seção para simplesmente arrastar blocos básicos para seu template HTML de e-mail Gmail.
Forma 3. Importando seu código HTML personalizado
Vá para sua conta pessoal, a guia "templates" -> "basic templates", depois escolha o template "My HTML" (Meu HTML).
Abra-o, e cole seu código HTML personalizado.
A primeira opção e a segunda opção são as mais fáceis, em minha opinião. Vamos examiná-las.
Então, como modificar nossos modelos de e-mail que já estão prontos para uso?
Publicamos um postagem no blog "Stripo A até Z". Lá mostramos em detalhes como trabalhar com Stripo nos e-mails. Ainda assim, eu adoraria acrescentar algumas linhas aqui.
Passo 1. Como definir uma linha de assunto e um pré-cabeçalho com Stripo e como fircará seu e-mail
É um fato bem conhecido que 69% dos destinatários decidem se devem abrir o e-mail pelo nome do remetente, linha de assunto e pré-cabeçalho.
É por isso que recomendamos fortemente que você nunca deva omitir esta opção:
Importante notar:
Com frequência, os pré-cabeçalhos servem como continuação da linha de assunto. Algumas marcas a utilizam até mesmo para contar histórias.
Entretanto, se você apenas definir a linha de assunto e nenhum cabeçalho, qualquer cliente de e-mail mostrará uma parte do texto escrito no primeiro parágrafo de seu e-mail. Pode parecer um pouco estranho, pois normalmente diz algo como: "Não vê as imagens? Aqui está o link para a versão web do e-mail". Você pode evitar isso!
Se você acredita que só a linha de assunto é suficiente e não quer mostrar nenhum pré-cabeçalho, basta adicionar espaço em branco em vez do último.
Se você ativar esta opção, seu e-mail será parecido com o e-mail da WWF, o Fundo Mundial para a Vida Silvestre:
(Fonte: Gmail)
Você também pode adicionar espaço em branco se seu pré-cabeçalho for suficientemente curto.
Passo 2. Como adicionar o link da Versão Web a seus e-mails
Às vezes as imagens, os GIFs em nossos e-mails não funcionam corretamente. Ou caso seu e-mail seja suficientemente empolgante, os usuários podem querer compartilhá-lo com seus amigos.
Portanto, precisamos adicionar o link "Ver no navegador", também conhecido como "Versão Web".
(Fonte: Email da Stripo)
Normalmente, ele está localizado no cabeçalho ou no rodapé do e-mail. Não há regras rígidas em relação a isso.
Para obter um link para a versão web de seu e-mail com Stripo, você precisará:
- entrar no "Modo de visualização prévia";
- em uma nova janela, clique em "Copiar" para salvar o link para sua prancheta;
- colar este link no respectivo campo em seu e-mail.
Passo 3. Como adicionar um cabeçalho e um logotipo com Stripo e como ficará seu e-mail
Muitas vezes já foi dito que o cabeçalho do e-mail é a cara de seu e-mail e também de sua marca. Certifique-se de acrescentar o logotipo de sua empresa e seu nome.
Como construir cabeçalho de e-mail com logotipo e menu no Stripo:
- arraste uma estrutura de duas colunas em seu modelo de e-mail HTML para o Gmail;
- puxe o bloco "Imagem" no da esquerda. Faça o upload de seu logotipo;
- arraste o bloco "Menu" para seu template. Dê um nome a cada item do menu. Adicione seus links;
- para definir o tamanho/largura de cada coluna, ative as configurações para toda a estrutura clicando na etiqueta "Estrutura" na área do modelo;
- no painel de configurações, defina colunas, também conhecido como recipientes, largura e recuo entre eles.
Você também pode adicionar ícones de redes sociais e informações de contato no cabeçalho do e-mail.
Para informações mais detalhadas sobre como trabalhar com os menus de e-mail, consulte nossa postagem do blog "Adicionar menu com Stripo".
Passo 4. Como adicionar um banner com Stripo e como ficará seu e-mail
Este é nosso elemento de modelos favorito. Os banners definem o ambiente para um e-mail inteiro. Portanto, você precisa trabalhar nele profundamente. Encontre e insira a melhor imagem que você gosta. Tenho orgulho de dizer que, atualmente, somos o único editor que permite aplicar filtros especiais às imagens de banners sem nenhum editor de fotos e ferramentas de terceiros. Então, você pode colocar texto sobre esta imagem e envolvê-la em banners/ fontes decorativas - oferecemos mais de 40.
Também, conosco, você pode aplicar uma imagem adicional sobre um banner. Isto permite criar banners multicamadas sem nenhum editor de fotos..
Para mais informações sobre como construir banners, consulte nossa postagem no blog "Como construir banners com Stripo em menos de 10 minutos", ou assista a um pequeno vídeo
Passo 5. Como adicionar estruturas, aka linhas, com Stripo e como será seu e-mail
Uma imagem e um texto, duas fotos e dois blocos de texto seguidos? Cabe a você decidir. Esta é uma característica comum. Entretanto, muitos editores permitem que você escolha entre uma ou duas colunas seguidas. Com a gente, você pode escolher até quatro delas com 1 clique. Abaixo, mostraremos como colocar até 8 recipientes em fila.
Arraste o desejado para o seu modelo de e-mail HTML para o Gmail.
Em seguida, adicionar o conteúdo necessário em cada coluna/contêiner.
Dê uma olhada no exemplo de uma estrutura de duas colunas no e-mail:
Uma estrutura de três colunas no e-mail:
Como você pode ver, você pode adicionar um botão sob descrição em cada coluna.
Uma estrutura de quatro colunas:
Se 4 colunas por linha não forem suficientes para você, você pode adicionar mais 4 colunas. Isso totalizara 8 colunas.
Para adicionar colunas extras ao seu e-mail HTML do Gmail, você precisa:
- coloque o ponteiro do mouse sobre uma estrutura inteira no modelo de e-mail HTML do Gmail - se feito corretamente, você verá a marca “Structure” (Estrutura);
- no painel de configurações, clique em “+”;
- adicionar 1-4 mais caixas-containers;
- então você pode definir a largura para suas colunas. Defina a largura individual para cada caixa-container, ou equalize todos eles.
Aplicar imagens ou cores de fundo a cada coluna separadamente, ou uma única para uma estrutura/fileira inteira.
Passo 6. Como adicionar ícones das redes sociais ao Stripo e como ficará seu e-mail
Coloque-os onde você quiser.
Oferecemos 70 ícones de mídia social, não apenas os mais populares para Facebook, Twitter e Instagram. Fizemos nosso melhor para reuni-los todos para sua conveniência.
Você pode selecionar o esquema de cores, e definir o tamanho delas.
Isto é muito simples: arraste e solte o bloco "Social" na estrutura necessária, posicione seus ícones e cole suas URLs nos campos "Link".
O que há de tão bom em nossos ícones de redes sociais?
Você pode configurá-los apenas uma vez - e usá-los em todas as campanhas sem a necessidade de acrescentar links e trabalhar em seu projeto.
Para fazer isso, você precisa preencher suas informações de rede social em seu perfil com Stripo. Ao construir sua próxima campanha - basta arrastar o bloco básico "Social" em seu e-mail HTML do Gmail e o Stripo irá inserir os ícones que você já escolheu, com os respectivos links, e o design que você definiu.
Para mais informações sobre como adicionar e criar ícones de mídia social em seus modelos de e-mail HTML,consulte nosso postagem no blog.
Passo 7. Como usar nossa biblioteca de Módulos de Conteúdo para que ela ajude você a criar e-mails HTML no Gmail de modo mais rápido
Certamente, você valoriza muito seu tempo e não tem vontade de criar modelos semelhantes todos os dias. O mesmo acontece aqui. Devido a esta razão, decidimos criar a Biblioteca de Módulos de Conteúdo. É muito fácil usar nossa Biblioteca: Uma vez criado um modelo, salve o módulo/elemento de e-mail que você precisa para a biblioteca, dê-lhe um nome. E na próxima vez que iniciar uma campanha nova, você só terá que arrastá-lo e soltá-lo em um novo modelo.
Salve qualquer elemento de e-mail que você precisar: Desde pequenos recipientes até linhas/estruturas inteiras.
Na aba "Meus módulos", você vai ver os módulos que você salvou anteriormente. Na aba "Módulos modelo", você poderá obter os módulos que foram extraídos do próprio modelo pelo sistema. E a seção "Pré-construído" contém os módulos que foram construídos por nossos codificadores e designers.
Estes Módulos Reutilizáveis economizam tempo. Nosso cliente Felipe Guerra do iLogica compartilha sua experiência com nossos leitores para que todos que têm hesitado em experimentar esta opção, comecem a usá-la imediatamente e economizem horas na produção de e-mails.
Passo 8. Como construir anotações promocionais do Gmail com Stripo e qual será será a aparência do seu e-mail nos dispositivos móveis
O Gmail divide os e-mails recebidos em abas: primárias para e-mails pessoais, e-mails promocionais, atualizações, etc. Os usuários definem o número dessas abas por conta própria.
Se você estiver enviando e-mails em massa via Gmail, é provável que seus e-mails serão entregues na guia de promoções.
As anotações promocionais ajudarão seus e-mails a se destacar entre os vários e-mails recebidos nas caixas de entrada dos usuários.
Este recurso destina-se apenas a dispositivos móveis.
Para mais informações sobre como construir anotações, consulte nossa postagem no blog.
Passo 9. Como adicionar elementos AMP aos seus e-mails e como seu e-mail ficaraá no Gmail
Em março de 2019, o Google lançou seu AMP para e-mails. E Stripo é o primeiro construtor de modelos de e-mail do tipo arrastar-e-soltar que permite criar e-mails AMP sem nenhuma capacidade de codificação.
Stripo oferece três blocos AMP do tipo arrastar-e-soltar:
- tipo sanfona — para apresentar seu conteúdo em seções. Funciona melhor para e-mails longos;
- carrossel de imagens — para colocar 3-16 banners em uma tela. Os destinatários só precisarão clicar na "seta" para visualizar todas as imagens do carrossel;
- formulário — os formulários interativos permitem que os usuários deixem um comentário e compartilhem seus comentários sobre seus serviços diretamente em e-mails. O teste AB mostra que os formulários interativos têm 5,2 vezes mais retorno quando comparados com formulários externos regulares.
Você também pode construir componentes AMP com o Google playground, e incorporá-los em seus modelos de e-mail HTML do Gmail para nosso editor de código aberto.
Para mais informações sobre como construir e-mails AMP com Stripo, por favor, consulte nossa postagem dedicada ao assunto no blog.
Lembre-se de que você também pode adicionar as seguintes características em seus e-mails HTML do Gmail:
- efeito de rolagem de imagens — funciona em desktops;
- marcadores de contagem regressiva — funciona tanto em desktops como dispositivos móveis;
- Link âncoras para guias de menu — funciona tanto em desktops como dispositivos móveis;
- Botões CSS animados — funciona em desktops.
Todos os elementos acima mencionados funcionam perfeitamente no Gmail, mas podem ser facilmente construídos com Stripo, com pouca ou nenhuma habilidade de codificação HTML.
Passo 10. Como visualizar os e-mails HTML antes de exportá-los para o Gmail
Basta clicar no botão de visualização logo acima de seu e-mail.
Aqui você verá tanto a versão desktop quanto a versão móvel de seu e-mail.
Ambas as versões têm suas subversões: AMP e HTML. Certifique-se de verificar todas.
Se seu e-mail AMP tiver algum erro, nosso editor irá mostrar.
Clique no ícone de erro para ver quais bugs você tem e pequenas dicas de como corrigi-los.
Importante notar:
O aplicativo Gmail não suporta consultas de mídia, nem no Android nem no iOS.
Não, isto não significa que seus destinatários terão uma visualização horizontal. Eles verão apenas uma versão desktop do seu email em vez da versão móvel.
(The Gmail app. Email sent through Gmail)
Isto só acontece quando você entrega seu e-mail para o Gmail draft.
Se você enviar e-mails em massa através de seu ESP, o e-mail será totalmente respondido, todos as caixas-contêiners serão esticados até a largura da tela - uma caixa-contêiner por linha.
(The Gmail app. Email sent through ESP)
2. Exportação de e-mails HTML para o Gmail
Para entregar seu modelo de e-mail HTML ao Gmail, você irá precisar:
- clicar no botão Export;
- em uma janela pop-up, selecione Gmail. Certifique-se de que a opção de janela pop-up esteja ativa em seu navegador;
- em uma nova janela pop-up, você será solicitado a entrar com o Google. Digite seu login e senha;
- conceda ao Stripo acesso a seus rascunhos clicando no botão "Permitir".;
- encontre seu modelo de e-mail HTML na pasta Drafts.
You do this just once. When exporting HTML emails to Gmail next time, you will only need to pick Gmail from the Exporting list — and the email will be exported to this email client right away.
Importante notar:
Em primeiro lugar, todos os anos, desde que lançamos a exportação direta para o Gmail, passamos no teste de segurança do Bishop Fox para garantir que seus dados estejam seguros conosco.
Segundo, ao permitir o acesso de Stripo à sua conta Gmail, você nos dá acesso apenas à pasta Drafts. Não teremos acesso a nenhuma outra pasta, nem à sua base de contatos.
Agora que seu e-mail foi entregue à sua conta Gmail, à pasta Esboços, ela está pronta para ser enviada.
Defina a linha de assunto, digite os destinatários. Feito!
No blog "Como enviar e-mails em massa usando o Gmail", mostramos como enviar e-mails em massa para 2.000 destinatários de uma só vez.
A propósito, você ainda pode editar os modelos de e-mail antes de enviá-los!
3 e 4. Restrições técnicas do Gmail e como lidar com algumas delas usando Stripo
Li uma série de 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 internet diz que se qualquer imagem em um e-mail em formato HTML não contém nenhum link, então o Gmail irá sugerir que seus usuários façam o download.
Eu testei - isto é tão verdade. Você pode não querer este botão de "download" porque ele prejudica todo o design, e o e-mail perde a aparência profissional dessa forma.
Solução:
Ao adicionar imagens para inserir em um e-mail, você ainda pode adicionar um link. Mas mesmo que você esqueça disso, nosso sistema tem um "link" definido como padrão:
Com certeza, isso não levará seus clientes a lugar algum, mas não haverá o irritante botão "download" sobre as imagens em e-mails.
Conclusão: verdade.
Hipótese 2. Imagens sem Alt-textos podem ir para a pasta Spam
Aposto que você também já ouviu falar que e-mails com imagens entram na pasta de spam quando não há texto alt (alt tag) para cada imagem utilizada.
Eu enviei deliberadamente muitos e-mails com texto Alt removido, e eles chegaram ao botão da caixa de entrada sem nenhum problema. Ainda assim, desta vez testei apenas o Gmail. Portanto, não podemos afirmar que seus e-mails sem texto alt passarão pelos filtros de spam do Outlook ou do Apple Mail. Conseqüentemente, se você vai enviar e-mails não apenas para usuários do Gmail, você precisará de texto alt para passar pelos filtros de spam.
Importante notar:
Não importa quão fácil é passar os filtros de SPAM, recomendamos fortemente que você adicione textos alt às imagens. Em primeiro lugar, por razões de acessibilidade de e-mail. Segundo, caso sejam bloqueados por clientes de e-mail, os destinatários ainda terão uma idéia do que se trata a mensagem. Tente tornar os textos alt tão claros quanto possível.
Conclusão: e-mails sem texto Alt são entregues ao emails entrantes. Mas isso pode ser apenas sorte :) Além disso, precisamos adicionar texto Alt a imagens para outros clientes de e-mail e para acessibilidade.
Hipótese 3. mensagens de clipes do Gmail
Isto é verdade.
Gmail clipes de e-mails que sejam maiores que:
- 102 kB, e-mail tradicional em HTML;
- 200 kB, e-mail HTML AMP.
No final da parte visível de um e-mail, ele oferece a "visualização de toda a mensagem”.
Solução:
Atualmente, não há nenhuma possibilidade técnica de ultrapassar isto. No entanto, você pode pesar seus e-mails conosco:
- basta clicar no botão "exportar";
- escolha "HTML";
- baixar HTML;
- e depois, clicando com o botão direito do mouse, basta verificar as propriedades do arquivo.
As propriedades do arquivo dizem que este modelo de email HTML do Gmail é de 65 kB. Eu verifiquei esta informação com algumas aplicações, incluindo o mail-tester.com. Todos eles confirmaram o tamanho do arquivo.
Conclusão: verdadeiro. Nós sabemos como avaliar nossos e-mails.
Hipótese 4: O botão de desfazer não funciona para e-mails em massa
Totalmente falso no caso de você usar o Gmail sem nenhum add-on como o Gmail Mail Merge. Tudo o que você tem que fazer é ir para suas configurações.
Eu tentei aplicar este truque aos meus e-mails em massa e funcionou.
Solução:
In the settings panel, find the “Undo Send” option and set the time that suits you. It varies from 5 to 30 seconds.
Tentei aplicar este truque aos meus e-mails em massa e funcionou..
Conclusão: falsa.
Hipótese 5. blocos de texto com mais de 8 500 caracteres são removidos
Como redatora ou mesmo apenas como mulher, eu adoro frases longas, 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 meu amigo. Meu e-mail foi entregue, nenhum dos blocos foi recortado ou removido.
Portanto, podemos dizer que esta hipótese não foi confirmada. O que é ótimo, a propósito. Mas duvido sinceramente que algum de nós envie esse longo e-mail para nossos clientes.
Conclusão: falso.
Hipótese 6. números de telefone e endereços de e-mail tornam-se clicáveis em e-mails HTML no Gmail
Ouço dizer que o Gmail insere links para nossos endereços de e-mail e números de telefone em e-mails - torna-os clicáveis, em outras palavras. Eu testei diversos números de telefone celular. Sabe de uma coisa? Nenhum dos números podia ser clicado. Ainda tenho que destacá-lo e copiá-lo para usá-lo.
Mesmo assim!! A situação com os endereços de e-mail foi muito engraçada. Ou eram cinzas, mas clicáveis, ou azuis, sublinhados, mas não clicáveis.
Conclusão: falso. Temos que cuidar disso manualmente. :)
Solução:
Adicione links "Mailto" a cada endereço de e-mail que você compartilha em seu e-mail.
Para mais informações sobre como definir links "Mailto" em e-mails, consulte a postagem do blog que indicamos abaixo.
Hipótese 7: Os fundos não são apresentados no desktop do Gmail se a largura do e-mail ultrapassar 640 pixels
Muitos profissionais de marketing de e-mail afirmam que o Gmail não exibe a cor de fundo de um e-mail, nem a imagem de fundo se a largura do e-mail ultrapassar 640 pixels.
E, é claro, nós testamos isso.
A imagem/cor de fundo - testamos ambas - foram exibidas no Gmail em todos os dispositivos e em todos os navegadores da web.
(Largura da parte do conteúdo — 670 pixels, OS — macOS)
Conclusão: falsa.
Hipótese 8: O Gmail substitui as fontes personalizadas pelas fontes padrão.
As fontes personalizadas tornam seu design de e-mail ainda mais único. No entanto, é verdade: O Gmail tende a substituir algumas fontes personalizadas pela fonte padrão - Arial.
Testei 4 fontes diferentes.
Veja como elas funcionaram:
- Great Vibes - funcionou bem no celular e no desktop;
- Dokdo - foi substituído por Arial;
- Alexa Std - foi substituído por Arial;
- Montserrat - foi substituído por Arial.
Conclusão: parcialmente verdadeiro. Mas você precisa testar para descobrir quais fontes das que você realmente gosta não são substituídas pelas fontes padrão.
Lembre-se de que você pode fazer o upload de fontes personalizadas com Stripo.
Considerações Finais
Agora que você sabe como criar um e-mail HTML no Gmail, como enviar e-mails em massa através do Gmail gratuitamente, esperamos que você envie apenas e-mails HTML elegantes, até mesmo quando se tratar de correspondência pessoal.
2 comentários