Não é um mistério, há um desejo real por parte dos desenvolvedores de criar e-mails 'responsivos'. Agora temos todas as tecnologias que tornam o conteúdo da web adaptável, e é frustrante se sentir limitado em clientes de e-mail, que evoluem mais lentamente do que os navegadores da web. Mas há soluções. Assim…

Como realizar o impossível sem se perder no selva do clientes de e-mail.

[tipo de separador=”” tamanho=”” ícone=”estrela”]

o mercado / Análise

[row] [one_third] [counter count=”72″ title=”pessoas de 100″] [/one_third] [two_third] Nos últimos anos, com a explosão do mercado de smartphones e tablets, os internautas estão conectados permanentemente, em na rua, no trabalho ou no transporte público. Tendo cada vez menos tempo livre, este último é um horário que eles gostam de otimizar lidando com seus e-mails. De acordo com a SNCD, o Sindicato Nacional da Comunicação Direta, em 2013, de todos os usuários, 72% leem seus e-mails em seus smartphones. [/two_third] [/row] [separator type=”invisible” size=”big” icon=”star”] Esta é a principal razão pela qual os emails mosto ser acessível em todas as mídias e ser adequado para navegação com os dedos.
Os usuários estão cada vez mais exigentes e, na minha opinião, eles têm cada vez mais tempo na vida, e recebem muitas solicitações de todos os tipos, então eles 'filtram'. Todos sabemos que a taxa de abertura de e-mails é muito baixa: 23% em BtoB e 29% BtoC ( análise sobre e-mail marketing publicada em 2013 pela Mail Metrics).
Os e-mails geralmente são excluídos antes mesmo de serem lidos (Eu me declaro culpado!). Torna-se muito difícil interessar os usuários o suficiente para abrir o precioso e-mail.
Mas se por acaso você passou com sucesso nesta etapa graças a um título cativante, e uma vez que o e-mail é aberto, o usuário se depara com algo ilegível em seu celular, está perdido. . O usuário não terá vontade de ler este e-mail. Ele o remove.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

código de Le / Primeiras soluções e problemas

2 opções muito simples e bastante óbvias vêm à mente rapidamente:

– Um e-mail clássico super simples otimizado para celular com blocos um abaixo do outro, sem colonização, botões grandes e um design simples. .. o código ficaria assim:

Mas se esse tipo de e-mail passar muito bem em laptops, parecerá inadequado para telas maiores (não queremos necessariamente ter um botão enorme quando estamos no desktop, podemos querer um design um pouco mais elaborado, e linhas pode ficar muito longo e impossível de ler).
– Um e-mail intermediário, ainda baseado no uso de dimensões em porcentagens. Mesmo princípio do exemplo anterior, mas aqui teremos um design um pouco mais elaborado, será possível o uso de colunas por exemplo:

Esta parece uma solução simples e ideal, exceto que com esse tipo de método os blocos de texto ainda, como no primeiro exemplo, sofrerão enormes mudanças em telas muito grandes ou nas telas estreitas dos smartphones. Linhas muito longas ou muito curtas rapidamente se tornam ilegíveis, e a aparência geral sofrerá. A mesma coisa para as imagens, que passarão de muito grandes para muito pequenas. Esse tipo de e-mail funcionará melhor em tablets de tamanho médio do que em desktops e laptops.
As duas soluções acima são simples e rápidas de configurar, mas a experiência do usuário está longe de ser a ideal. Sempre haverá uma parte dos usuários que será prejudicada. [tipo de separador=”” tamanho=”” ícone=”estrela”]

Vamos nos concentrar um pouco mais no código / Truques

Fiz vários testes, li muitos artigos e tópicos do fórum e encontrei uma solução, que faz o e-mail funcionar em qualquer lugar. Teríamos que fazer uma espécie de compromisso entre as duas opções acima, construindo um email ao mesmo tempo fluido e adaptável, baseado no uso de @mediaqueries e alguns pequenos truques, com um design sob medida para celulares, uma versão mais adequada para o desktop e um design fluido responsivo para tablets e desktops. Esta é a melhor solução, mas por enquanto continua sendo um compromisso.
Você deve saber que nem todos os clientes de e-mail podem ler @mediaqueries (Siga este link para uma visão geral), ou causar outros problemas. Se a versão para computador do Gmail mantiver os estilos contidos na tag 'head' (ao contrário da legenda difundida na web), a versão para celular removerá qualquer estilo contido na tag. Idem para Android… então você tem que adicioná-los inline, em cada elemento html. O problema é que é impossível adicionar o @mediaqueries inline. A solução que proponho é construir um email com duas colunas que passariam por uma única coluna para a versão mobile.
O aplicativo Gmail para Android é compatível apenas com CSS embutido, incorporado em html. Sem mediaqueries e sem CSS externo. Você também pode esquecer o CSS na tag head, como eu disse acima.
gmail.com remove várias coisas, começando com tags html5 e atributos como classes e id. Ele só permite CSS inline e um painel muito pequeno de CSS na tag 'head'.
iOS e Mac OS X suportam consultas de mídia e css. Estes são os melhores de todos para e-mails.
O Android, portanto, permite apenas CSS embutido e ignora todo o resto. Então, se pegarmos os exemplos de código que dei anteriormente, em vez de colocar os estilos na tag 'head', vamos adicioná-los inline para que nosso e-mail seja exibido corretamente no Android.

Em seguida, cuidaremos do Gmail. O alvo prioritário serão as telas maiores. Vamos ter que contornar o problema @mediaqueries. O Gmail suporta CSS inline e um pouco de CSS na 'cabeça'. Mas cuidado com os seletores, você terá que ser complicado. Na verdade, não podemos colocar nenhuma classe, e nenhum ID. Somente seletores nativos devem ser usados. Toda a sutileza estará no uso criterioso dos seletores de estrutura: descendentes, adjacentes e filhos, como no exemplo abaixo:

Essa maneira de fazer as coisas raramente é usada, deve ser reconhecida, tendemos a usar classe e ID em vez disso. Se este método é estranho para você, aconselho a ler este post muito bom: Seletores adjacentes.
Graças a isso, teremos estilo na tag head que será lida pelo gmail, mas não pelo Android, que lerá estilos inline. Poderemos apontar clientes de e-mail com mais precisão com esse tipo de técnica, sem @mediaqueries.
Para clientes de e-mail modernos, como mail.app no ​​iOS e Mac OS X, você poderá usar @mediaqueries e todos os seletores que desejar. Tenha cuidado, os estilos que escrevemos para o Gmail serão aplicados, então você terá que sobrescrevê-los com um @mediaquery.

Definitivamente não é o melhor método, como eu disse, é um compromisso. Até agora, esse método funciona muito bem, mas usar vários níveis de substituição de estilo forçará você a pensar cuidadosamente sobre a estrutura html.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

Conclusão / Conselho

Podemos nos perguntar se é melhor adaptar o e-mail para que seja legível corretamente nos clientes de e-mail usados ​​pelo nosso público-alvo ou se temos que forçar o exercício para tornar o e-mail legível em todos os lugares. Somos tentados a querer torná-lo legível em todos os lugares, mas atualmente é impossível. Por enquanto, é apenas um “quase”. O certo é que construir um e-mail está se tornando cada vez mais complexo.
Para nos ajudar, existem plataformas que nos permitem testar a renderização do nosso e-mail em diferentes clientes de e-mail, como “Litmus” ou “E-mail on Acid” por exemplo, mas a maioria delas são pagas . É claro, no entanto, que sem essas plataformas, testar a renderização em todos os dispositivos e em todos os clientes de e-mail se torna quase impossível (a menos que você tenha cheio de amigos, mas então realmente cheio de amigos, que usam muitos clientes de e-mail diferentes em muitos dispositivos diferentes…) e, acima de tudo, muito demorados. Até o momento, não encontrei uma plataforma que ofereça o mesmo serviço gratuitamente. Admito que Litmus é muito tentador... mas caro. Alguns profissionais certamente verão isso como um bom investimento que lhes poupará um tempo considerável.
Também anotei "Visualizar meu e-mail", que também é cobrado.
Talvez uma boa ideia seja construir um template responsivo básico, que possamos adaptar conforme necessário, para evitar refazer todo o trabalho com cada e-mail.
Certamente existem muitos desses modelos disponíveis na web. Eu poderia escrever um tópico em um tempo sobre isso.
//Este artigo obviamente está evoluindo.
Emmanuelle GUYOT / Cientista UX

---