Se você recebe campanhas de marketing por email em seu Smartphone, sabe que, na maioria dos casos a leitura é extremamente difícil, principalmente pelo tamanho das fontes e imagens. Há algum tempo as empresas aprenderam que todos os emails devem ter um tamanho padrão de 550px – 600px para que qualquer software ou webmail possa visualizar o conteúdo sem problemas de rolagem lateral. Entretanto, no ambiente mobile, um email de 600px é redimensionado para 250px – 350px, tornando a peça ilegível.

O CSS

Quando falamos de CSS e email marketing o papo é sempre o mesmo: Evite CSS. E realmente! Sempre que houver a oportunidade de formatar seu layout com apenas HTML, faça isso. A leitura do CSS varia de cliente para cliente de email, sendo que o Outlook irá mostrar sua peça de um jeito, o Yahoo! Mail irá mostrar de outra maneira, e o Gmail de uma maneira totalmente diferente. Em contrapartida, a renderização de CSS no iPhone Mail e outros Smartphones mais recentes é excelente.
Para identificar o tamanho da tela ou dispositivo usado para a leitura do email, é preciso utilizar os famosos Media Queries, os mesmos que são usados para desenvolver sites responsivos.
Veja um exemplo de CSS:
<style>
.tabela_externa {width:600px;}
@media only screen and (max-device-width:420px) {
.tabela_externa {width:320px;}
}
</style>
O exemplo acima cria uma classe “tabela_externa” e define que o tamanho dela será 600px. Porém, se o leitor utilizado for MENOR que 420px, a “tabela_externa” terá 320px.
O conceito é simples: Desenvolva todo o seu email e então abra um @media no final do CSS para adaptá-lo para mobile.
Fácil?
Nem tanto. Mais uma vez somos forçados a lembrar que emails não são websites, e que alguma coisa sempre dá errado quando tudo está “fácil demais”.

O curioso caso do Yahoo! Mail

Yahoo! Mail é um problema quando se trata de alguns atributos definidos no código de seu email marketing. Ele não entende que o @media query é diferente do restante do CSS, por isso ele mostra a peça no browser como se fosse na tela de um smartphone, ou seja, pequenina.
Existem duas formas de corrigir esse bug, o primeiro é através de “atribute selectors” e o segundo é através de CSS3 Exceptions.

Atribute Selectors

Basicamente troca-se a nomenclatura das classes.
De:      .tabela_externa
Para:   table[class=tabela_externa]
Resultado:
<style>
.tabela_externa {width:600px;}
@media only screen and (max-device-width:420px) {
table[class=tabela_externa] {width:320px;}
}
</style>

CSS3 Excepions

Utilizaremos o atributo “:not” do CSS3 para enganar o Yahoo! Mail. Este método é um pouquinho mais complexo, mas também funciona. Algumas ferramentas removem qualquer conteúdo do HTML que esteja entre colchetes  [*] na hora do disparo, por isso que esta é uma alternativa importante.
De:      .tabela_externa
Para:   table:not(#null) .tabela_externa
Resultado:
<style>
.tabela_externa {width:600px;}
@media only screen and (max-device-width:420px) {
table:not(#null) .tabela_externa {width:320px;}
}
</style>
Vale ressaltar que estas dicas funcionam muito bem, se visualizadas no Iphone. Porém, quando o email é visualizado no Android, apresenta alguns problemas de layout.
Por que mobile?
Pesquisas recentes divulgadas pela Return Path (http://br.returnpath.net/index.php/blog/article/return_path_mobile_email_infographic)  mostram que 88% dos usuários de internet em todo o mundo abrem seus emails através de dispositivos móveis e que 30% dos celulares no Brasil são Smartphones. É um número alto e que precisa de atenção. Para que seja possível trabalhar o email marketing direcionado a usuários mobile, analise a abertura de seus emails e veja quantas pessoas utilizam o iPhone ou o Android para abrir suas campanhas.
Por André Armenni – Mailcraft

Sharing is caring!