Torne seu design de e-mail responsivo e compatível com dispositivos móveis em 5 etapas fáceis
Publicados: 2024-01-17Você deseja que seus boletins informativos por e-mail e campanhas de marketing tenham uma aparência incrível em qualquer dispositivo? Claro que você faz. Ninguém quer que seu trabalho árduo se torne ilegível na caixa de entrada de alguém. Felizmente, em apenas cinco etapas, você pode garantir que seus e-mails sejam responsivos e prontos para impressionar os assinantes. Então pegue algumas bebidas, sua playlist favorita ou uma bebida e vamos começar a garantir que eles tenham a melhor aparência em qualquer tela.
Defina as larguras das colunas em porcentagens, não em pixels
Para tornar o design do seu e-mail responsivo, defina as larguras das colunas usando porcentagens em vez de valores fixos de pixel. Isso permite que as colunas se ajustem de forma flexível a diferentes larguras de tela.
Use uma grade fluida
A abordagem de grade fluida usa porcentagens para larguras de colunas para que elas possam expandir e contrair conforme necessário com base no tamanho da tela. Para um layout simples de duas colunas, faça a coluna esquerda com 60-70% de largura e a coluna direita com 30-40% de largura. Por exemplo:
<tabela>
<tr>
<td width=”65%”>Conteúdo da coluna 1 aqui</td>
<td width=”35%”>Conteúdo da coluna 2 aqui</td>
</tr>
</tabela>
Isso permitirá que a Coluna 1 ocupe 65% do espaço disponível e a Coluna 2 os 35% restantes. Em uma tela grande de desktop, a Coluna 1 pode ter 650 px de largura, enquanto em uma tela pequena de celular, pode ter apenas 200 px de largura. Mas as proporções relativas permanecerão as mesmas.
Adicione consultas de mídia para pontos de interrupção responsivos
As consultas de mídia permitem aplicar diferentes regras de estilo com base na largura da tela. Você pode usá-los para fazer ajustes adicionais em sua grade de fluidos em diferentes pontos de interrupção. Por exemplo:
/* Para celulares: */
Tela somente @media e (largura máxima: 600px) {
mesa, td {
largura: 100%! Importante;
}
}
/* Para tablets: */
Tela @media somente e (largura mínima: 601px) e (largura máxima: 900px) {
mesa, td {
largura: 80%! Importante;
}
}
Isso fará com que a tabela e as colunas se expandam para preencher 100% da largura da tela em telefones pequenos e 80% em tablets, tornando o design totalmente responsivo.
Use imagens fluidas e mídias que redimensionam
Para tornar o design do seu e-mail compatível com dispositivos móveis, as imagens e outras mídias precisam ser redimensionadas com fluidez para caber em qualquer tamanho de tela. Siga estas dicas:
Use tamanhos de imagem responsivos
Ao adicionar imagens ao seu e-mail, use o dimensionamento de imagem responsivo. Isso significa fornecer vários tamanhos de imagem para que o cliente de e-mail possa escolher o tamanho certo para a tela em que está sendo visualizado.
Por exemplo, em vez de incluir apenas uma imagem grande de 1000 pixels de largura, inclua também:
- Um tamanho médio (cerca de 600px)
- Um tamanho pequeno para colunas estreitas (cerca de 400px)
- Um tamanho minúsculo para telas pequenas de dispositivos móveis (cerca de 200px)
O cliente de email escolherá automaticamente o melhor tamanho para a tela e largura de banda. Para especificar vários tamanhos de imagem em seu e-mail, use o atributo <img srcset>.
Torne a mídia compatível com dispositivos móveis
Para outras mídias, como vídeos ou GIFs, forneça também várias opções de tamanho. Os vídeos devem ter fontes MP4 em diferentes resoluções. GIFs e iframes (como incorporações do YouTube) devem ter restrições de largura que podem ser redimensionadas para caber em qualquer tela.
Lembre-se dessas dicas e suas imagens, vídeos e outras mídias de e-mail serão exibidas lindamente em qualquer dispositivo. Seus assinantes apreciarão um e-mail com ótima aparência e fácil de ler onde quer que o abram.
Dimensione a fonte em ems, não em pixels
Para tornar o design do seu e-mail compatível com dispositivos móveis, você deseja dimensionar a fonte em ems em vez de pixels. Pixels são unidades fixas, portanto, se alguém ampliar o navegador, o texto pode ficar distorcido. Ems, por outro lado, são unidades relativas que são dimensionadas de acordo com as configurações do usuário.
Use uma estrutura de e-mail responsiva
Uma estrutura de e-mail responsiva possui componentes pré-construídos que são redimensionados automaticamente para qualquer largura de tela. Algumas opções populares são MJML, Foundation for Emails e Ink. Essas estruturas usam ems para dimensionamento, então você não precisa se preocupar em fazer a conversão sozinho.
Se não estiver usando uma estrutura, converta pixels em ems
Se quiser controle total sobre seu CSS e preferir não usar uma estrutura, você precisará converter qualquer tamanho de pixel em ems. Veja como:
- Determine o tamanho base da fonte em pixels. Digamos que seja 16px.
- Converta isso para ems. 1em = 16px (seu tamanho base), então 16px = 1em.
- Qualquer tamanho que você queira usar, divida por 16px e multiplique por 1em. Por exemplo, para um título de 24px, 24px/16px = 1,5em.
- Substitua todos os tamanhos de pixel em seu CSS pelos equivalentes em.
Alinhe seu conteúdo de forma responsiva
Para tornar o design do seu e-mail responsivo, você precisa alinhar seu conteúdo para que seja exibido corretamente em qualquer tamanho de tela. Siga esses passos:
Use medições de fluidos
Em vez de usar larguras fixas de pixels para colunas, imagens e contêineres, use porcentagens. Isso permitirá que seu conteúdo seja dimensionado proporcionalmente com base na largura da tela. Por exemplo, em vez de uma imagem com largura=”600px”, use largura=”50%”.
Evite estilos pesados
Mantenha seu e-mail simples limitando o uso de estilos personalizados, que não serão exibidos corretamente em alguns clientes de e-mail. Conte com tabelas HTML básicas, estilos embutidos e o atributo de alinhamento para layout. Centralize os elementos quando necessário.
Seguir essas etapas práticas garantirá que o conteúdo do seu e-mail seja exibido perfeitamente, independentemente do dispositivo que seus leitores usem para abrir a caixa de entrada. Vale a pena o esforço criar uma excelente experiência de design de e-mail responsivo para seus assinantes.
Teste, teste e teste um pouco mais
Verifique como ele é exibido em dispositivos móveis
Todos sabemos que a maioria das pessoas usa seus dispositivos móveis para acessar e-mails. Portanto, para ter certeza de que seu e-mail é compatível com dispositivos móveis, teste-o enviando-os em diferentes celulares. Verifique-os em Androids, iPhones e tablets. Verifique como as imagens, botões e texto são exibidos nos modos retrato e paisagem.
Teste nos principais clientes de e-mail
Nem todos os clientes de email exibem emails da mesma maneira. Faça testes no Gmail, Outlook, Yahoo Mail e quaisquer outros serviços de e-mail importantes que seus assinantes costumam usar. Procure quaisquer problemas com a forma como as imagens, links incorporados, botões ou outros elementos interativos são exibidos. Faça edições em seu código para corrigir problemas de exibição e garantir consistência entre os clientes.
Verifique como o conteúdo substituto aparece
Para assinantes com imagens desativadas em seus clientes de e-mail, seu conteúdo substituto aparecerá no lugar das imagens. Verifique novamente se todos os textos alternativos, legendas e descrições de imagens fazem sentido por si próprios e fornecem contexto para o conteúdo do seu e-mail. O conteúdo substituto ainda deve resultar em uma boa experiência do leitor, mesmo sem as imagens.
Revisão sobre um serviço de renderização de e-mail
Use um serviço gratuito de teste de renderização de e-mail como Litmus, Email on Acid ou Mosaico para ver como o design do seu e-mail é renderizado em uma ampla variedade de clientes e dispositivos de e-mail ao mesmo tempo. Eles fornecem relatórios destacando quaisquer problemas a serem resolvidos para melhorar a capacidade de resposta do seu e-mail. Faça alterações em seu código e envie novamente os e-mails de teste até que os relatórios voltem limpos.
Verifique links e elementos interativos
Links incorporados, botões e quaisquer outros componentes interativos em seu e-mail precisam funcionar corretamente em todas as plataformas. Verifique novamente se os links vão para o destino pretendido e se todos os botões ou formulários funcionam conforme o esperado. Teste-os várias vezes para garantir que não haja links quebrados ou elementos que não funcionam antes de lançar sua campanha.
Testes e ajustes constantes são necessários para aperfeiçoar o design responsivo do seu e-mail. Mas fazer um esforço inicial resultará em um e-mail com amplo alcance e alto envolvimento em todos os dispositivos e clientes de e-mail de seus assinantes.
Solução de problemas comuns de e-mail responsivo
Conteúdo transbordando no celular
- Use layouts de coluna única. Múltiplas colunas raramente funcionam bem no e-mail.
- Mantenha os parágrafos e seções curtos e concisos. Longos blocos de texto são difíceis de ler em telas pequenas.
- Use marcadores e listas numeradas quando possível. Eles ocupam menos espaço que os parágrafos.
- Oculte conteúdo secundário em telas pequenas. Você pode usar consultas de mídia para mostrar/ocultar conteúdo com base na largura da tela.
Problemas de largura de e-mail
Alguns clientes de e-mail mais antigos têm problemas com larguras de e-mail responsivas. Para corrigir isso:
- Defina uma largura máxima em seu contêiner de e-mail. Recomendamos 600px para a maioria dos e-mails.
- Adicione !important após as declarações de largura para substituir algum CSS do cliente de e-mail. Por exemplo:
- Adicione o código substituto para o Outlook 2007-2013. Essas versões mais antigas precisam de um estilo separado:
Seguir essas dicas de solução de problemas resolverá os problemas mais comuns de e-mail responsivo. Deixe-me saber se você tem alguma dúvida!
Conclusão
Estas são algumas maneiras simples de garantir que seus e-mails respondam. Lembre-se de que mais de 50% dos e-mails são abertos hoje em dispositivos móveis, portanto, é essencial otimizar para telas menores. Revise todos os seus modelos de e-mail e faça as alterações necessárias no tamanho da fonte, bem como no tamanho e espaçamento da imagem. Seus destinatários apreciarão receber um e-mail que possam ler e interagir, independentemente dos dispositivos que estejam usando.