Projetando e-mails para dispositivos móveis

Com um número cada vez maior de pessoas em dispositivos móveis, nunca foi tão importante manter o celular em mente à medida que você cria seus e-mails. Abaixo estão algumas dicas e truques que você pode usar ao criar seus próprios modelos para ficar à frente no planejamento da caixa de entrada do celular e manter seus inscritos interessados.

Nota: Não é possível editar um e-mail apenas para o dispositivo móvel ou para desktop. Em vez disso, você criará um e-mail que será apresentado de forma diferente nos dois aplicativos.

Os clientes de e-mail leem mensagens da esquerda para a direita
Os itens HTML sempre serão empilhados da esquerda para a direita. Isso significa que seus blocos de conteúdo serão empilhados da esquerda para a direita. Se você criar um e-mail com uma imagem à esquerda e, em seguida, adicionar um bloco de texto à direita dessa imagem, ela aparecerá acima desse texto no dispositivo móvel. Além disso, é sempre melhor manter seu design simples e limpo, mantendo a tela menor em mente.

A largura de seu e-mail deve ter, no máximo, 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 não só dificulta a leitura da mensagem, mas pode custar um cancelamento de inscrição devido a uma experiência que ficou aquém das expectativas.

A largura da imagem deve ser de 400 a 650 pixels
Uma imagem de 400 pixels de largura é o mínimo necessário para que ela ocupe toda a tela em um dispositivo móvel. Para ver o tamanho da imagem, clique na imagem que está no designer e veja o tamanho na aba Opções:

adjust_image_size.png

Para redimensioná-la, basta fazer o ajuste na aba Opções ou redimensione o arquivo de imagem real e recarregue a imagem de novo.

Lembre-se: é sempre melhor reduzir uma imagem maior do que aumentar uma menor.

Use Texto Alt
Texto ALT é uma ótima ferramenta, pois ficará visível caso um inscrito tenha as imagens bloqueadas. Para adicionar texto ALT à sua imagem, clique na imagem em sua campanha e adicione 1-2 palavras no campo "Informações" na aba Opções:

alt_text_2.png

Use blocos de imagem em vez de inserir uma imagem em um bloco de texto
Os blocos de conteúdo de texto contendo uma imagem e qualquer link alinhado com essa imagem não poderão ser clicados no Outlook 2007 nem no Outlook 2013 (veja a imagem abaixo). Além disso, talvez o texto não seja apresentado corretamente em volta da imagem quando exibido em um dispositivo móvel.

example_link.png

Use o widget espaçador para criar espaço em branco em torno do conteúdo e das imagens
O uso de padding em torno de uma imagem ou conteúdo para criar espaço em branco fará seu conteúdo ficar estreito quando exibido em alguns dispositivos móveis. Use o widget espaçador no designer de arrastar e soltar, e configure-o para ficar oculto no dispositivo móvel se desejar (mais informações abaixo).

spacer_widget.png

Aproveite o recurso "ocultar no dispositivo móvel"
Esse recurso ocultará os elementos não essenciais (também conhecidos lixo) em seu e-mail quando eles são exibidos em um dispositivo móvel. Isso irá melhorar a experiência para seus inscritos e mantê-los abrindo as mensagens.

Para ocultar um item no dispositivo móvel, basta clicar nesse bloco e clicar na engrenagem:

click_cog.png

Clique em "Ocultar em dispositivos móveis".

hide_on_mobile.png

Quando você passar o mouse sobre esse elemento no designer, verá isso:

hide_message.png

Experimente com texto do cabeçalho
Diferencie-se do resto dos e-mails na caixa de entrada de seu inscrito e motive-o a abrir seu e-mail. Saiba mais sobre como adicionar texto do cabeçalho ao seu e-mail aqui

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

Tem mais dúvidas? Envie uma solicitação