O QCon, maior evento de arquitetos e desenvolvedores do mundo, está com preço promocional de inscrição só até dia 9 de maio. Pra divulgar, montamos uma newsletter. E aproveitei pra fazer uma newsletter responsiva.
O pessoal do InfoQ já tinha um modelo de newsletter que eles usam. Já seguem várias das boas práticas para emails que coloquei no meu artigo sobre newsletters. Uso de textos, layout simples, HTML com tabelas, pouco CSS, imagens pequenas, layout não dependente de imagens etc. Só não é responsiva, mas tá quase lá.
Na newsletter do evento, deveríamos seguir as mesmas boas práticas já seguindas pela newsletter normal. Aí aproveite e fiz ela ser responsiva. E, na verdade, se você já está com layout simples, poucas imagens e foco no texto, adicionar a responsividade é bem mais fácil.
Veja o resultado final. Redimensione o navegador e veja a responsividade.
Suporte a Desktop e Mobile
Com emails, porém, o mais importante é saber como eles funcionam de verdade, nos programas de emails, webmails e dispositivos móveis reais. Veja:
- Gmail via web no Chrome: é o cenário ideal, tudo funciona.
- iPhone 3GS: ela se adapta à tela menor, sem media queries.
- iPad 2: funcionando perfeito, tamanho máximo.
- Hotmail via web no IE: repare como as bordas redondas e a textura do background somem. Mas a experiência para o usuário é muito boa.
Testando em outros lugares, teremos resultados muito parecidos com os cenários acima. A excessão, claro, é o Outlook, cujas últimas versões usam um motor de renderização pior que o IE6, baseado no Word! Mas desista de combatê-lo. As pessoas usam Outlook e só podemos tentar deixar o email aceitável. Veja:
- Outlook 2010: bordas e fundo somem. Tudo fica alinhado no centro (!?) e aparecem quadrados brancos no topo dos blocos de conteúdo. Mas é tudo legível e a renderização é aceitável.
- Outlook 2003: curioso reparar que o Outlook bem mais velho renderiza melhor que a última versão! Isso porque o tal motor de Word só foi introduzido a partir da versão 2007, antes era baseado no IE.
Dicas de como foi feito e projeto no Github
Principalmente, segui todas as práticas sobre newsletters resposivas do artigo aqui do blog.
Boa parte da responsividade se deve ao layout simples baseado em uma coluna. Basta uma tabela com 100% de largura (com um max-width de 550px) e os elementos vão se ajustar lá dentro sem problemas.
A exceção é onde mostramos as fotos dos participantes em duas colunas. Usei imagens de tamanhos pequenos, sabendo que caberiam 2 imagens lado a lado mesmo na tela pequena do mobile. O nome do palestrante eu fiz num bloco de tamanho fixo com display:inline-block que segue à direita da foto se houver espaço ou escorrega pra linha de baixo se não couber. Responsividade sem media queries!
E o melhor: se quiser ver todos os truques, liberei o código da newsletter num projeto no Github.
Outros truques incluíram a imagem elástica do rodapé, uso do premailer e htmlcompressor pra gerar o HTML final e até uso de conditional comments pra Outlook. (sim, isso existe!)
Uma prática útil pra ter em mente ao montar newsletters é progressive enhancement. Repare como a base do layout não são as bordas redondas e a textura de fundo. A base é sólida em HTML e CSS básicos e compatíveis, e os recursos de CSS3 vão a mais, pra quem abrir o email num cliente que suporte. Mas não são recursos necessários pro usuário visualizar tudo satisfatoriamente.
O que achou dessa newsletter responsiva na prática? Não deixe de ver o código no projeto e comente aqui!