Um e-mail otimizado para dispositivo móvel se ajusta para ser exibido corretamente em diversos tamanhos de tela. E-mails não otimizados podem ser exibidos incorretamente, causando confusão para o usuário. A otimização para dispositivos móveis é essencial, já que aproximadamente metade de todos os e-mails é aberta nesses dispositivos, garantindo que o conteúdo seja legível sem precisar dar zoom.

Adaptamos automaticamente os designs dos seus e-mails para dispositivos móveis, redimensionando e reorganizando os elementos para se ajustarem a telas menores. Você pode otimizar ainda mais utilizando nossas opções de pré-visualização em modo móvel e seguindo nossas dicas para oferecer a melhor experiência ao destinatário.

É bom saber

• Entenda a diferença entre blocos de seção e de conteúdo.
• Saiba como projetar seu e-mail de forma eficaz para o modo escuro, pois ele é frequentemente ativado em dispositivos móveis para evitar cansaço visual e economizar bateria. Para saber mais, consulte nosso artigo dedicado Crie e-mails para o modo escuro.

💡 Dicas para e-mails responsivos a dispositivos móveis

• Mantenha a simplicidade com um layout de coluna única
  Modifique o layout do conteúdo para não sobrecarregar o layout do e-mail. As telas dos dispositivos móveis têm espaço limitado, e ter muito conteúdo pode ser ineficaz.
• Use imagem quadrada ou no modo paisagem
  Para suas imagens, é recomendável que você use formatos quadrados ou no modo paisagem, pois eles são menores do que os no modo retrato. Além disso, certifique-se de que o tamanho do pixel da imagem não exceda o tamanho da tela do dispositivo móvel.
• Evite conteúdo grande
  Redimensione seu conteúdo, especialmente se as imagens ou os logotipos forem grandes quando visualizados no dispositivo móvel. Mantenha a largura das imagens entre 400 e 650 pixels; uma imagem com 400 pixels de largura é o menor tamanho necessário para uma exibição em largura total em um dispositivo móvel. Você também pode aumentar o tamanho dos botões para aumentar a capacidade de clique. Recomendamos também testar seu e-mail antes de enviá-lo ao destinatário para verificar o tamanho do conteúdo e garantir que ele seja adequado para dispositivos móveis.
• Implemente texto alternativo na imagem ou no logotipo
  Para sua imagem, é recomendável adicionar texto alternativo, que é a descrição textual que aparece quando uma imagem ou um logotipo não é exibido em um e-mail ou quando o destinatário bloqueia a imagem. Também é altamente recomendável, pois melhora a acessibilidade do conteúdo para quem usa leitores de tela.
  ➡️ Para saber mais, consulte nossa seção dedicada no artigo Use blocos de conteúdo (texto e links, imagem, botão etc.).

📱 Otimize seu design para dispositivos móveis

Ao criar seu e-mail no editor de arrastar e soltar, você pode visualizar e editar o design padrão do e-mail para dispositivos móveis clicando no ícone de dispositivo móvel no canto superior direito da tela:

Oferecemos diferentes possibilidades para editar a versão móvel padrão do design do e-mail e escolher como você deseja que o conteúdo seja exibido em dispositivos móveis:

• Ajuste seu e-mail para a largura total,
• Edite o layout do conteúdo,
• Ocultar seu conteúdo para desktop ou dispositivos móveis, ou
• Redimensione o conteúdo. 

Ajuste o corpo do e-mail para a largura total

Use a opção Full width on mobile (Largura total no dispositivo móvel) para estender o tamanho do corpo do e-mail para a largura total dos dispositivos móveis. Para melhorar a legibilidade do seu e-mail, recomenda-se fazer o seguinte:

1. Clique no ícone do dispositivo móvel na parte superior da tela para acessar o modo móvel.
2. Clique em Style (Estilo) à esquerda da tela.
3. Na seção Template (Modelo) do painel esquerdo, ative a opção Full width on mobile (Largura total no dispositivo móvel).

Modifique o layout do conteúdo

Para cada seção, é possível escolher o alinhamento e a orientação do conteúdo. Alinhe-o na vertical para melhorar a legibilidade ou na horizontal para economizar espaço. A orientação que você escolher dependerá do tipo de conteúdo que deseja exibir. Para ajudar você a escolher como exibir seu conteúdo em dispositivos móveis, confira alguns exemplos do que fazer e do que não fazer:

	✅ O que fazer	❌ O que não fazer
Alinhamento vertical
Alinhamento horizontal

Se a orientação do conteúdo na versão móvel padrão do nosso editor não for adequada, você poderá editá-la:

1. Clique no ícone do dispositivo móvel na parte superior da tela para acessar o modo móvel.
2. Selecione a seção para a qual deseja alterar a orientação.
3. No painel esquerdo, selecione a orientação de conteúdo desejada:
   1. Para alinhar na vertical, clique na seta para baixo.
   2. Para alinhar na horizontal, clique na seta para a direita.
4. Se você optar por alinhar o conteúdo na vertical, também é possível trocá-lo para inverter a ordem do conteúdo da seção. Isso exibirá o texto antes da imagem ou vice-versa, por exemplo.
   Para fazer isso, ative a opção Swap content (Trocar conteúdo) no painel esquerdo:
   

Oculte uma seção ou um bloco de conteúdo

Ocultar uma seção ou um bloco de conteúdo em dispositivos móveis ajuda a reduzir o conteúdo longo, a criar um design minimalista e a evitar a sobrecarga de e-mail no dispositivo. Você pode optar por transferir o que considera mais útil e importante para o modo móvel e ocultar o conteúdo não essencial. Para saber como ocultar uma seção ou um bloco de conteúdo em dispositivos móveis, consulte nosso artigo dedicado Mostrar ou ocultar conteúdo em seus e-mails (visibilidade de conteúdo).

Redimensione seu conteúdo

A velocidade de carregamento em dispositivos móveis é mais lenta do que em desktops. Redimensione os botões ou imagens para permitir que seu e-mail seja carregado mais rapidamente em dispositivos móveis:

1. Clique no ícone de dispositivo móvel na parte superior da tela para acessar a opção de modo móvel.
2. Selecione o botão ou a imagem que deseja redimensionar.
   
3. Na seção Width (Largura) do painel esquerdo, digite a largura desejada para o conteúdo. Você pode alterar o tamanho em porcentagem ou em pixels clicando no menu suspenso ao lado de %.
   Recomendamos manter a largura da imagem entre 400 e 650 pixels.

⏭️ O que vem a seguir?

• Crie e-mails compatíveis com o modo escuro
• Pré-visualize e teste seu e-mail
• Seção Editor de e-mail de arrastar e soltar

🤔 Dúvidas?

Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.

Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar à agência parceira da Brevo certa.