Muita gente abre emails no celular. Falamos que a web mobile tem crescido, mas abrir emails fora do Desktop já é uma tendência ainda maior. Há pesquisas que apontam mais de 20% de taxa de abertura de emails em mobile. E é bom estar preparado, se você manda emails para seus usuários – newsletters, informativos, emails de confirmação, notificações. O papa da usabilidade, Jacok Nielsen, também apoia o design responsivo como solução para emails.

Recentemente, trabalhei na reestruturação da newsletter da Caelum e um dos focos foi a criação de um email responsivo. Reparamos que a taxa de visitantes mobile no site da Caelum vindas da newsletter é o dobro dos visitantes normais. E nossa newsletter não era responsiva ainda.

Conheça a nova newsletter responsiva da Caelum (redimensione o navegador pra vê-la em ação).

Trabalhei também em uma newsletter para o evento QCon 2012 e publiquei um post especificamente sobre ela, incluindo um projeto no Github com o código fonte.

One email

Falamos muito que a web é única e de web design responsivo. Mas, se você quiser muito, pode fazer vários sites diferentes – um mobile, um Desktop, um pra tablets etc. Na web, é sua escolha abraçar ou não a ideia de web única.

Quando falamos em email, não há escolha. Só existe um email, entregue para o usuário e lido em todo tipo de dispositivo. E você não sabe se será no Desktop ou em mobile. E você não pode redirecioná-lo para um lugar específico. Um email, zilhões de dispositivos.

Mobile first

Esse é a dica que se dá normalmente para sites responsivos. Mas pensar em mobile primeiro, vai ajudar muito o desenvolvimento do seu email responsivo.

Na web, podemos escolher entre mobile first ou desktop first. Prefiro o primeiro, mas sei que às vezes é bom ter a segunda opção. E, com as media queries, sempre conseguimos ajustar o layout para todo tipo de dispositivo. Bem, isso me leva ao próximo ponto:

Entenda as diferenças

Esqueça tudo que você sabe sobre web design responsivo, ou quase tudo. Media queries? Esqueça. Viewport? Não. Grids flexíveis? Só se for com tabelas, esqueça tableless.

E não estou falando isso por causa do mané que ainda usa Lotus Notes pra ver emails. Um Gmail aberto num Chrome de última geração ainda não suporta media queries. Isso sem falar no suporte básico de HTML e CSS1!

Se você xinga quando tem que suportar o IE6, é bom tomar uns calmantes antes de entrar no mundo dos emails HTML. Suportar IE6 é fichinha perto de suportar o Outlook. E estou comparando um browser de 11 anos de idade à última versão do Outlook – o Outlook 2010 não suporta a propriedade height no CSS, entre milhares de outras coisas.

Tá achando que tudo melhora com os webmails modernos? O Hotmail não te deixa usar background-image do CSS. Yahoo e Gmail arrancam fora todas as suas propriedades de position, top, left. O Gmail não te deixa usar nem display!

As limitações são tão grandes que muita gente simplesmente desiste. E mandam aquelas newsletters com uma imagem só, grandona. Mais fácil de desenhar, de controlar e não tem bugs. Mas não é acessível, não é responsiva, é menos usável e muita gente não clica pra ver as imagens.

Faça HTML e CSS porcos

Esqueça um HTML semântico. Esqueça usar float (não funciona no Outlook). Esqueça position (não funciona no Outlook, Gmail, Yahoo, Android). Até margin e padding têm seus truques.

Escreva um HTML cheio de tabelas nojentas. Muitas delas, todas não semânticas, só pra design. Use height e width no HTML, direto na tabela. Abuse dos tr e td o quanto quiser.

E, graças ao Gmail, você não pode nem usar <style> ou <link> pra separar seu CSS. O Gmail arranca tudo fora, só suporta algumas poucas propriedades inline lambuzando seu HTML com style=.

Uma opção, recomendadíssima, é criar seu CSS separado higienicamente e usar o premailer, uma ferramenta sagaz que consegue, entre outras coisas, fazer o inline do seu CSS automaticamente. E, claro, isso significa que não dá pra ir além do básico nos seletores; pseudo-classes jamais, incluindo a básica hover.

Pra saber o que você pode ou não usar no CSS, a referência absoluta é essa tabela completíssima do pessoal da CampaignMonitor.

Email responsivo

Você quer um email responsivo, certo? Adaptar à largura do dispositivo, desde um celular de 240px até um Desktop gigante. Parece um cenário impossível dada a falta de suporte a media queries, mas não é.

Temos que focar no básico de responsividade, e isso significa trabalhar com porcentagens, ems e layouts fluídos. Sua tabela principal – sim, tabela, esqueça div – não pode ter largura fixa em 600px como muita gente recomenda para emails. Coloque 100% de largura. E use porcentagens para todo o resto do posicionamento e tamanhos.

Lembre que você não tem como ajustar o layout para diferentes breakpoints como fazemos com media queries. Então se atenha ao básico. Em nome da sua sanidade, faça um layout de uma coluna só, mais fácil de adaptar em pequenas e grandes resoluções. Até dá pra arriscar uns truques de duas colunas fazendo uma escorregar pra baixo da outra usando tamanhos fixos, mas teste bem antes de ir por esse caminho.

Veja a nova newsletter da Caelum responsiva abrindo em diversas resoluções sem truques de media queries:

Repare como, comparado a um site, a resposividade é menos… glamurosa. Mas completamente funcional.

Use imagens pequenas

Imagens grandes são grandes limitadoras de um email mobile responsivo. Não adiantar fazer um layout em porcentagens e colocar uma imagem de 500px dentro.

Você pode fazer imagens flexíveis com porcentagens. Mas, sem media queries, você não vai conseguir entregar a imagem no tamanho certo pra cada dispositivo.

Por isso, recomendo que você use apenas imagens pequenas. No máximo, 240px, largura inicial dos celulares que queremos suportar. E faça seu design em torno dessa restrição. A mesma imagem vai servir o usuário mobile e o Desktop. Reveja a newsletter da Caelum e observe como as imagens não são limitantes para o design responsivo.

E, claro, isso não quer dizer apenas fotinhos pequenas como no nosso layout. Seja criativo. Se quiser um banner de 500px na sua newsletter, quebre em duas imagens menores lado a lado no Desktop e uma em cima da outra no mobile.

Faça funcionar com imagens desabilitadas

A maior parte dos clientes de email e webmails, por padrão, bloqueia todas as imagens nos emails para preservar a privacidade do usuário. O usuário precisa clicar explicitamente pra ver as imagens, o que é um passo a mais.

Isso significa que muitos usuários verão seu email com imagens desabilitadas, e é bom suportar esse cenário. Faça um design não dependente das imagens para conteúdo. Use imagens apenas decorativamente. Forneça alt= em todas as imagens de conteúdo e até estilize o texto alternativo.

Veja a newsletter da Caelum com as imagens desabilitadas.

PS. Tem quem me chame de exceção, mas eu, como usuário, não clico em “ver imagens” jamais, a não ser que eu confie demais em quem mandou. E simplesmente jogo fora emails que não consiga ler sem imagens.

Use Progressive Enhancement

O artigo não é todo sobre limitações e hacks. Embora os clientes de email mais usados no mundo sejam o Outlook e o Gmail – os dois com mais limitações técnicas – há vários bons programas de email.

O Mail no iOS, por exemplo, suporta media queries e outros truques de CSS3. E você pode usar :hover em todo lugar, exceto no Gmail e no Outlook. Até bordas redondas e sombras funcionam em algumas combinações de navegadores e webmails.

Use recursos avançados de CSS para incrementar o design. Mas tenha o pensamento do progressive enhancement: tenha uma base sólida no HTML e CSS básicos e vá acrescentando funcionalidades para clientes mais avançados.

Teste, teste, teste

Os bugs e limitações dos clientes de email são diversos e surpreendentes. Teste extensivamente seu email. Achava que testar sites Web em meia dúzia de navegadores era trabalhoso? Bem vindo ao mundo dos emails!

Teste em clientes de email Desktop como Outlook, Windows Mail, Apple Mail, Thunderbird. Teste em dispositivos móveis como iOS, Android (tanto Gmail quanto o programa de Email), Blackberry, Nokia. Teste nos webmails pelo menos do Gmail, Yahoo e Hotmail, e abra em vários navegadores diferentes. Aqui no Brasil, é bom também ter contas no UOL, Terra e iG.

Se não quiser perder a cabeça, use algum serviço de testes de emails como o excelente Litmus – que, aliás, vem incluído em todos os planos do MailChimp.

De volta às origens

Óbvio, mas não custa lembrar: O email mais acessível, portável, usável, prático e direto é o… texto puro. Funciona em qualquer cliente de email, é responsivo e seu usuário está acostumado.

Aliás, lembre disso: usuários estão acostumados a emails em texto puro. Você não pode fazer um site todo em txt em pleno 2012 sem parecer louco, mas, no email, é diferente. Um email texto puro passa a ideia de objetividade.

Recomendo mensagens texto para emails de confirmação, notificações e alertas. Até para certas newsletters ele fica bom. Ou você pode mandar um email em HTML mas fortemente baseado em texto, quase sem formatação visual – só uns estilos nos títulos e cores. Mega acessível, compatível e responsivo.

Dica Bônus: Faça sua landing page responsiva

Não adianta ter uma super newsletter responsiva e, quando o usuário clica no celular, cai no seu velho site Desktop.

Email é o ponto de partida para uma experiência online com seu usuário. Faça seu site também mobile/responsivo e ofereça uma experiência completa e satisfatória pra quem não está no Desktop.

Dica bônus 2: HTML email boilerplate

O HTMLemailboilerplate.com tem muitas dicas práticas de HTML e CSS pra se criar emails ricos, inclusive com dicas de mobile. Vale bastante a pena acompanhar.