Crie mensagens perfeitas em todos os clientes de email

Sep 11, 2025

Como

Para qualquer campanha de marketing por e-mail para funcionar, o email tem que alcançar a caixa de entrada e se destacar de todos os outros. No entanto, a história não termina lá. Seu email tem que renderizar bem se você quiser que seus assinantes abram seu e-mail, clique no CTA e seja convertido.

A renderização é um problema porque cada cliente de e-mail e dispositivo percebe o código de maneira diferente. Código que funciona bem com um cliente de email pode criar um problema de renderização em outro. Para tornar as coisas ainda mais desafiadoras, mesmo os clientes de e-mail mais usados vêm com peculiaridades e problemas de renderização. Neste artigo, vou dar uma olhada nos desafios e soluções alternativas para cada um dos principais clientes de e-mail.

Panorama

Não seria uma hipérbole para dizer que os desenvolvedores de e-mail estremeciam com o pensamento da perspectiva. A razão óbvia é a numerosos desafios de renderização apresentados por este cliente de e-mail. O que é surpreendente é que qualquer corporação ainda tenha perspectiva como cliente de e-mail padrão e uma pequena proporção de seus assinantes ainda sejam fiéis a ela.

Dê uma olhada em alguns dos desafios e hacks para Outlook:

Desafio: O Outlook não suporta margens em & lt; p & gt; e & lt; a & gt;
Hack: Se você quiser fornecer margens, use o & lt; td & gt; marcação; maiúsculas devem ser usadas fora da tag e inline minúscula

Desafio: Preenchimento só é suportado em determinados atributos HTML (não incluindo & lt; div & gt; ou & lt; p & gt; Tag)
Hack: Layout baseado em tabela é a aposta mais segura para superar esse problema

Desafio: Outlook é o único cliente de e-mail que não suporta gifs
Hack: Como alguns clientes verão apenas o primeiro quadro de sua animação, isso deve incluir todas as informações importantes, executadas apenas para alguns milissegundos, e faça sentido como uma imagem autônoma

Desafio: O Outlook não suporta fontes do Google e implementará os tempos novos romanos como um fallback
Hack: Incorporar o seguinte código ...

 & lt; - [se mso] & gt;
& lt; estilo tipo = "texto / css" & gt;
.fack-text {
Font-família: Arial, Sans-Serif;
}
& lt; / style & gt;
& lt; [endif] - & gt;

Outlook.com.

Uma nova versão do Outlook.com foi introduzida no início de 2016, mas a versão legada ainda não está fora de uso. Aqui estão os desafios e hacks específicos para esse cliente:

Desafio: Uma lacuna desnecessária de 4-5px é adicionada abaixo de imagens
Hack: Definir a propriedade de exibição como "IMG {display: bloco;}" Para remover o preenchimento

Outlook.com introduces unnecessary spacing between your images — Outlook.com introduz espaçamento desnecessário entre suas imagens

Desafio: Não suporta bordas RGB
Hack: Use códigos hexadecimais para definir a cor de fundo HTML

Desafio: Adicionando Miserável no href. Links quebram a tag de âncora e desloca o CSS para outro lugar
Hack: Use o nome de domínio em vez de href #

App Nativo do iPhone

O aplicativo de e-mail do iPhone nativo é o cliente mais utilizado, e suporta todos os elementos interativos que você normalmente encontraria em e-mail: gifs, menus, acordeões, contagem regressivas, controles deslizantes e assim por diante. Além disso, também permite que o comerciante de e-mail use imagens de retina de alta definição para uma incrível experiência do usuário.

O iOS10 se tornou ainda mais cobiçado porque os usuários agora podem ajustar o número de linhas de texto de visualização em e-mails e até mesmo optar pela inscrição da lista. No entanto, apesar desses pontos fortes, o aplicativo nativo do iPhone também tem certas deficiências. Vamos dar uma olhada.

iOS10 users can opt for list-unsubscribe — Os usuários do iOS10 podem optar por lista - cancelar a inscrição

Desafio: Texto minúsculo é redimensionado automaticamente
Hack: O tamanho mínimo da fonte para cabeçalhos deve ser 22px e para o texto do corpo 14px

Desafio: A liberação de novos modelos do iPhone pode causar problemas de renderização
Hack: O layout fluido garante que os e-mails exibem corretamente em todos os dispositivos

Desafio: No iOS9, quando bloco inline. Os elementos de nível estão próximos um do outro no código com um espaço entre as extremidades de dois elementos, leva ao problema de envolvimento
Hack: Simplesmente remova o espaço

Desafio: ios10 não suporta posicionamento fixo
Hack: Nenhuma solução atual alternativa ...

Gmail.

O Gmail é popular porque é tão conveniente usar. No entanto, isso não significa que seja sem seus desafios.

Desafio: Se o seu arquivo HTML exceder 102kb, o Gmail vai clipar
Hack: Evite tags e atributos de estilo desnecessários, e não copie o código do Microsoft Word ou outros editores de texto como é (isso adicionará etiquetas extras ao arquivo HTML)

Desafio: O Gmail removerá CSS do & lt; estilo & gt; bloco se exceder 8142 caracteres ou incluir erros ou aninhados @Declarations.
Hack: Certifique-se de que estilos incorporados são curtos e livres de erros

Desafio: Flutuadores, margens, parágrafos e preenchimento não são suportados
Hack: Use um layout baseado em tabela com & lt; td & gt; Para preenchimento e margens

Desafio: Imagens de fundo não funcionam para IDs não-Gmail configurados no Gmail
Hack: Aplique a cor de fundo como fallback

Desafio: Seletor de atributos não funciona
Hack: Usar .aula seletor em vez disso

Apple Mail.

O Apple Mail é talvez a coisa mais próxima a um cliente de e-mail perfeito que temos. A principal vantagem do correio da Apple é que é muito indulgente quando se trata de codificação de e-mail ruim. Além disso, assim como o aplicativo nativo do iPhone, ele suporta a interatividade em e-mails, eliminando assim a necessidade de visualizar o e-mail no navegador.

Você deve ter em mente duas coisas enquanto codifica e-mails para seus assinantes de email da Apple:

Evite usar fontes de calibri
Hospede seu e-mail e forneça os links para o servidor, pois os links internos não funcionam no Apple Mail

Yahoo! Correspondência

Como novos e melhores clientes de e-mail chegaram, Yahoo! O correio é menos freqüentemente usado nos dias de hoje. Alguns de seus desafios de renderização e os hacks são discutidos abaixo.

Desafio: não suporta o alinhar central Atributo html.
Hack: Use. Align = "Center"

Desafio: largura mínima e Largura máxima de dispositivos não são suportados por consultas de mídia
Hack: Use o atributo de largura e amp; / ou em estilo em vez de min ou largura máxima
Use o largura atributo em vez de. min- ou largura máxima , separadamente ou incorporado no & lt; estilo & gt; marcação

Desafio: Tags flutuantes não funcionam
Hack: Adicionar Align = "top" para a imagem em questão

Nessa nota, chegamos ao final da discussão sobre a maioria dos desafios de renderização típicos para clientes de e-mail. Dê uma olhada aqui Para mais desafios e soluções alternativas. Email Marketing, se feito certo, pode pavimentar novos avenidos para sua estratégia de marketing. Mantenha essas soluções simples em mente e seus assinantes nunca verão um layout de e-mail quebrado em seus e-mails novamente.

Artigos relacionados:

15 Designs de Newsletter Awesome E-mail
10 melhores ferramentas de boletim informativo de e-mail
Mestre Tipografia HTML no email

Crie mensagens perfeitas em todos os clientes de email

Panorama

Outlook.com.

App Nativo do iPhone

Gmail.

Apple Mail.

Yahoo! Correspondência

Como - Artigos mais populares

Google Slides: Como projetar um documento

Crie uma cena com o RendeMan para Maya

Fácil posando técnicas para modelos 3D

Criar um efeito de texto de néon brilhante

Crie um gráfico de cores simples

Entendendo a propriedade de exibição CSS

Pinte uma vida expressiva em acrílicos

O Guia Ultimate para Compositing Images no Photoshop

Categorias