Email marketing responsivo: por onde começar

Introdução

Muita gente quer transformar seus emails marketing para que sejam responsivos. Isso é muito positivo, mas o processo pode ser doloroso para quem percorre esse caminho sem, antes, saber de todas as suas implicações: há muitas situações sobre as quais não se tem total controle, os programas de email ainda são limitados e há que se repensar o modo de criação dos layouts para email marketing responsivo.

Tudo isso mexe com a maneira de enxergar o email marketing, o tempo de desenvolvimento, maneiras de testar e aprovar e até com egos profissionais. São muitos dedos em uma ferida e o melhor é compreender tudo o que está por vir antes de decidir encarar a jornada. Mas se isso for feito pensando apenas nos benefícios que os leitores terão, garanto que tudo valerá a pena!

O que é um layout responsivo

O layout responsivo é aquele que responde, de diferentes maneiras, aos mais diferentes dispositivos onde é visualizado, modificando automaticamente suas características para ficar mais confortável ao usuário em cada dispositivo por onde é acessado. Um site responsivo se apresenta com um layout em aparelhos de telas grandes, como computadores desktop e SmarTVs, por exemplo, e com outro layout mais enxuto em um smartphone.

A essa capacidade de modificação automática do layout conforme as características do dispositivo em que é visualizado, dá-se o nome de responsivo.

O que é um email marketing responsivo

Um email marketing responsivo tem o mesmo princípio de comportar-se de diferentes maneiras conforme o dispositivo em que é visualizado, quer seja num computador, tablet, smartphone ou SmarTV.

O email marketing responsivo de um e-commerce, quando visualizado em um computador de tela grande, pode apresentar-se com um layout que exibe 3 produtos lado a lado.

Esse mesmo email, quando visualizado num aparelho de tela pequena, como um smartphone, pode exibir os 3 produtos um abaixo do outro, de forma que as imagens, textos e links continuem em um tamanho bom para o destinatário ler e interagir, sem precisar usar o zoom.

Tecnicamente falando, o email marketing responsivo é um único arquivo HTML que contém instruções sobre como cada elemento do layout deverá se modificar conforme o aparelho que for utilizado pelo destinatário.

O que não é um email marketing responsivo

Não é porque o email marketing foi exibido no celular ou no tablet de maneira “bonita” ou “correta”, do ponto de vista do designer, que significa que ele é responsivo.

O email marketing responsivo pode até apresentar-se da mesma maneira no celular e no computador desktop – considerando a forma de diagramação dos elementos -, mas o email marketing responsivo é configurado previamente para se comportar dessa maneira de forma que pelo menos os seus textos fiquem legíveis e não sejam reduzidos para manter a mesma proporção em relação aos demais conteúdos do layout.

Veja, por exemplo, o layout do email marketing a seguir. Num webmail acessado por um notebook, ele se apresentará ao destinatário exatamente dessa maneira:

Exemplo de email marketing de boas vindas

Exemplo de email marketing de boas vindas da plataforma de envios Zenmail.

Se ele não tiver sido programado para ser responsivo, ele será exibido dessa maneira em um smartphone:

Exemplo de email marketing de boas vindas não responsivo

Já se ele for programado para ser responsivo, ele pode se apresentar dessa maneira no smartphone:

Exemplo de email marketing de boas vindas responsivo

Usando o mesmo exemplo do email marketing anterior, perceba que, quando ele contém instruções em seu código HTML para ser responsivo, o layout se adequa melhor ao tamanho da tela do aparelho.

Ele mantém os tamanhos originais dos elementos do layout (textos e imagens) em vez de apenas ter a sua área total reduzida de maneira proporcional para caber na largura menor da tela, que é o que acontece com o email marketing não responsivo.

Comparação entre os layouts de um email marketing responsivo e um não responsivo

Comparando um trecho dos dois emails lado a lado, fica mais nítido perceber como o email marketing responsivo oferece leitura e interação mais confortáveis ao destinatário, pois mantém os textos em um tamanho legível sem a necessidade de zoom manual, além de manter seus botões com ampla área de clique/toque e imagens que saltam aos olhos.

Por que criar emails marketing responsivos

A porcentagem de brasileiros que acessa a internet sobe a cada ano. De acordo com a pesquisa TIC Domicílios 2018, foram registrados 67% de pessoas com acesso à internet em 2017 e 70% em 2018. Essa mesma pesquisa aponta que o celular é o principal meio de acesso para 97% dessas pessoas.

As próprias tendências de compra nos comércios mostram que os brasileiros adquirem menos computadores para a casa, deixam os tablets para as crianças e, para si, priorizam o uso de smartphone, que permite comunicação rápida tanto para fins pessoais quanto de trabalho.

A probabilidade do seu cliente ou consumidor visualizar seus emails no celular é altíssima, e quanto melhor a experiência de navegação oferecida a ele, maior também é a possibilidade de conversão, isto é, do seu cliente/consumidor fazer aquilo que você quer.

Isso é especialmente válido considerando que o celular é um facilitador das transações por impulso, já que tudo está, literalmente, na palma das mãos e a poucos toques de distância.

Criar email marketing responsivo é diferente de criar um site responsivo

O grande desafio do email marketing responsivo é que ele é desenvolvido de forma diferente de sites responsivos.

Para desenvolver sites responsivos, podemos contar com praticamente todas as propriedades de CSS, com as interações ricas permitidas pelo javascript e diversos frameworks com estruturas já prontas de interfaces, que invariavelmente usam HTML5 em sua composição.

Já o email marketing, responsivo ou não, ainda precisa ter o HTML desenvolvido com tabelas para estruturar o layout, quase como se estivéssemos diagramando um site no Excel. É por isso que muitas pessoas têm a impressão de que layouts de email marketing são limitados visualmente, pois são todos “quadradinhos”.

É fato que o email marketing impõe várias limitações técnicas que nos impedem de produzir um resultado tão interativo ou um layout tão orgânico quanto um site, e é por isso que, cada vez mais, o profissional que sabe criar email marketing é valorizado no mercado.

Sites responsivos são desenvolvidos com elementos do HTML5 que tornam o código semântico. Isso significa que quem lê o código, quer seja um profissional programador ou o robô indexador do Google, consegue identificar que determinada parte do site corresponde ao menu de navegação principal, que outra parte é o rodapé, outra parte é um subtítulo e assim por diante.

Já o código HTML do email marketing não consegue usar esses recursos semânticos porque os programas de email não os suportam. Os sites são construídos para serem exibidos em browsers, e os emails são exibidos em programas de email (claro rs), que são um mundo à parte.

Mesmo os webmails, apesar de serem acessados por navegadores, têm o seu próprio modo de compreensão de HTML e CSS, variando de um para o outro.

Enquanto o Gmail suporta imagens como plano de fundo de textos, o Outlook desktop (versões 2007 a 2016) não suporta. Na prática, isso significa que o layout aparecerá de um jeito no Gmail e de outro bem diferente no Outlook.

Diferenças de exibição de um email marketing em um programa de email com bom suporte a CSS e o Outlook

Neste exemplo, temos um email marketing que, para ser responsivo, foi programado de uma maneira que separa a imagem do fundo – que simula grama – dos conteúdos principais que contêm texto. Veja que esse email marketing, no Gmail, foi exibido corretamente, enquanto que no Outlook desktop (versões 2007 a 2016) a imagem de fundo não foi exibida porque o programa de email não suporta esse recurso da linguagem HTML ou do CSS. No lugar da imagem, configura-se uma cor hexadecimal apenas para que os conteúdos não pareçam “perdidos” aplicados sobre um fundo branco.

É preciso repensar o estilo de criação do design do email marketing

É justamente por causa de tantas diferenças entre os programas de email que os webdesigners, quando precisam criar um email marketing, acabam criando um que contém só imagens. Essa é mesmo a única maneira de fazer um email marketing rápido e que é exibido exatamente igual em todos os programas de email.

Mas se a intenção é que o email marketing seja responsivo, um HTML repleto de imagens pode não ser a melhor solução. É possível que um email marketing composto só por imagens seja responsivo, mas o ideal é que possamos separar o que é texto do que é, realmente, imagem – como fotos, ícones e ilustrações.

Com textos escritos direto no código HTML, e não embutidos em imagens -, é possível ter controle sobre o tamanho das fontes e permitir que o texto quebre linhas naturalmente ao se readequar a diferentes tamanhos de tela. Esse é o principal propósito do email marketing responsivo.

Mas isso significa algumas limitações de design. Num email marketing que deve ser responsivo, não é recomendado usar textos aplicados sobre imagens de fundo que precisam ter uma altura específica. Quando a largura da tela reduzir e o texto quebrar em mais linhas do que quebrava na tela grande, ele vai ocupar uma altura maior e vai faltar imagem de fundo para preencher o espaço das linhas adicionais.

Os problemas apresentados por um email marketing em HTML que usa imagem de fundo não repetível em uma área de texto

Neste exemplo, temos um texto aplicado sobre uma imagem de fundo. Quando esse email marketing for visualizado em uma tela de notebook ou maior que isso, o texto ocupará 7 linhas porque aproveita toda a largura disponível no email. Essas 7 linhas cabem perfeitamente sobre a área azul da imagem de fundo.

Porém, se esse HTML for responsivo, ao ser visualizado num programa de email de smartphone, que tem a tela pequena, a largura do email reduz, e o texto quebrará em mais do que as 7 linhas que ocupava na largura de tela de desktop.

Como a ideia é manter o texto legível, o tamanho da fonte permanece o mesmo tanto na visualização em desktop quanto em smartphone. Mas no smartphone o texto passa a ocupar 11 linhas, e a imagem de fundo tem um desenho cuja proporção não é suficiente para cobrir toda essa nova área.

Anteriormente, vimos que algumas versões desktop do Outlook não suportam imagens de fundo, então nelas a imagem de fundo não apareceria. Para os outros programas de email que suportam imagem de fundo, precisamos definir, no HTML, o que deve acontecer com essa parte do layout quando o conteúdo tiver uma altura maior do que a imagem aplicada ao seu plano de fundo: mostrar uma cor chapada, repetir a imagem de fundo ou não fazer nada.

No exemplo acima, a imagem de fundo está sendo repetida para compensar o aumento da altura do texto, mas esse design de imagem não favorece essa repetição e deixa o layout bem feio.

Esse e outros casos demonstram que o profissional responsável por programar o HTML do email marketing responsivo precisa ter acesso aos elementos do layout separadamente.

Se o profissional que criou o design do email marketing não usou um software que permita essa organização dos elementos no layout em camadas – como o Photoshop -, a programação do HTML, mesmo que não responsivo, poderá ser prejudicada.

A programação HTML do email marketing responsivo é mais do que “converter” um layout JPEG em HTML. Na verdade, essa tarefa é um verdadeiro quebra-cabeças, salvando elementos gráficos isolamente, com fundo transparente ou colorido, e organizando-os novamente em HTML.

O arquivo JPEG ou PSD do layout é, para o profissional que irá programá-lo, apenas um guia de como deve ser o resultado final e visual do email marketing, que será todo (re)construído usando apenas os recursos das linguagens HTML e CSS.

O conceito mobile-first

Tanto para o desenvolvimento de um site quanto de um email marketing responsivo, existe um importante conceito chamado mobile-first. Mobile-first, na web, significa pensar primeiro no ambiente mobile.

Há designers que já criam layouts de sites considerando, primeiro, a experiência em smartphones. Eles criam, literalmente, um layout com mais ou menos 400px de largura e planejam os elementos de interação para serem tocados e rolados com os dedos. Só depois é que pensam em como esse layout deve ser exibido em telas de larguras maiores.

Isso pode ser difícil para outros designers, especialmente quando precisam enviar o layout para a aprovação de um cliente ou coordenador interno que está esperando receber um design com largura grande, simulando a exibição no navegador de um computador.

Voltando ao universo do email marketing, é perfeitamente possível pensar mobile-first e criar, primeiro, o layout do email marketing considerando sua visualização em telas maiores, com a largura tradicional grande. A única diferença é que, a cada elemento posicionado no layout, é preciso pensar: “como eu quero que isso se comporte em outros tamanhos de tela?”.

Começando pelo topo do email marketing, que às vezes agrupa elementos com diferentes tamanhos e alinhamentos, vamos supor que o designer crie esse layout, nos tradicionais 600px ou 700px de largura:

Topo de um email marketing na visualização desktop, contendo logo e links

Se a intenção é que esse email marketing seja responsivo, é preciso saber o que fazer com cada elemento dessa área quando o email for visualizado numa tela pequena. Quero que o logo fique centralizado, sozinho? Os links de preview e opt-out devem sumir (sim, é possível) ou ficar abaixo do logo, também centralizados?

Topo de um email marketing responsivo na visualização em um smartphone, mostrando o logo e os links em linhas diferentes e em tamanhos adequados

São decisões desse tipo que o designer precisa tomar a cada elemento que criar no layout do seu email marketing. Isso é especialmente válido se um outro profissional for responsável por desenvolver o HTML desse layout. Costumo dizer que, quando a empresa tem um profissional para criar o design do email marketing e outro para programá-lo, é bem provável que essas pessoas se odeiem.

Quando há um profissional responsável apenas pelo design do email marketing, são grandes as chances de que suas criações não levem em consideração os recursos do HTML/CSS a serem usados na programação. Geralmente, designers de criação – que não são programadores – tendem a focar mais na estética, sem considerar a parte técnica do email marketing.

Isso é natural, porque ao escolher a carreira de design, o profissional não imagina que, em algum momento, precisará saber programação. Designers que criam sites e apps podem não precisar saber de programação para desempenhar bem o seu trabalho porque praticamente qualquer coisa que eles desenharem para essas interfaces será possível de ser programada e funcionará em todos os navegadores.

Já em email marketing, nem todos os recursos gráficos e estilos de diagramação de conteúdo podem ser reproduzidos com tags e propriedades do HTML e CSS de forma que funcionem igualmente em todos os programas de email.

O profissional que desenvolve o HTML do email marketing, especialmente quando responsivo, precisará redesenhar todo o layout usando os recursos correspondentes das linguagens e HTML e CSS.

Por exemplo: se no layout do email marketing tem um parágrafo com texto escrito na fonte Arial, aplicado sobre um fundo azul claro com sombra na parte inferior em azul escuro, o profissional que programar esse trecho irá escrever, em HTML, um código que crie uma caixa com cor de fundo azul e sombra e, dentro dela, irá escrever o texto e indicar, também via programação, as formatações visuais desse texto: a fonte Arial, a cor, o tamanho, o espaço entrelinhas etc.

Os recursos do HTML e do CSS que serão usados para programar o layout precisam ser bem escolhidos para que funcionem bem em todos os programas de email. Observe que eu disse “para que funcionem bem”, e não “para que sejam exibidos da mesma forma” nos programas de email.

Desapego do controle pixel perfect

Por causa do problema de suporte adequado a HTML e CSS pelos programas de email, em que alguns programas suportam certos recursos dessas linguagens e outros não, é preciso compreender que, se o email marketing for responsivo, ele não será exibido exatamente igual em todos os programas de email.

Quem desenvolver o HTML do email marketing responsivo, reproduzirá o layout concebido usando os recursos dessas linguagens de programação. Tomando aquele exemplo do parágrafo de texto aplicado sobre um fundo azul com sombra inferior, quando isso for programado em HTML e CSS e enviado aos programas de email, será possível verificar que a sombra aparecerá no Apple Mail mas não no webmail do R7.

Aqui os designers começam a pirar, porque muitos têm dificuldade para aceitar que seus layouts não serão exibidos EXATAMENTE da forma como foram criados no Photoshop – ou em qualquer outro software gráfico. Mas é preciso lembrar das bases da profissão: o bom design é aquele que alia forma (ou estética), função e conforto (ou usabilidade) para o usuário.

Aprimoramento progressivo

Mas não é porque alguns recursos estéticos não funcionam em alguns programas de email que é preciso abandoná-los por completo. Se alguns programas de email suportam recursos interessantes, por que não aproveitá-los? Basta oferecer (programar) uma alternativa minimamente aceitável que funcione nos outros programas de email que não puderem exibir aquele recurso.

No nosso exemplo do parágrafo de texto aplicado em uma caixa azul com sombra, se a sombra não puder exibida em algum programa de email, prejudicará a compreensão da mensagem como um todo? O destinatário saberá que ali precisava ter uma sombra? Muito provavelmente, não.

A esse modo de desenvolvimento que considera alternativas de funcionamento ou exibição de uma interface – no caso, um email marketing – tanto em um ambiente super precário quanto em um ambiente com mais recursos, é dado o nome de aprimoramento progressivo.

Isso significa, basicamente, oferecer ao destinatário a melhor experiência com email marketing que ele pode ter com o seu programa de email.

Por exemplo, quem usa o programa de email nativo do iPhone, consegue até assistir a vídeos dentro da mensagem de email, mas quem usa o Outlook 2007 não pode nem ver um GIF animado. E é possível criar um único email marketing que, na programação, ofereça alternativas a cada um desses ambientes: se o email for visualizado no Apple Mail, aparece o vídeo no layout, mas se for visualizado no Outlook, aparece uma imagem estática qualquer, sem que esse usuário do Outlook perceba algum erro na mensagem.

Tudo isso porque é mais importante transmitir a mensagem corretamente e fazer com que o destinatário faça o que você quer ele que ele faça (inscreva-se num curso, compre um produto, ligue para um número de telefone etc) do que querer que um título seja exibido numa fonte especial, por exemplo.

Quem vai ler o email nem sabe que aquele título era pra ser estar formatado em determinada fonte, ou que sob o parágrafo era estar um degradê de azul para branco, em vez do azul chapado que apareceu.

O que importa é que o destinatário não tenha a percepção de que algo deu errado, como ver textos que quebram linhas além do natural, áreas vazias gigantes e outras coisas que, claramente, indicam que aconteceu algum problema ao carregar a mensagem.

Cada programa de email tem suas particularidades

Exemplificando as diferenças de suporte a HTML e CSS entre os programas de email, temos o seguinte:

  • No app do Outlook.com, contas Microsoft (@outlook.com, @hotmail.com, @msn.com, @live.com) não exibem emails responsivos, mas contas não Microsoft (como emails corporativos ou de outros provedores de email que são configurados no app do Outlook.com) são exibidos responsivos. Portanto, o mesmo email, no mesmo app, do mesmo celular, pode ser visualizado como responsivo ou não, dependendo do tipo de conta de email que está sendo usada.
  • Aplicativos de celular como Gmail, Outlook.com, Yahoo! Mail, UOL e BOL podem mostrar o email responsivo (se ele foi programado para ser responsivo), mas ao acessar o mesmo email pelo webmail no navegador do celular, ele pode ser exibido como se estivesse em desktop. Vai depender se o site do webmail está adequado para ser acessado por celular e, quando acessado, se aceitará as instruções presentes no HTML que fazem a transformação do conteúdo para o layout responsivo.
  • O Gmail app no Android mostra todos os textos na fonte Roboto ou Google Sans, dependendo da versão Android utilizada.
  • Nem todos os programas de email suportam webfonts. Uma atualização do Gmail, a que introduziu a composição inteligente de mensagens, deixou de suportar webfonts, até mesmo as do Google Fonts.
  • O Outlook desktop (versões 2007 a 2016) não suporta certos recursos de HTML, como GIF animado, formulários e um monte de recursos de CSS, como imagens de fundo, largura, altura e margens. Na verdade, o Outlook é tão limitado que, dependendo do layout desenhado para o email marketing, é preciso programar, no mesmo HTML, um layout “normal” e outro só para o Outlook.

O código HTML é mais complexo de desenvolver

Com tantas variáveis a serem consideradas no desenvolvimento do email marketing responsivo, você já deve ter percebido que o código HTML tem mais instruções do que um HTML não responsivo, já que ele precisa indicar as diferentes apresentações de layout tanto conforme a mudança de tamanho de tela quanto conforme o programa de email que é utilizado.

Realmente, o código HTML do email marketing responsivo é mais complexo do que o de um email marketing comum e, portanto, leva mais tempo para ser desenvolvido, testado e aprovado.

Quem cria o design do email marketing que deve ser responsivo, pode tanto já criar o layout esperado para o menor tamanho de tela quanto deixar isso a cargo do profissional que vai desenvolver o HTML.

Quando são duas pessoas que fazem esses trabalhos, uma que cria e outra que programa, o ideal é que a pessoa que programa receba dois layouts: o de como o email deve ser exibido em sua maior largura e o de como deve ser exibido em telas pequenas.

Nesse caso, é importante que a pessoa da criação conheça pelo menos o básico de programação do HTML de email marketing, assim sabe como os elementos que criar poderão ser modificados da tela maior para a menor. Um elemento que aparece no topo do email marketing no desktop, por exemplo, não pode mudar de lugar para que seja exibido no rodapé do email, na sua visualização em smartphone.

Os elementos de layout do email marketing responsivo obedecem a uma ordem de diagramação e as mudanças que podem sofrer na visualização em telas diferentes são limitadas, diferentemente do que acontece na programação de sites responsivos, que podem ser totalmente modificados.

Quando a mesma pessoa que cria o layout do email marketing é quem vai desenvolver o seu HTML, o processo é mais fácil. Se não houver necessidade de aprovar o layout do email marketing em sua versão responsiva ainda na fase do design, o profissional não precisa criar dois layouts diferentes, pois pode efetuar as mudanças de comportamento do layout direto na programação HTML.

É importante contar com sistemas automatizados de testes de exibição do email marketing em programas de email

Como o email marketing responsivo considera a visualização do email em telas de diferentes tamanhos, as variáveis de testes aumentam, pois os programas de email podem ser acessados por qualquer dispositivo que os suportem, de TVs a smartwatches.

Se considerarmos programas de email acessados por navegadores em computadores, temos as combinações de sistema operacional e navegador. No celular, existem os apps de email tanto para Android quanto para iOS – ainda há uma quantidade mínima de aparelhos Windows Phone e Blackberry no mercado – e, ainda, a possibilidade de acessar cada webmail pelo navegador do celular.

Somando todas essas combinações – o email marketing visualizado no Gmail pelo Chrome no Windows, no UOL pelo Firefox do Mac, no Thunderbird do Linux e assim por diante -, facilmente chegamos em mais de 80 testes. Impossível fazer tudo isso manual e individualmente, tendo prazo curto para entregar o email marketing.

É por isso que existem serviços de testes automatizados, como os da Litmus e do Email on Acid. Usando esses sistemas, basta fazer upload do HTML do email marketing para realizar todos aqueles testes – ou os que você preferir – automaticamente e de uma vez.

Os resultados são em printscreens, e é possível ver, antes do envio real do email marketing, os possíveis problemas de exibição que ele apresentará em algum programa de email e fazer suas correções.

Algumas plataformas de envio oferecem esses serviços de testes de preview – geralmente com custo adicional e sempre de alguma dessas duas empresas -, e para quem desenvolve muitos emails por semana, essa praticidade é essencial.

Estrangeiros criam email marketing responsivo diferentes de nós, brasileiros

Com todos esses detalhes, você pode pensar que será mais seguro recorrer a templates prontos de emails responsivos, vendidos em marketplaces estrangeiros como o ThemeForest, a modelos gratuitos como os oferecidos pela Litmus e pela Zurb, ou mesmo querer usar editores online tipo drag’n drop como o BeeFree, Stripo ou outros similares.

Porém, se você precisa que seu email marketing funcione perfeitamente no Outlook desktop, não é recomendado usar templates ou editores de fora do Brasil. Os principais provedores dessas soluções já priorizam a correta de exibição do email marketing no Gmail e nos apps mobile (Gmail app e Apple Mail), e usam recursos de programação que, dependendo do layout desejado para o e-mail, não funcionará no Outlook.

Esse “não funcionará” pode tanto ser algo simples, que não seria percebido como um erro pelo destinatário, até a completa desconfiguração da diagramação dos elementos.

O ideal é saber quais são os programas de e-mail mais usados pelo seu público – há plataformas de envio, como o Zenmail, que fornecem essa informação nos relatórios dos envios – e testar se seu email marketing está sendo exibido corretamente neles. Se você for do time em que o Outlook desktop não é relevante, você é uma pessoa feliz!

Geralmente, o Outlook é mais relevante para comunicações B2B, pois esse programa de e-mail ainda é muito usado em empresas, apesar de ter alternativas melhores e gratuitas como o Thunderbird.

Empresas que usam soluções Microsoft têm mais dificuldade de atualizar as versões dos software usados por seus funcionários devido ao alto custo das licenças, e acabam usando o software até o seu último suspiro, quando não é mais fornecida nenhuma atualização ou suporte do fabricante.

Quem se comunica direto com o consumidor final precisa se preocupar ainda mais em deixar seus e-mails marketing responsivos, já que o celular é o principal aparelho usado pelos brasileiros para acessar a internet (pesquisa TIC Domicílios 2018).

Como no Brasil os celulares mais vendidos usam o Android como sistema operacional, o Gmail app, que é o programa de e-mail que já vem instalado no Android, deve estar no centro das atenções dos testes.

As imagens precisam ser salvas, no mínimo, com 3x o seu tamanho normal

O que é retina display

O termo retina display foi criado pela Apple para definir o recurso de alta resolução gráfica introduzido na tela do iPhone 4, em 2010. Para melhorar a qualidade gráfica da tela, a Apple aumentou a quantidade de pixels presentes em uma polegada.

Quando nós olhamos a imagem em uma TV bem de perto, conseguimos ver, na tela, os pontos que compõem a imagem. A quantidade de pontos agrupados no espaço de uma polegada é chamada de densidade de pixels. Quanto maior a densidade de pixels – quanto mais pixels couberem dentro de uma polegada – em um aparelho, melhor será sua definição gráfica.

Sabe quando você chega bem perto da TV, ou vê um outdoor bem de perto, e consegue ver os pontos que formam a imagem?

Tanto a Apple quanto outros fabricantes “reduziram” tanto o tamanho de um pixel para que coubessem mais dentro do espaço de uma polegada, que mesmo que a gente aproxime os olhos, o máximo possível, da tela de um aparelho com alta densidade de pixels, não conseguimos identificar os pontinhos que formam as imagens.

O iPhone 4, quando foi lançado, causou um impacto grande porque “espremeu” 4 pixels no mesmo tamanho em que, no iPhone anterior, só cabia 1. É que o iPhone 3G tinha uma resolução de tela de 480 x 320 pixels, e o iPhone 4, com o mesmo tamanho de tela, veio com resolução de 960 x 640. É o dobro de qualidade gráfica num mesmo espaço físico de tela.

Para entender melhor, uma SmarTV de 40” tem resolução de tela de 1920 x 1080. Já o iPhone 11 Pro Display tem apenas 5,8” e resolução de tela de 2436 x 1125 pixels.

Perceba que o celular tem uma resolução maior que a TV, que é um aparelho fisicamente muito maior. Isso quer dizer que o tamanho do pixel, no celular, é menor que o tamanho do pixel na TV numa tal proporção que cabem muito mais pixels no celular do que na TV. É por isso que a aparência das coisas no celular é muito mais nítida do que na TV.

O que o retina display tem a ver com o email marketing responsivo

O processo de criação de um email marketing envolve as etapas de design e programação. No design do layout, nós criamos os elementos como queremos que eles se apresentem ao público: banner com 600px de largura, botão com 100px de largura etc.

Esse tamanho de imagem que definimos no Photoshop em pixels são considerados pixels lógicos. Na prática, significa que a imagem não tem um tamanho exato, mas que deve ocupar o espaço correspondente a 100 pixels do aparelho onde for visualizada, já que cada aparelho tem o pixel de um tamanho diferente, dependendo de sua resolução e densidade.

É justamente para atender a essa variedade de tamanhos de pixel nos aparelhos que precisamos salvar nossas imagens em um tamanho bem maior do que aquele queremos em que ela apareça no layout.

Ora, se existem aparelhos de alta densidade de pixels cujo tamanho do pixel é 2x, 3x e até 4x maior que o pixel de uma resolução convencional, então nossas imagens serão “ampliadas” para poderem caber nesses espaços. Assim, elas serão exibidas com aspecto ligeiramente embaçado, porque cada pixel da imagem precisa ser “estufado” para se adequar ao tamanho de cada pixel do aparelho.

Isso quer dizer que para que nossas imagens tenham melhor definição gráfica em aparelhos retina display, precisamos salvar o arquivo de cada imagem em um tamanho, pelo menos, três vezes maior o tamanho do que desejamos inseri-la no email marketing, pois a densidade de pixels dos aparelhos modernos já são bem altas.

Como exportar as imagens em tamanho maior

O Illustrator e o Adobe XD, contam com recurso de exportar, com apenas um comando, a mesma imagem em tamanhos diferentes, já adaptadas para diferentes proporções de retina display. Por serem software vetoriais, esse recurso é possível porque elementos vetoriais podem ser ampliados sem perda de qualidade gráfica.

Já quem cria layouts de email marketing no Photoshop, que é um software bitmap, precisa definir o tamanho grande do elemento ainda no momento da criação do arquivo. Se for preciso criar um ícone de 100px x 100px, por exemplo, crie no Photoshop um arquivo com 300px x 300px e desenhe o ícone nesse espaço, nesse tamanho grande mesmo, para depois inseri-lo no seu layout e no HTML indicando o tamanho de 100px de largura.

Otimizando o tamanho das imagens

Com você deve imaginar, ao salvar suas imagens 2x, 3x e até 4x maior do que o tamanho normal, o arquivo gerado será bem pesado em kb.

Quando trata-se de um ícone que será exibido no email com apenas 32px x 32px, o arquivo original, salvo em tamanho grande (96px x 96px), não fica tão pesado. Porém, quando é um banner animado de 700px x 450px, a história muda. Facilmente, essa imagem pode chegar a 4MB, algo totalmente inviável de ser enviado por email marketing.

O email marketing responsivo não diz respeito apenas à mudança de diagramação do layout do email, mas precisa ser pensado em todos os aspectos da sua visualização em situações móveis. Imagina que seu destinatário vai ver seu email com esse banner animado gigante, a partir de uma conexão 3G, que ele usa de um plano pré-pago de 2GB por mês? Só o download do banner pode acabar com o restinho de tráfego que lhe resta.

É por isso que o uso de compressores de imagens é fundamental para otimizar o email marketing responsivo. Além de já salvar a imagem usando o recurso de compressão do Photoshop, Illustrator ou qualquer outro que tenha esse controle, é importante contar com apps específicos para compressão de imagens, para conseguir “espremer” um pouco mais o tamanho final do arquivo, sem perder qualidade.

Veja aqui algumas indicações de softwares de compressão de imagens.

É preciso verificar se a plataforma que será usada no envio faz alguma alteração no código HTML

As instruções que tornam o email marketing responsivo são declaradas na área do cabeçalho head do código HTML. Lamentavelmente, algumas plataformas podem remover essa área no momento do envio, pois é comum que incluam todo o código da mensagem cadastrada dentro de uma estrutura própria.

Se essa estrutura própria da plataforma estiver configurada para ignorar ou remover o cabeçalho do HTML do cliente, ou mesmo se tiver certas formatações especificadas em código, como uma largura fixa, por exemplo, todas as funções de comportamento responsivo programadas inicialmente se perderão.

É fundamental que a plataforma de envios preserve, na íntegra, o código HTML fornecido. É possível verificar isso entrando em contato com a equipe técnica da plataforma ou fazendo um teste com um email que já se sabe que é responsivo.

O grande impasse é que, geralmente, quem contrata a plataforma de envios não é a mesma pessoa que cria ou programa o email marketing, e a decisão de contratação pode ser baseada apenas no melhor preço ou na existência de certos recursos importantes para a equipe de marketing.

Quando isso acontece, o profissional responsável pela operação da plataforma só vai descobrir o problema na hora de um envio real, quando os contratos já foram assinados.

Há empresas que ainda estabelecem contratos por período determinado, e se o cliente cancela antes do término, paga uma multa. Já pensou contratar uma plataforma nesses termos e só “na hora do vamos ver” descobrir que ela não suporta emails responsivos? Tremenda dor de cabeça.

É possível exibir conteúdos diferentes no email para programas desktop e mobile, mas de uma forma bem trabalhosa

O aspecto mais desejado pelos profissionais em relação ao email marketing responsivo é a possibilidade de exibir conteúdos totalmente diferentes no email conforme o aparelho em que ele for visualizado, apresentando certos produtos ou imagens em programas de email desktop e outros produtos ou imagens em programas de email mobile.

Isso é possível de ser feito, mas com ressalvas. Na prática, é preciso programar o HTML do email marketing com os dois conteúdos e indicar onde cada um deve ser exibido e ficar oculto. O grande problema é que o Outlook desktop (versões 2007 a 2019) não suporta o recurso que faz as coisas ficarem ocultas de uma maneira fácil.

É preciso criar, no mesmo arquivo HTML, uma programação que só vai funcionar no Outlook e será ignorada pelos demais programas de email. Nessa situação, nós temos praticamente 3 emails diferentes dentro de um mesmo arquivo: um para o Outlook, outro para os demais programas desktop e outro para os programas mobile.

Ou seja: dá pra fazer, mas leva bem mais tempo e exige a realização de testes mais cuidadosos para garantir que nada será exibido onde não deve. Já dá pra notar que não é possível pedir pro designer fazer um email assim pra ser enviado dentro de 3h né? 😛

Não dá pra identificar os apps de email que as pessoas usaram nos smartphones

Anteriormente, citei que é importantíssimo consultar os resultados de cada envio de e-mail marketing para verificar os programas de e-mail mais usados pelo seu público para abrir as mensagens. Muitas plataformas de envio oferecem esse relatório, mas as informações que elas conseguem obter são limitadas.

O Google Analytics, por exemplo, fornece um relatório dos principais navegadores e sistemas operacionais usados pelos visitantes de um site. Ele consegue essa informação porque, quando um visitante acessa um site rastreado pelo GA, usa um navegador que está instalado num sistema operacional.

Quando o visitante acesa o site, o seu navegador envia ao servidor uma requisição do conteúdo do site. Essa requisição é composta por vários cabeçalhos com informações sobre que conteúdo ele está pedindo, as condições em que aceita recebê-lo e quem ele é. Essa identificação de quem é o navegador que fez a requisição chama-se user-agent.

Como todo navegador tem um user-agent padrão definido, o GA pode mostrar, nos seus relatórios, os navegadores que foram usados para acessar o site.

O mesmo acontece com as plataformas de envio, que inserem um código de rastreio em todo e-mail marketing que enviam para poderem registrar as aberturas, cliques e outros dados sobre o acesso dos destinatários à mensagem, inclusive o programa de e-mail que eles usaram.

Programas de email desktop têm um user-agent definido, e também é possível saber o webmail que foi usado com base no user-agent do navegador e o referrer, que é a indicação da origem de onde o visitante estava quando acessou o conteúdo. Assim sabe-se quem acessou os emails usando o Gmail no Chrome, ou o Terra no Firefox e assim por diante.

Porém, apps de programas de email de tablet e celular, em sua maioria, não definem um user-agent próprio, o que impede a sua correta identificação. Para identificar o sistema que está acessando os emails é usado o user-agent padrão do celular, que geralmente é o nome e versão de seu sistema operacional.

Portanto, na consulta sobre as aberturas de um email marketing, é possível saber qual sistema operacional e sua versão (Android KitKat, Oreo, iOS 12 etc) foram usados, mas não se o app foi o Gmail, o Mail, o Outlook ou qualquer outro.

É preciso ficar de olho nos novos aparelhos que permitem acessar emails

O profissional de email marketing tem mais uma tarefa para adicionar em seu dia-a-dia: acompanhar os lançamentos de qualquer aparelho que permita acessar emails. Há algum tempo, só era preciso se preocupar com Gmail e Outlook no computador. Hoje, há carros que contam com sistemas de navegação que acessam emails por voz.

Temos também os smartwatches, que podem alcançar mais pessoas num futuro próximo, e também oferecer alguma maneira de acessar emails em HTML. É crescente o uso de SmarTVs para acessar a internet, e como elas têm navegadores web, permitem acessar webmails.

Como as SmarTVs já vêm com apps instalados, como Netflix e outros, podem passar a trazer o app de algum programa de email também. E se for um programa de email novo, específico do sistema operacional da TV, será mais um ambiente em que precisaremos testar a exibição de nossos emails.

Hoje, o layout de email marketing responsivo é focado nos smartphones, pensando na redução da largura do layout e na leitura com rolagem vertical. Mas é perfeitamente possível pensar ao contrário: na expansão da largura do layout para visualização em telas muito grandes, e sua navegação com rolagem horizontal.

Fato é que o email marketing será visualizado em cada vez mais dispositivos diferentes, e precisamos ficar de olho nas tecnologias para adequar nossos designs pensando em novos padrões de leitura e formas de interação.

Assim como o surgimento do retina display mudou a nossa forma de lidar com imagens no email marketing, é também questão de tempo para os programas de email melhorarem seu suporte a HTML e CSS e podermos usar, no email marketing, os mesmos recursos que usamos em sites, transformando-os em mini landing pages.

O futuro chega todos os dias! 🙂

Juliana Padron

QUEM ESCREVEU ESTE CONTEÚDO?

Juliana Padron

Co-fundadora da Templateria e do Portal Email Marketing, Juliana trabalha com email marketing há mais de 15 anos e é especialista na criação e desenvolvimento em HTML de templates de email marketing responsivos (e em resolver os problemas do Outlook para exibir emails em HTML).

Últimos Posts