Projetando e-mails para dispositivos móveis

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

Tome nota

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

Observe que a maioria das versões mais antigas do aplicativo de email 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 email, 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 email 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 email.

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. Isso também conhecido como stacking ou empilhamento de blocos.

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.

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

Mantenha sua largura de email em não mais de 650 pixels

Essa é a largura que funciona para a maioria dos clientes de email e dispositivos móveis. Se um email 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 email.
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 email. 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:
 

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

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:

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:

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 email e defina-o como "Ocultar no celular" (designer de email clássico) ou "Ocultar elemento" (designer de email lançado em 2022), se desejar.

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

Esta opção oculta elementos não essenciais no seu email 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).
   
   Um ícone com uma linha através do ícone móvel aparecerá no bloco que você usa a opção "ocultar no celular". 
   

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

1. Clique nesse bloco e clique na engrenagem:
   
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:
   
   

Experimente com texto de pré-cabeçalho

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

Teste seu email

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