Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Criando E-Mails HTML Responsivos

by
Length:LongLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse tutorial, mostrarei a você como criar simples e-mails HTML responsivos, que funcionarão em todos clientes de email, incluindo todos os novos clientes de email e apps de smartphones. Ele usa o mínimo de media queries e uma abordagem de largura fluida para garantir o máximo de compatibilidade.

Media Queries: Apenas a Metade da Solução

Houve um tempo que as media queries eram mais que suficiente para fazer com que e-mails responsivos funcionassem em aplicativos do iOS e Android, uma vez que ambos os sistemas operacionais oferecem suporte a media queries.

Desde então, houve uma proliferação de aplicativos de e-mail, criados tanto para a plataforma iOS quanto para Android, com variados níveis de suporte a métodos de desenvolvimento de e-mails responsivos.

O mais notável é a última atualização do app do Gmail para Android, a qual é duas vezes mais popular que o app nativo de e-mails entre os usuários do Android (correspondendo a 11% do total de abertura de e-mails). Ele nunca deu suporte a media queries e, embora ainda não suporte, agora ele é capaz de dimensionar os seus e-mails, diminuindo o tamanho das tabelas mais externas para caber na largura da área visível da tela. Isso é difícil de lidar e controlar, e, quando seu e-mail depende de media queries para apresentar-se corretamente em dispositivos móveis, isso gera alguns resultados bem indesejáveis.

Porque Fluido é o Novo Preto

A boa notícia é que você pode projetar e construir um e-mail que pareça excelente em todos aplicativos de e-mail, incluindo aqueles que não dão suporte a media queries. Você pode alcançar isso, lançando mão dos layouts fluidos.

Há, porém, alguns ajutes de design que é preciso que você realize. Aqueles layouts com colunas iguais que se empilham em cima do outro em um única coluna, não funcionam muito bem ao usar esse método. Se você conseguir sobreviver sem eles, há vários designs bastante funcionais que servem extremamente bem.

Eis o que criaremos hoje:

Final-Product-Both

Começando

Certo, comecemos com nossa tela em branco.

O que acabamos de criar foi a nossa página básica com seu elementos header, doctype e a tabela receptáculo com uma cor de fundo aplicada (tanto na tag body quanto na table receptáculo, uma vez que a estilização da tag body não é bem suportada). Para mais informação dessa preparação básica, veja Build an HTML Email Template from Scratch.

Também adicionei a tabela que terá o nosso conteúdo, logo ao centro, com uma classe content.

Preste Atenção

Nota: Você perceberá que, nesse tutorial, colocarei o CSS no elemento head do seu documento. Geralmente, coloco os elementos que reutilizarei lá e uso estilos em linha quando serão usados uma única vez.

Importante: Sempre que colocar suas regras CSS no head de seu documento, você deve usar alguma ferramenta para fazê-las virar estilo em linha, ao fim do processo. Se você usar serviços como MailChimp ou o Campaign Monitor, eles, automaticamente, oferecerão essa funcionalidade quando for importar seus designs. Você tem de fazer isso porque, alguns clientes, como o Gmail, ignoram ou removem o conteúdo da tag <style>. Você também pode usar alguma ferramenta, como a Premailer para tornar todo seu CSS em linha. Se você usar o Premailer ou alguma ferramenta parecida, lembre-se de remover suas media queries antes do processamento (já que queremos que elas permaneçam intactas), e, então, insira-as, novamente, após o processamento, ao final das regras. O MailChimp e Campaign Monitor já levam isso em consideração, na hora de importar seus layouts.

Escondendo Estilos Mobile em Relação ao Yahoo!

Você peceberá que a tag body tem um atributo extra. O Yahoo! Mail tem a mania de interpretar suas media queries como regras, então, para prevenir esse comportamento, você precisa usar seletores de atributo. Acredito que a maneira mais fácil de fazer isso (como sugerido por Email on Acid), é, simplesmente, adicionar um atributo arbitrário à tag body. Eu aplico a sugestão deles, usando o atributo 'yahoo', mas, na verdade, poderia ser qualquer coisa que você quisesse:

Você pode, assim, mirar classes específicas, usando o seletor de atributo na tag body em seu CSS.

Dois Truques para Dominar o Método do Layout Fluido

Como você pode ver, nossa tabela content foi criada para possuir largura de 100%, tornando-a fluida, ocupando a largura total das telas de smartphones e tablets. Também atribuiremos uma largura máxima de 600px para evitar que o e-mail tome todo o espaço da tela em dispositivos maiores.

Há dois pontos ligeriamente complicados que precisamos ajustar, para garantir que tudo apareça como planejado em todos os clientes de e-mail. Esses dois ajustes são graças ao excelente tutorial de Tina Ye sobre esse método, que está disponível no Blog FogCreek.

1. Superando a Falta de Suporte a Max-Width

Infelizmente, a propriedade max-width não é suportada por todos os clientes de e-mail. Assim, para fazer com que nossos e-mails apresentem-se apropriadamente nos aplicativos Outlook e nos Lotus Notes 8 & 8.5, precisamos envolver cada tabela em um código condicional que cria uma tabela com uma largura fixa, para sustentar tudo dentro. Esses comentários miram o IE (que é o motor de renderização usado pelo Lotus Notes) e o Microsoft Outlook.

Nós envolveremos nossa tabela em um código condicional:

2. Um Ajuste para o Apple Mail

Estranhamente, o Apple Mail (normalmente, um cliente de email bem progressivo) também não suporta a propriedade max-width. Mas, ele suporta media queires, então, podemos adicionar uma que diga a ele para fixar a largura de nossa tabela content, desde que a área de visualização (viewport) seja capaz de mostrar os 600px por inteiro.

Criando o cabeçalho

Agora, adicionaremos a primeira linha da nossa tabela — o cabeçalho. Adicione o estilo a seguir à linha que já criamos:

E, em seu CSS, adicione espaçamento interno ao header:

Adicionando a Primeira Linha Responsiva

Agora, criaremos nossa primeira linha responsiva. Nós fazemos isso, criando duas tabelas que "flutuam" uma próxima à outra, usando a propriedade align.

Coluna Esquerda

Substitua nossa pequena saudação "Hello!" pelo que segue:

Nós criamos nossa tabela com 70px de largura e também adicionamos espaçamento interno para servir de vão entre as duas colunas. O espaçamento interno da parte inferior irá adicionar vão que ajudará a fazer o layout respirar quando as duas colunas empilharem em dispositivos módeis.

Coluna Direita

Nós criaremos a coluna direita, novamente, alinhando a tabela à esquerda. Essa tabela terá 445px de largura, nos dando 25px para usar do lado direito. Isso é muito importante, porque o Outlook irá, automaticamente, empilhar suas tabelas, caso não tenha 25px sobrando em alguma linha.

Responsive-AlignedTables

Você permitindo ter os 25px de sobra na largura, suas tabelas se comportarão como esperado.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Dê 25px de sobra para previnir que o Outlook empilhe suas tabelas

Na tabela maior à direita, nós usaremos a mesma abordagem que usamos na nossa tabela receptáculo, que envole a criação de uma classe e a adição de comentários condicionais. Nós queremos que essa tabela tenha 100% de largura em dispositivos móveis, quando ela irá para baixo da tabela da esquerda.

Aqui você pode ver que eu criei uma classe chamada col425 para essa tabela, nossa coluna de 425px de largura. Envolvi essa tabela em um código condicional que rodeará nossa tabela de 425px de largura. Nós, então, adicionamos nossa classe à Media Query que criamos para o Apple Mail também.

Agora, dentro das células de nossa tabela, nós adicionaremos o cebeçalho estilizado.

Adicionei algumas classes a cada uma das células para estilização, assim como alguns estilos que usarei para alguns textos mais tarde:

Nosso cabeçalho está completo, e você pode ver, abaixo, como as duas colunas empilharão em dispositivos móveis. (Para pré-visualizar enquanto você trabalha, terá de comentar, temporariamente, as media queries com min-device-width, porque elas forçam uma largura fixa no desktop).

01-header

Criando A Linha Com Uma Única Coluna

Para criar uma linha com uma única coluna, nós, simplesmente, adicionaremos uma nova linha à nossa tabela .content. Nós adicionaremos uma classe innerpadding a essas linhas, com alguns valores de espaçamento interno reutilizáveis. Nós também adicionaremos uma classe chamada borderbottom para aplicar uma borda a cada linha.

Nosso CSS para essa seção:

Criando o Artigo de Coluna Dupla

Agora, criaremos uma linha responsiva, tal qual nosso cabeçalho, mas com dimensões, ligeiramente, diferentes, para que possamos ter uma imagem um pouco maior.

Adicionamos um botão com uma classe buttonwrapper. Ele contém uma célula com espaçamento interno e uma cor de fundo, e, então, um link textual dentro. Prefiro usar esse método, porque ele permite que você tenha botões com larguras fluidas, o que é bastante interessante ao criar modelos reutilizáveis, onde a largura de cada botão será diferente a cada vez que ele for usado. Se você fixar a largura dos seus botões, talvez você queira usar o Gerador de Botões à prova de Balas do Campaign Monitor.

Nosso estilo para o botão:

Tanto quanto atribuir a largura para nossa nova classe col380, nós adicionaremos nosso tamanho à nossa lista de estilo para lidar com o Apple Mail. Agora, está parecido com isso:

Email-TwoCol

Criando Uma Imagem de Uma Só Coluna

Essa é uma linha bem simples; nós faremos com que a nossa imagem tenha largura de 100% da largura do email, além de garantir que a altura seja atribuida, automaticamente, usando o CSS.

Em nosso CSS:

Criando a Linha Final de Texto Simples

Finalmente, adicionaremos uma linha de texto sem borda na parte de baixo:

Criando o Rodapé

Em nosso rodapé, adicionaremos uma linha com uma tabela dentro dela. Uma das linhas dela conterá outra tabela onde ficarão nossos ícones de redes sociais.

Adicionaremos os estilos requeridos pelo nosso rodapé ao CSS:

Otimizando os Botões para Dispositivos Móveis

Nos dispositivos móveis, é preferível que o botão inteiro seja um link, não apenas o texto, porque é muito difícil apertar um pequeno texto com seu dedo. Por ser algo que não funciona em todos os clientes desktop (espaçamento interno não é totalmente suportado em tags <a>), será algo que adicionaremos à versão dos dispositivos módeis através das media queries.

Temos de remover a cor de fundo atual da <td>, e, então, aplicá-la à tag <a>, além de bastante espaçamento interno.

Usarei tanto max-width como max-device-width nessa, para tentar evitar um bug no Outlook.com rodando IE9.

Agora, quando você apertar em qualquer lugar de um botão colorido em um dispositivo móvel, será um link!

Mais Aprimoramentos com Media Queries

Se você quisesse, você poderia começar a realizar aprimoramentos ao seu layout, adicionando classes aos elementos que você quisesse controlar e, então, criar novas regras dentro da media query que acabamos de criar.

Como exemplo, faremos com que nosso link de cancelamento de inscrição se transforme em um botão, adicionando uma classe ao link:

e adicionando o CSS a seguir à media query:

Email-Footer-MQs

Você poderia mirar, inclusive, as classes .innerpadding, .header e .footer para diminuir a quantidade de espaçamento intero nos clientes que dão suporte a media queries.

Testar e Partir!

Finalmente, como sempre, valide seu HTML e CSS (usando o W3C validator — você só deveria receber um erro por conta do atributo proprietário 'yahoo' na tag body) e testar bastante, em aparelhos de verdade e serviços de pré-visualização, como o Litmus ou Email on Acid.

Divirta-se criando e-mails responsivos que fiquem excelentes em todos os clientes de e-mail!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.