Trabalhando com Emails Responsivos

Postado em: 27 de dezembro de 2013 - Por: Gustavo Corrêa Alves

O número de acesso à internet através de dispositivos móveis se tornou uma realidade faz tempo, e o email é um dos recursos mais acessado pelos usuários. Há pesquisas, como a realizada pela Adobe, que apontam o email em primeiro lugar ganhando até das chamadas telefônicas.

pesquisa-dispositivos

 

É claro que esse crescimento abre uma boa oportunidade para campanhas de marketing e venda de produtos online, no entanto, os números negativos também são alarmantes. Segundo a pesquisa publicada no site Constant Consult, 75% dos usuários estão inclinados a excluir um  email que não lhe causar uma boa experiência de leitura.

Se você já está a par disso, ótimo, que tal oferecer uma melhor experiência para o usuário e quem sabe alavancar suas campanhas? Que tal trabalhar com emails responsivos?

 

A Realidade Cruel

Trabalhar com emails responsivos é bem diferente do que trabalhar desenvolvendo sites. Por incrível que pareça, o desenvolvimento ainda é bem antiquado.

Se você já desenvolveu alguma newsletter antes, saiba que nada mudou, tudo ainda continua sendo a nossa velha “amiga” tabela. :)

Ótimo! Antes que você desanime vamos direto ao ponto. Para criar um email responsivo basta sacar bem de tabelas e saber quais propriedades CSS podemos usar. Alguns clientes de email já aceitam Media Queries, outros como o do Gmail ainda não. E muitos deixam de atender inúmeras propriedades de CSS 1. Sendo assim esqueça grande parte do que você sabe sobre Media Queries, Viewport, Tableless e Grids Flexíveis.

Outro detalhe muito importante é não utilizar folhas de estilo externas e tomar muito cuidado com CSS incorporado, ou seja, esqueça <link rel=”stylesheet” href=”estilo.css”> e muita cautela com <style></style>. Procure usar tudo inline, caso queira você pode atribuir as regras incorporada e depois usar uma ferramenta como o premailer para inserir o estilo inline.

Ok. Sei que são muitas notícias ruins ao mesmo tempo e que talvez esteja curioso para saber como criar seu email.

 

Dicas

Para que seu email seja suportado tanto no desktop quanto em dispositivos, você deverá fazer o uso de tabelas e células com largura em porcentagem. No entanto, é preciso evitar o excesso de colunas, aqui no InfoLink costumamos fazer emails com no máximo três colunas que em determinadas resoluções se transformarão em linhas.

Procure usar o elemento div para envolver seu conteúdo e atribua ao elemento as propriedades de estilo desejada. Nós evitamos utilizar elementos como p e h1, h2, h3 …, pois alguns webmails aplicam uma formatação nesses elementos. Claro que você pode utilizá-los desde que aplique o !important nas suas regras CSS. Aproveitando que tocamos no assunto, procure sempre utilizar o !important.

Ao usar imagens procure usar em dimensões pequenas, nada de imagens muito grandes. Há duas formas de servir imagens, na primeira podemos usar a propriedade display do CSS para exibir e ocultar as imagens de acordo com o dispositivo, porém seria necessário Media Queries o que é um problema e carregar duas imagens uma para versão desktop e outra para dispositivos o que implica em download extra e consumo desnecessário de banda do usuário. Na segunda colocamos a imagem com largura (width) em 100% para assumir a largura do bloco que no qual ela se encontra, essa opção também não é tão boa. Pois dependendo da imagem ela pode perder qualidade ao escalar, mas nesse caso evitamos usar Media Queries e correr o risco de não funcionar em algum dispositivo.

Veja como ficou o nosso email.

 

Calma! Use um Template

Se você já está desesperado, se acalme, pois existem alguns templates para a criação de emails responsivos. Um que gosto bastante é o Antwort, por ser bem simples e funcionar em uma gama de dispositivos e clientes. Mas existem outros como o Zurb que também é ótimo e o HTMLEmailBoilerplate que para ser sincero nunca utilizei.

 

Infinitos Testes

Se você acha que efetuar testes cross broswer é cansativo, bem vindo ao mundo dos e-mails. São dezenas de lugares para se testar, e inúmeros bugs. Um conselho que dou é: De forma alguma negligencie os testes. E se quiser uma ajuda de peso sugiro a ferramenta Litmus que é sem dúvida a melhor do mercado e lhe dá um período trial.

É isso aê galera!

Leia também