Ao elaborar um email de marketing, você pode ocultar seções específicas sobre clientes de email móveis ou de desktop. Você também pode alterar a configuração da coluna e o layout geral para melhorar a experiência dos destinatários que leem seu email em dispositivos menores.
Adaptar seu e-mail a diferentes dispositivos pode ajudar a aumentar o engajamento e melhorar a experiência geral do usuário com seus e-mails.
Compreender limitações e considerações
- A configuração de módulos e estilos separados em desktop e mobile só pode ser feita no editor de arrastar e soltar. Para e-mails criados usando modelos de gerenciador de design, os desenvolvedores precisarão adicionar manualmente qualquer personalização de dispositivo.
- Os seguintes clientes de e-mail não suportam e-mails otimizados para dispositivos móveis: Yahoo! Mail on Android, AOL Mail on Android, Gmail IMAP, e algumas versões do Samsung Mail. Nesses clientes, os módulos ocultos estarão visíveis e as configurações somente móveis serão ignoradas.
- As configurações do módulo, como tamanho da fonte ou preenchimento, não podem ser definidas com valores diferentes para móvel e área de trabalho. Para usar valores diferentes para essas configurações, é recomendável criar módulos separados somente para portáteis e somente para desktop com o mesmo conteúdo.
Ocultar módulos e seções no desktop ou celular
Para personalizar quais módulos ou seções aparecem para destinatários de desktop ou dispositivos móveis:
- Clique no nome de um e-mail rascunhado ou clique em Criar e-mail.
- Clique no botão desktop ícone da área de trabalho oumobileícone móvel na parte superior do editor de email para definir as configurações para cada tipo de dispositivo.
- Passe o mouse sobre um módulo ou seção e clique no hide ocultar ícone para ocultar esse módulo na versão do email que você está editando.
- Para mostrar todos os módulos ocultos de uma versão que você está editando, clique no menu suspenso Opções de exibição na parte superior do editor e, em seguida, ative a opção Mostrar ocultos ativada.
- Para retornar um módulo oculto ao visível para essa versão do e-mail, clique no view ícone de exibição onde o ícone oculto estaria caso contrário.
Personalizar o empilhamento de módulos em dispositivos móveis
Você pode personalizar como os módulos de uma seção serão empilhados quando exibidos em um dispositivo móvel.
- Clique no nome de um e-mail rascunhado ou clique em Criar e-mail.
- No editor de e-mail, clique em uma seção.
- No editor de barra lateral esquerda, selecione uma opção na seção Empilhamento :
- Manter as mesmas colunas: o e-mail exibirá o mesmo número de colunas no celular e na área de trabalho.
- Esquerda em cima da direita: os módulos no lado esquerdo da seção aparecerão primeiro no celular.
- Direita em cima da esquerda: os módulos do lado direito da seção aparecerão primeiro no celular.
Personalize o estilo no desktop ou no celular
Você pode configurar estilos separados de desktop e móvel para uma única seção ou para todo o e-mail de marketing.
- Clique no nome de um e-mail rascunhado ou clique em Criar e-mail.
- No editor de e-mail, clique em uma seção para editar seu estilo ou clique no styles ícone de design de modelo à esquerda para editar o estilo do email inteiro.
- No editor da barra lateral esquerda, alterne a opção Todos os dispositivos desliga ao lado de uma seção para exibir configurações separadas para desktop e mobile.
- Edite as configurações de estilo para desktop e celular.
Quando terminar de editar as configurações de visibilidade e layout do seu email, você poderá visualizar como o email aparecerá em clientes de email diferentes.
Otimizar e-mails para dispositivos móveis
Para melhorar a aparência de seus emails de marketing em dispositivos móveis, é recomendável seguir estas práticas recomendadas:
- Use um modelo de e-mail responsivo: o conteúdo responsivo se ajusta para caber na tela onde é visualizado. Embora os modelos de arrastar e soltar do HubSpot sejam responsivos por padrão, os desenvolvedores que criam modelos codificados precisarão usar a marcação de modelos de e-mail responsiva.
- Reduzir o tamanho dos arquivos de imagem: arquivos de imagem menores resultam em tamanhos de e-mail menores e tempos de carregamento mais rápidos. Enquanto o HubSpot redimensiona automaticamente qualquer imagem com uma largura definida, o que reduz o tamanho do arquivo, você também pode usar um serviço como o FastStone Photo Resizer.
- Criar botões e links legíveis: qualquer botão e link de texto deve ter pelo menos 57 pixels de largura e altura.
- Testar o texto de visualização do e-mail: o texto alternativo das imagens colocadas no início de um e-mail de marketing pode ser colocado no texto de visualização do e-mail. Você pode remover o texto alt da imagem para resolver esse problema. É recomendável enviar um email de teste para verificar se o texto de visualização está aparecendo como esperado.
- Evite elementos Javascript e iframe: os elementos javascript e iframe incorporados não serão renderizados pela maioria dos clientes de email. É recomendável evitar a adição desses itens a modelos codificados.
- Reduzir o tamanho do email para evitar recorte: emails com mais de 102 KB podem ter seu conteúdo oculto atrás de um "Ver link de mensagem inteira" no Gmail. Saiba mais sobre como calcular e diminuir o tamanho de um email.