Um e-mail otimizado para dispositivos móveis é um e-mail que se ajusta e é exibido corretamente em vários tamanhos de tela, incluindo smartphones e tablets. O e-mail não otimizado pode ser exibido incorretamente, causando confusão para o usuário. É fundamental garantir que o design do e-mail seja otimizado para dispositivos móveis, pois cerca de metade dos e-mails são abertos nesses tipos de dispositivos. Isso garante a legibilidade em diferentes dispositivos, evitando que os usuários aumentem ou diminuam o zoom para visualizar o conteúdo. 

Para simplificar essa tarefa, adaptamos automaticamente o design do e-mail aos dispositivos móveis: elementos como imagens, texto e botões são automaticamente dimensionados e reorganizados para se ajustarem às telas dos dispositivos móveis. No entanto, você sempre pode otimizar esse design padrão do e-mail para dispositivos móveis usando as diferentes opções de visualização do modo móvel e seguindo nossas dicas para proporcionar aos destinatários a melhor experiência possível. 

É 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 com base no tipo de dispositivo.

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
• Envie e-mails de teste

🤔 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 o parceiro especialista certificado em Brevo.