Projetando e-mails para dispositivos móveis

BR_-_Marketing_Lite__Plus__Professional__Enterprise.jpg

Com mais e mais pessoas em dispositivos móveis, é mais crítico do que nunca manter o celular em mente ao criar seus e-mails. Abaixo estão as práticas recomendadas que você pode usar ao criar modelos e campanhas.

Tome nota

  • Designer de e-mail clássico: Não é possível editar um e-mail apenas para dispositivos móveis ou apenas para desktop. Em vez disso, você está criando um e-mail que será renderizado de forma diferente em ambos os aplicativos
  • Designer de e-mail lançado em 2022: você pode editar um e-mail para dispositivos móveis e desktop. Essa configuração está localizada em "Configurações globais" "Configurações gerais" "Design responsivo" do designer de e-mail. Além disso, você pode ocultar conteúdo em dispositivos móveis ou na Web. Isso lhe dá a flexibilidade de projetar um e-mail compatível com dispositivos móveis e uma versão compatível com desktop ao mesmo tempo

Use a configuração "Ativar capacidade de resposta móvel"

Essa configuração é ativada automaticamente para cada campanha e e-mail de automação que você cria e pode ser desativada manualmente.

Para garantir que essa configuração esteja ativada, clique no ícone de engrenagem no canto superior direito do designer de e-mail. O modal de configurações da campanha será aberto. Se a opção "Ativar capacidade de resposta móvel" estiver desativada, clique na alternância para ativá-la.

Enable_mobile_responsiveness_toggle.jpeg

Observe que a maioria das versões mais antigas do aplicativo de e-mail nativo da Samsung não oferece suporte à renderização responsiva para dispositivos móveis.

Evite copiar e colar texto de uma fonte externa

Quando o texto é copiado de uma fonte externa, como um programa de processamento de texto, e colado em uma campanha, pegamos todo o estilo dessa fonte, além do texto real. Embora façamos o nosso melhor para remover qualquer coisa que afete a renderização do seu e-mail, nem tudo é capturado. Isso significa que o preenchimento extra em seu design pode fazer com que o texto pareça menor quando visualizado em dispositivos móveis e fazer com que o e-mail pareça diferente quando enviado para uma caixa de entrada.

Em vez disso, recomendamos digitar seu conteúdo diretamente no bloco de texto ou você pode colar o conteúdo em um editor de texto sem formatação e, em seguida, copiá-lo para sua campanha. Ambas as abordagens removerão todos os estilos acidentais em seu e-mail.

As colunas da sua campanha determinam a ordem em que serão recolhidas na vista móvel

A ordem em que o conteúdo aparece no designer (da esquerda para a direita) determina sua ordem quando as colunas são recolhidas no modo de exibição móvel. No celular, as colunas serão recolhidas da esquerda para a direita e, em seguida, de cima para baixo.

Recomendamos que encomende o seu conteúdo para seguir a ilustração abaixo. O traço representa uma linha e o agrupamento de imagens e texto representa uma coluna. A borda escura representa o marcador de coluna do designer e se estende apenas até a primeira linha.

campaign_column_example_1.png

Quando as colunas são recolhidas em dispositivos móveis, o conteúdo está na ordem correta:

campaign_column_example_2.png

Mantenha sua largura de e-mail em não mais de 650 pixels

Essa é a largura que funciona para a maioria dos clientes de e-mail e dispositivos móveis. Se um e-mail tiver mais de 650 pixels, talvez seja necessário usar uma barra de rolagem horizontal para visualizar sua mensagem. Isso torna sua mensagem difícil de ler e pode custar um cancelamento de inscrição devido a uma experiência menos do que estelar.

A largura da imagem deve ser de 400 a 650 pixels

Uma imagem com 400 pixels de largura é o mínimo necessário para exibir a largura total em um dispositivo móvel. Imagens menores que 400 pixels não serão ampliadas em dispositivos móveis. Isso leva em conta logotipos e ícones que não se destinam a aumentar a escala.

Se você carregar uma imagem grande, ela será reduzida para não maior que o dobro da largura do e-mail.
Se a imagem ou o logotipo for muito grande quando visualizado em dispositivos móveis, você poderá redimensioná-la e, em seguida, enviá-la novamente para o designer de e-mail. Observe que a largura real da imagem e a largura definida no designer são duas coisas diferentes. As imagens adicionadas como embutidas em um bloco de texto não serão ampliadas.

Para ver o tamanho da sua imagem com o Email Designer lançado em 2022, cliquena imagem no designer e visualize o tamanho nas opções Bloco de Imagem à direita:
image_in_new_email_designer.jpeg 


Para ver o tamanho da sua imagem com o designer de e-mail clássico, clique na imagem no designer e exiba o tamanho na guia Opções:

adjust_image_size.png


Lembre-se, é sempre melhor dimensionar uma imagem maior para baixo do que uma menor para cima.

Usar texto alternativo com imagens

O texto ALT é a cópia escrita que aparece no lugar de uma imagem se a imagem não for carregada na caixa de entrada de um contato ou se eles tiverem imagens bloqueadas. O texto ALT também é altamente recomendado porque aumenta a acessibilidade do seu conteúdo para aqueles que dependem de leitores de tela.

Para adicionar texto ALT à sua imagem usando o Email Designer (lançado em 2022), clique na imagem em sua campanha e adicione de 1 a 2 palavras no campo "Texto alternativo" nas opções de Bloco de imagem à direita:

new_email_designer_alt_text_example.png

Para adicionar texto ALT à sua imagem usando o Classic Email Designer, clique na imagem em sua campanha e adicione de 1 a 2 palavras no campo "Informações" na guia de opções:

alt_text_2.png

Usar blocos de imagem em vez de inserir uma imagem em um bloco de texto

Observe que esse método só está disponível no Designer clássico.

Os blocos de conteúdo de texto que contenham uma imagem e links alinhados com essa imagem não poderão ser clicados no Outlook 2007 ou no Outlook 2013. Além disso, o texto pode não ser quebrado corretamente em torno de sua imagem quando visualizado em dispositivos móveis.

Como prática recomendada, recomendamos o uso de blocos de imagem em vez de adicionar uma imagem embutida a um bloco de texto.

Use o bloco "Espaçador" para criar espaço em branco em torno de conteúdo e imagens

O uso de preenchimento em torno de uma imagem ou conteúdo para criar espaços em branco forçará seu conteúdo a se tornar estreito quando visualizado em alguns dispositivos móveis.

Em vez disso, use o bloco "Espaçador" no designer de e-mail e defina-o como "Ocultar no celular" (designer de e-mail clássico) ou "Ocultar elemento" (designer de e-mail lançado em 2022), se desejar.

  Ocultar o bloco espaçador impedirá que grandes espaçamentos ou margens apareçam quando o e-mail for visualizado em dispositivos móveis.

Use a opção "ocultar em dispositivos móveis"

Esta opção oculta elementos não essenciais no seu e-mail quando visualizados num dispositivo móvel. Isso melhorará a experiência de seus assinantes e os manterá envolvidos com seu conteúdo.

Para ocultar um item do celular usando o Email Designer lançado em 2022:

  1. Clique na imagem.
  2. No Bloco de Imagem à direita, role para baixo até a parte inferior e clique no ícone do celular, para ocultar em dispositivos móveis.
  3. Você também pode clicar no ícone da área de trabalho para ocultar a imagem na visualização da área de trabalho em "Ocultar elemento". Observe que a opção "Ocultar na área de trabalho" só está disponível com o Email Designer (lançado em 2022).
    new_email_designer_hide_on_mobile_option.jpeg
    Um ícone com uma linha através do ícone móvel aparecerá no bloco que você usa a opção "ocultar no celular". 
    new_email_designer_hide_on_mobile.png

Para ocultar um item do celular usando o Designer de Email Clássico:

  1. Clique nesse bloco e clique na engrenagem:
    click_cog.png
  2. Na lista de opções, clique em "Ocultar em dispositivos móveis".
  3. Quando você passar o mouse sobre esse elemento no designer, você verá isto:

    hide_message.png

Experimente com texto de pré-cabeçalho

Diferencie-se do resto dos e-mails na caixa de entrada do seu assinante e incentive-os a abrir seu e-mail. Saiba mais sobre como adicionar um texto de pré-cabeçalho ao seu e-mail.

Teste seu e-mail

Use a visualização da área de trabalho e envie a você e a seus colegas um e-mail de teste para exibir em diferentes dispositivos móveis. Você também pode usar nosso recurso de visualização de compatibilidade para testar seu e-mail com vários clientes de e-mail.

 

Esse artigo foi útil?
Usuários que acharam isso útil: 12 de 32

Have more questions? Submit a request

Start free trial