Como criar e-mails para uma abordagem mobile first

Publicados: 2015-05-21

Estamos lutando a boa luta, que é a batalha sem fim do fluxo constante de e-mails. Não importa para onde vamos ou qual dispositivo temos conosco, os e-mails podem nos encontrar em qualquer lugar. Provavelmente, você terá mais dez e-mails depois de ler este artigo. E, como designers, estamos em ambos os lados da caixa de entrada: recebemos e-mails constantemente, mas também somos responsáveis ​​por projetar e criar os designs de e-mail reais.

Não importa quem você está direcionando com seu e-mail, o objetivo é fornecer a melhor experiência do usuário ao enviar e-mails para assinantes, clientes e prospects. E como a maioria dos e-mails é aberta em dispositivos móveis, precisamos projetar e-mails para acomodar qualquer dispositivo em que eles possam ser abertos.

Estamos tão acostumados com web design responsivo e aplicativos móveis de primeira linha, que muitas vezes damos como certo que podemos simplesmente pegar qualquer dispositivo e criar uma experiência personalizada. Com o e-mail, as coisas não são tão simples. Em termos de tecnologia, está anos luz atrás do web design moderno. Precisamos projetar com atributos HTML, layouts baseados em tabelas e estilos embutidos, que não garantem o mesmo comportamento em cada cliente de e-mail.

Projetando e-mail para todos os dispositivos, quais são minhas opções?

Antes de tirar o pó de sua coleção de CD-ROM, lembre-se de que há esperança para criar um e-mail “responsivo” bem-sucedido, mesmo com as limitações. Criar um email verdadeiramente responsivo é certamente uma opção, mas é importante considerar todas essas três abordagens ao criar um design mobile first bem-sucedido:

  • Design escalável
  • Projeto fluido
  • Design responsivo

Para escolher a abordagem que melhor atende às suas necessidades, é importante entender as diferenças e limitações entre essas três formas de design. Tomar uma decisão requer conhecimento sobre seu público e quais dispositivos e clientes de e-mail eles usam. Como nem todos os clientes de e-mail oferecem o mesmo suporte a CSS, isso ajudará a determinar qual abordagem atenderá melhor seus usuários.

Design escalável

design escalável

Os layouts de e-mail escalonáveis ​​são versáteis porque são legíveis e clicáveis ​​em todos os tamanhos de tela. Essa é uma ótima opção se seu público tende a abrir seus e-mails em vários dispositivos: celular, tablet e desktop.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

Essa opção geralmente é a mais fácil de implementar, pois não usa consultas de mídia e não há larguras de tabela que precisem ser ajustadas. Uma vantagem é que não há uma grande curva de aprendizado ao projetar esse tipo de email. Na maioria dos casos, o celular é o dispositivo mais comum para ler e-mails, e isso facilita a garantia de que as considerações móveis sejam feitas primeiro. Botões maiores, texto fácil de ler e chamadas para ação claras dão prioridade ao celular para acomodar as necessidades de um tamanho de tela menor.

O design de e-mail escalável pode ser limitado pelo fato de ter que ser uma coluna única para funcionar bem em todos os dispositivos. O motivo é que, se o design tivesse várias colunas, elas ficariam muito pequenas em dispositivos móveis, afetando a legibilidade. No entanto, se você rolar pela caixa de entrada, verá muitos layouts de coluna única porque são muito comuns.

O conteúdo é fundamental para qualquer e-mail, portanto, o tamanho do texto deve estar em um tamanho que funcione bem para dispositivos móveis e também em telas maiores. Com a maioria dos clientes de e-mail, o e-mail inteiro preencherá a tela para que o usuário não precise rolar verticalmente. No entanto, ainda é recomendável que as principais informações e o call to action sejam colocados no canto superior esquerdo do e-mail, caso o e-mail não preencha a tela conforme o esperado.

Projeto fluido

fluido-e-mail-design

Você pode estar familiarizado com layouts “líquidos” de web design. Os componentes de design têm larguras percentuais e se ajustam à resolução da tela do usuário, mantendo essas mesmas larguras. O design de e-mail fluido utiliza essa mesma ideia.

Essa opção de e-mail preenche a lacuna entre uma opção escalável e uma opção verdadeiramente responsável. Mais design inicial deve ser feito do que com a opção escalável. A razão para isso é que o dimensionamento baseado em porcentagem faz com que a largura das tabelas e imagens se adapte a qualquer tamanho de tela em que o email é visualizado. As tabelas não alteram o layout em tamanhos diferentes, mas o conteúdo flui e preenche o espaço. Essa é uma ótima opção para e-mails com muito texto, pois há menos controle sobre como a cópia e as imagens se relacionam. Ainda é uma boa ideia manter o layout simples, de preferência um layout de tabela única para manter a legibilidade do e-mail como primeira prioridade.

Lembra como dissemos que isso preenche a lacuna entre fixo e responsivo? A razão é que o tamanho precisa ser restrito para telas maiores. Se o e-mail ficar muito largo, as linhas de texto se tornarão visualmente longas demais e queremos garantir que nossos leitores possam ler facilmente nosso e-mail. Envolver o conteúdo do seu e-mail em uma tabela de contêiner de largura fixa ajudará na aparência em tamanhos de tela maiores. Em seguida, uma consulta de mídia útil segmentará tamanhos de tela menores.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

Exemplo de uma consulta de mídia para dispositivos móveis:

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

E-mail responsivo

design responsivo

Vamos pegar o que sabemos de e-mails escaláveis ​​e fluidos e adicionar mais algumas regras. Responsive permite que você tenha mais controle sobre o que é apresentado em diferentes pontos de interrupção com consultas de mídia CSS. Com esta opção, os layouts podem ser alterados e outros elementos também podem ser personalizados com estilos condicionais para pontos de interrupção específicos.

Aqui está um exemplo de uma consulta de mídia para um layout responsivo:

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

Como as outras opções, você não está limitado a uma coluna ou designs simples. Os e-mails podem ser mais complexos, com menos restrição de layout e quantidade de imagens. Por exemplo, os designs de e-mail podem ter várias colunas em dispositivos maiores, mas uma única coluna em dispositivos móveis. Tamanho do texto, imagens e quase todo o resto podem ser otimizados para a melhor experiência.

Antes de criar designs complexos com várias consultas de mídia, é importante falar sobre algumas das compensações. As consultas de mídia não funcionam em todos os clientes de e-mail. Na verdade, o suporte é bastante limitado. De acordo com a lista de suporte de consulta de mídia Litmus, o aplicativo Android Outlook.com, o cliente nativo do Android 4.x e o iOS (iPhone/iPad) atualmente os suportam. Eles podem ser utilizados ao máximo se a maioria de seus espectadores forem usuários de celulares e tablets.

Outras considerações de projeto

Antes de começar a criar o design do seu e-mail, é importante analisar as análises para determinar quais clientes de e-mail e dispositivos de seus usuários. É recomendável verificar isso com frequência e deixar sua abordagem de design evoluir à medida que as coisas mudam. Mesmo com limitações, o e-mail está evoluindo, por isso é importante acompanhar o que é suportado atualmente.

Aqui estão alguns ótimos recursos para leitura adicional:

  • CSS específico para dispositivos móveis
  • Futuro do e-mail
  • E-mails para iPhone e Android

A boa notícia é que uma abordagem mobile first é possível com as limitações atuais dos e-mails. Mesmo que o design não seja a forma mais verdadeira de “responsivo”, com apenas algumas porcentagens especificadas e algumas consultas de mídia, você criará um design de e-mail que certamente impressionará, independentemente do dispositivo. Na maioria dos casos, a maioria dos usuários verifica o e-mail em dispositivos móveis, portanto, adotar uma abordagem mobile first se torna uma base sólida para o design do seu e-mail.