Este manual explica como criar e-mails responsivos para dispositivos móveis no editor Stripo. Ele foca na configuração prática, no controle do layout e nos problemas comuns em dispositivos móveis, com instruções passo a passo claras e exemplos que você pode aplicar enquanto trabalha no editor.
Principais conclusões
- Você pode editar a versão móvel diretamente, sem precisar adivinhar o resultado: você pode alternar para a visualização móvel no editor, definir qualquer configuração e vê-las da maneira como aparecerão nos telefones.
- Você pode definir estilos globais para dispositivos móveis primeiro e, em seguida, ajustar qualquer bloco individualmente, se necessário: o Stripo permite definir regras básicas para dispositivos móveis em Estilos gerais e, em seguida, substituí-las para qualquer faixa, estrutura ou bloco quando necessário.
- Você pode controlar o que aparece no celular, não apenas a aparência: você pode ocultar elementos no celular, alterar a ordem de empilhamento, ajustar espaços e decidir quais layouts permanecem em uma linha ou empilhados verticalmente.
Entenda como o Stripo lida com a exibição em dispositivos móveis
O que significa “otimizado para dispositivos móveis” no Stripo
Todos os modelos de e-mail que você cria com o Stripo são responsivos por padrão, portanto, seus layouts se adaptam a telas menores. No entanto, você pode definir configurações móveis adicionais para que os e-mails tenham a aparência exata que você deseja em dispositivos móveis. Essas configurações incluem: tamanhos de fonte, tamanho dos botões (incluindo botões de largura total), espaçamento (margens e preenchimento no celular), comportamento de empilhamento de contêineres em estruturas e ocultar ou mostrar alguns elementos extras no celular.
Esteja ciente de que o resultado final depende do cliente de e-mail: as configurações específicas para dispositivos móveis dependem de consultas de mídia, e alguns aplicativos não as suportam. Nesses clientes, as substituições para dispositivos móveis podem ser ignoradas, e a visualização móvel pode ficar semelhante à versão para desktop.
Quais alterações se aplicam apenas a dispositivos móveis
As configurações exclusivas para dispositivos móveis afetam a aparência do e-mail em smartphones, não na versão para desktop. Elas incluem tamanhos de fonte para dispositivos móveis, tamanho dos botões (incluindo botões de largura total), espaçamento (margens e preenchimento em dispositivos móveis), comportamento de empilhamento de contêineres em estruturas e ocultação de elementos em dispositivos móveis.
Quando as configurações para dispositivos móveis não têm efeito
Se os controles para dispositivos móveis estiverem inativos ou as alterações não aparecerem, verifique a opção Design responsivo.
Design responsivo em Aparência
Use isso quando trabalhar com as configurações de Formatação para dispositivos móveis:
1. Vá para Estilos e Layouts Globais.
2. Ative o Design Responsivo.
Se o Design Responsivo estiver desativado, o e-mail em dispositivos móveis terá a mesma aparência da versão para desktop, e a seção Formatação móvel poderá estar inativa.
Comece com uma base limpa usando Estilos Gerais
Alterne entre os modos de estilo para desktop e dispositivos móveis
Os Estilos gerais permitem definir regras de design padrão separadamente para desktop e celular. Use o botão de alternância de dispositivo no painel Estilos Gerais para alternar entre Desktop e Celular. Cada modo armazena seus próprios valores, portanto, as alterações feitas no Celular afetam apenas a visualização no celular, não a versão para desktop.
Defina o layout global e as regras básicas para todo o e-mail
Use Estilos Gerais → Estilos Globais e Layout para definir como todo o e-mail se comportará antes de trabalhar em faixas, estruturas ou blocos individuais. Vale a pena observar que nem todos os recursos do desktop são aplicáveis ao celular.
No entanto, se você estiver desenvolvendo para as versões desktop e móvel, poderá fazer o seguinte:
Passo a passo: Configurar estilos Globais e Layout
Defina o fundo geral:
1. Escolha uma cor de fundo geral para a área da mensagem de e-mail.
2. Em um desktop, a cor de fundo cobre toda a área da mensagem.
3. No celular, esse fundo fica oculto.
Adicione uma imagem de fundo (somente em computadores):
4. Selecione uma imagem de fundo e defina sua posição.
5. Habilite a repetição da imagem de fundo se a imagem deve preencher todo o comprimento da mensagem.
6. As imagens de fundo são renderizadas apenas no desktop e não aparecem em dispositivos móveis.
7. Alguns clientes de e-mail, incluindo o Outlook, podem não exibir imagens de fundo, portanto, defina uma cor de fundo alternativa próxima à cor da imagem.
Definir a largura e o alinhamento do conteúdo da mensagem:
8. A largura e o alinhamento só são possíveis em um design para desktop.
9. Defina a largura do conteúdo da mensagem. O padrão é 600 px.
10. Você pode definir qualquer valor entre 320px e 900px.
11. Escolha o alinhamento da mensagem.
Controle o sublinhado dos links:
12. Ative ou desative o sublinhado dos links para todo o modelo de e-mail.
Ativar direção do texto da direita para a esquerda:
13. Ative a direção do texto da direita para a esquerda para idiomas que exigem scripts RTL, como árabe ou urdu.
Definir Estilos de Lista Personalizados:
14. Defina estilos de lista com marcadores que serão aplicados em todo o e-mail.
Defina padrões de espaçamento:
15. Defina o Preenchimento Padrão da Estrutura. Esse preenchimento é aplicado automaticamente a novas estruturas.
16. Defina as Margens ao Redor da Mensagem para controlar o espaçamento entre o conteúdo do e-mail e as bordas da área da mensagem.
Essas configurações criam uma base consistente entre computadores e dispositivos móveis, reduzindo a necessidade de ajustes posteriores.
Controle a tipografia e o espaçamento para facilitar a leitura em dispositivos móveis
Tipografia global de faixas
Passo a passo: defina a tipografia das faixas por tipo e ajuste-as
Defina a tipografia global das faixas:
1. Vá para Estilos Gerais → Estilos de Faixas.
2. Selecione um tipo de faixa.
3. Defina a família de fontes, a altura da linha e o espaçamento entre letras para blocos de texto. Essas configurações não afetam os títulos.
4. Além disso, você pode clicar no bloco contêiner → Faixa.
Defina os planos de fundo das faixas:
5. Defina a cor de fundo da faixa e seu conteúdo.
6. Adicione uma imagem de fundo, se necessário.
7. Defina uma cor de fundo alternativa, pois alguns clientes, incluindo o Outlook, podem não renderizar imagens de fundo.
Ou, se você abrir a configuração da faixa clicando no bloco do contêiner:
Defina o tamanho da fonte por tipo de faixa:
8. Defina o tamanho padrão da fonte e a altura da linha para cada tipo de faixa.
9. Use tamanhos de fonte menores para a faixa de Rodapé, quando apropriado.
Ajuste o espaçamento das faixas em dispositivos móveis:
10. Selecione uma faixa específica.
11. Defina o Preenchimento no Celular para controlar o espaçamento ao redor da faixa na visualização móvel.
Ocultar uma faixa em dispositivos móveis:
12. Ative a opção Ocultar elemento no celular quando uma faixa não deveria aparecer em telas pequenas.
Tipografia em toda a faixa para diferentes áreas do e-mail
As faixas definem grandes seções de um e-mail e controlam a aparência do corpo do texto em layouts repetidos. Cada faixa pode pertencer a um tipo específico, o que permite um estilo consistente.
Os tipos de faixa incluem Cabeçalho, Conteúdo, Rodapé e Área de informações. O uso de tipos de faixa ajuda a aplicar diferentes tamanhos de fonte e regras de espaçamento, como texto menor no rodapé.
Passo a passo: aplique formatação de bloco personalizada para títulos e defina estilos de título
Aplicar formatação de título:
1. Selecione o texto dentro de um bloco de texto.
2. Selecione H1, H2 ou H3 no menu de formatação de texto.
3. No modo móvel, defina o alinhamento do texto para títulos quando o alinhamento da área de trabalho não funcionar bem em telas pequenas.
Defina estilos de título personalizados no contêiner:
4. Abra Estilos e alterne entre Desktop e Celular usando o botão do dispositivo.
5. Escolha o nível de título que deseja editar.
6. Defina a família de fontes, o espaçamento entre letras, o tamanho da fonte, a altura da linha, o estilo do texto e a cor da fonte.
Crie CTAs otimizados para dispositivos móveis que permaneçam clicáveis
Padrões de botões que funcionam em todo o modelo
Os botões em dispositivos móveis devem ser fáceis de ler e tocar. Textos menores que 18 px reduzem a legibilidade e aumentam os erros de toque. Recomenda-se um tamanho de fonte de 18 px ou superior para botões em dispositivos móveis.
Defina Estilos Globais de Botões
Use Estilos Gerais para definir a aparência dos botões uma vez para todo o e-mail e, em seguida, ajuste os valores para dispositivos móveis separadamente.
Passo a passo: definir estilos Globais de Botões
Abra Estilos de botão:
1. Vá para Estilos Gerais → Estilos de Botão.
2. Alterne entre Desktop e Celular usando o botão de alternância do dispositivo.
Definir tipografia:
3. Escolha a família de fontes.
4. Defina o tamanho da fonte e a cor do texto.
5. Selecione o estilo do texto e o espaçamento entre letras.
Defina a forma e a cor do botão:
6. Defina a cor de fundo do botão.
7. Configure as bordas, em todos os lados ou individualmente.
8. Defina a cor e o raio da borda.
9. Adicione preenchimentos internos.
Controle a largura do botão:
10. Ative a opção Ajustar ao Contêiner para que os botões se adaptem à largura do contêiner (opção disponível apenas para computador).
Melhorar a renderização do Outlook:
11. Ative o Suporte ao Outlook para aplicar a renderização baseada em VML para uma melhor exibição dos botões nos clientes Outlook.
Defina estilos de foco para desktop:
12. Configure as cores de fundo e do texto ao passar o mouse para interação com o desktop.
13. Esses estilos se aplicam quando o cursor é colocado sobre o botão.
Trabalhe diretamente na visualização móvel dentro do editor
Alterne entre desktop e celular durante a edição
O Stripo permite que você edite a versão móvel sem sair do editor.
Passo a passo: alterne entre as visualizações
1. Use o botão de alternância de dispositivo na barra de ferramentas superior.
2. Selecione Desktop ou Celular para visualizar e editar a versão correspondente.
3. Faça alterações na visualização ativa. O desktop e o celular armazenam valores separados quando aplicável.
Domine o comportamento da estrutura no celular
Estrutura responsiva: empilhar ou permanecer em uma linha
Como você já sabe, a Estrutura Responsiva controla como os contêineres se comportam no celular. Quando ativada, os contêineres são empilhados verticalmente. Quando desativada, os contêineres permanecem em uma única linha. Desativá-la é útil quando você deseja layouts lado a lado no celular, como cartões de produtos ou pequenos recursos visuais com texto curto.
Inversão de contêineres: controlando a ordem do conteúdo
Em layouts responsivos, a ordem dos contêineres é importante. Se o texto estiver à esquerda e a imagem à direita, o empilhamento pode colocar o texto acima da imagem. Isso geralmente não é desejável para leitura em dispositivos móveis.
Passo a passo: ativar a inversão de contêineres
1. Selecione uma estrutura com dois contêineres (clique em Estrutura nos contêineres).
2. Ative a inversão de contêineres no celular.
3. Visualize a exibição móvel para confirmar se a ordem está correta.
Lembre-se: a inversão de contêineres funciona apenas para estruturas com dois contêineres.
Adicione espaçamento entre os contêineres
Os layouts móveis geralmente precisam de espaço extra entre os contêineres para evitar conteúdo amontoado.
Passo a passo: use o espaçamento entre contêineres no celular
1. Selecione a estrutura.
2. Defina o espaçamento entre contêineres em dispositivos móveis para adicionar espaçamento entre os contêineres.
Aplique a estrutura e o preenchimento do contêiner em dispositivos móveis
Use o preenchimento móvel para ajustar o espaçamento sem alterar o layout do desktop.
Passo a passo: definir preenchimento em dispositivos móveis para uma estrutura
1. Alterne para a visualização Móvel.
2. Selecione a estrutura.
3. Defina o Preenchimento no celular.
Essas configurações se aplicam apenas a dispositivos móveis e não alteram o espaçamento em computadores.
Manipulação de imagens em dispositivos móveis que evita distorção, rolagem e recorte inadequado
Imagem responsiva: quando ativá-la
Imagens grandes podem causar rolagem horizontal ou parecer muito grandes em dispositivos móveis. A imagem responsiva ajusta a largura da imagem à tela do dispositivo e evita esses problemas. Esse controle funciona em dispositivos que suportam consultas de mídia.
Imagens pequenas (logotipos): evite o alongamento indesejado
Imagens pequenas, como logotipos, não devem ser esticadas para ocupar toda a largura da tela.
Passo a passo: desative a imagem responsiva para imagens pequenas
1. Alterne para a visualização móvel.
2. Selecione a imagem.
3. Desative a imagem responsiva.
4. Defina manualmente o tamanho de imagem necessário.
Padrões de imagem para dispositivos móveis para modelos de e-mail
Para uma renderização estável em todos os dispositivos e clientes:
- use os formatos JPEG, GIF ou PNG;
- mantenha a largura da imagem entre 600 e 800 px;
- teste as imagens na visualização móvel e em clientes reais.
Imagens de fundo em dispositivos móveis: o que é possível e o que não é?
As imagens de fundo têm tamanhos fixos e não se adaptam à largura da tela da mesma forma que as imagens normais. Você pode ajustar a posição e o tamanho da imagem de fundo para melhorar a aparência, mas os resultados variam de acordo com o cliente.
Limites de renderização a serem lembrados:
- imagens de fundo em contêineres, estruturas e faixas não são exibidas no Outlook;
- a imagem de fundo global é renderizada no desktop e não aparece no celular.
Sempre defina uma cor de fundo alternativa ao usar imagens de fundo.
Limpeza em nível de bloco no celular para legibilidade do texto
Corrija quebras de linha inadequadas em blocos de texto
Nos dispositivos móveis, o texto pode quebrar em linhas de maneira irregular. Um caso comum é uma única palavra passar para uma linha separada, o que reduz a legibilidade.
Passo a passo: corrigir quebras de linha
Reduza o tamanho da fonte no celular:
1. Alterne para a visualização Móvel.
2. Selecione o bloco de texto.
3. Em Estilos, diminua o tamanho da fonte para dispositivos móveis até que o texto caiba perfeitamente em uma linha.
Ajuste o alinhamento e os espaçamentos:
4. Verifique o alinhamento do texto.
5. Reduza os preenchimentos à esquerda e à direita, pois preenchimentos largos podem forçar quebras de linha indesejadas.
Desative a quebra automática de linha para uma linha específica:
6. Selecione a linha de texto.
7. Ative Desativar Quebra Automática de Linha.
8. Use essa opção com cuidado. Linhas longas com quebra automática de linha desativada podem não caber na tela do celular e causar rolagem horizontal.
Solução de problemas: quando seu e-mail deixa de responder após o envio
Por que um e-mail responsivo pode parecer com a versão para desktop no celular
Alguns aplicativos de e-mail móveis não suportam consultas de mídia. Durante o envio ou exportação, certos clientes de e-mail removem o CSS responsivo do código. Quando isso acontece, os estilos específicos para dispositivos móveis são removidos e o e-mail é renderizado como uma versão para desktop em dispositivos móveis.
Caso do Gmail: consultas de mídia removidas após o envio do Gmail
O Gmail remove estilos CSS responsivos quando os e-mails são enviados diretamente dele. Como resultado, a versão móvel pode parecer não responsiva.
Passo a passo: mantenha a responsividade para o Gmail
1. Exporte o e-mail para um ESP que suporte consultas de mídia.
2. Envie o e-mail para o Gmail a partir desse ESP.
Nesse fluxo, o e-mail mantém seu comportamento responsivo no Gmail.
Caso do Outlook: o comportamento responsivo difere por versão e aplicativo
Nem todas as versões do Outlook suportam design responsivo. Algumas removem automaticamente os estilos responsivos, o que leva a uma renderização não responsiva em dispositivos móveis.
Diferenças de teste a serem observadas:
- os e-mails de teste enviados do Stripo para o Outlook.com podem ser responsivos em dispositivos móveis.
Lista de verificação de controle de qualidade móvel antes de exportar
Antes de exportar ou enviar um e-mail, revise a versão móvel no editor.
Verifique o seguinte na visualização para dispositivos móveis:
- tipografia: tamanhos dos títulos, legibilidade do corpo do texto, quebras de linha;
- margens e preenchimentos: espaçamento em torno de faixas, estruturas, contêineres e blocos;
- botões: tamanho do texto, área de toque e comportamento em largura total, quando necessário;
- comportamento do contêiner: ordem de empilhamento, inversão e espaços entre contêineres;
- elementos ocultos: confirme que os elementos ocultos no celular não aparecem;
- imagens: comportamento responsivo, tamanho do logotipo e imagens de fundo alternativas;
- rolagem horizontal: verifique se há imagens largas, fontes grandes ou estruturas não responsivas.
Após a visualização no editor, teste o e-mail em diferentes dispositivos e clientes de e-mail. O comportamento do cliente varia, especialmente em dispositivos móveis, e os testes em dispositivos reais ajudam a detectar problemas que as visualizações podem não mostrar.
Conclusão
O design de e-mails para dispositivos móveis depende tanto das configurações do editor quanto do comportamento do cliente de e-mail. Ao definir uma base sólida em Estilos gerais, usar a Formatação para dispositivos móveis para ajustes rápidos e refinar estruturas, imagens e texto diretamente na visualização móvel, você pode controlar como os e-mails se comportam em telas pequenas. Sempre revise a pré-visualização móvel e teste em diferentes clientes antes de enviar, especialmente quando o Gmail ou o Outlook fazem parte do seu fluxo de trabalho.
0 comentários