Blog de Email Marketing

Templates

Imagens do email marketing que não são exibidas nos Outlooks antigos

Juliana Padron Por Juliana Padron em 10.09.2015

Você desenvolve o HTML do seu lindo template de email marketing e, ao testá-lo nos programas de email, verifica que certas imagens não são exibidas apenas no Outlook versões 2000, 2002 e 2003.

Descartados os problemas ocorridos no lado do usuário, que podem ir desde restrições da rede até a arquivos bizarros na pasta de arquivos temporários, temos os problemas com o HTML do email em si, que é o que conseguimos resolver por aqui.

De imediato, é preciso checar se as tais imagens estão hospedadas na web e se suas chamadas nos atributos src estão escritas corretamente, desde o http://. Tendo checado isso e a disponibilidade do servidor de hospedagem, temos que investigar um pouco mais fundo.

Imagens em CMYK

Isso faz parte das lições básicas de design: RGB é cor luz e CMYK é cor pigmento, portanto um padrão é para mídias de tela e o outro para mídias impressas.

Quando você manda para a gráfica a arte de um folder com as cores em RGB, um anjo cai do céu com a cara no chão e o profissional da impressão amaldiçoa suas próximas sete gerações. As cores vão sair erradas no papel. Quando você salva uma imagem em CMYK e a insere em seu email marketing, os Outlooks 2000 a 2003 não conseguirão exibi-la. Quem diz isso é a própria Microsoft.

Se você estiver usando imagens em GIF no email marketing, não precisa se preocupar em checar o padrão de cor. O formato GIF usa uma paleta restrita de 256 cores (ou menos, dependendo da configuração que você escolher ao salvar a imagem), que você pode conferir no seu software gráfico como “Indexed Color”.

Falta da largura declarada na tag de imagem

Mesmo que o template seja responsivo, o Outlook precisa muito que o atributo width esteja presente na tag de imagem, com a largura em pixels declarada dentro das aspas. Nesses Outlooks antigos, de 2000 a 2003, a falta da largura faz com que seja exibido apenas um pontinho de imagem, algo em torno de 2 x 2 pixels. Esse pontinho de imagem fica mais perceptível quando a imagem também não tem o atributo border=“0” e ela está inserida dentro de um link. Nesse caso, a borda azul do link ao redor da imagem deixa mais clara a redução extrema que ela sofreu.

O meu desafio particular

Tendo assegurado que eu não cometi nenhum dos erros anteriores, tentei investigar o que mais poderia ser.

A princípio, desconfiei que era o tamanho das imagens, porque eu sempre observei esse problema acontecer apenas com ícones e outras imagens pequenas, de cerca de 40px de largura. Acidentalmente, testei alterar (para maior) o tamanho das imagens em um HTML em que elas estavam locais, ou seja, não hospedadas na web.

Quando fui testar esse HTML na Litmus é que percebi meu erro, porque quase todos os programas de email mostraram suas indicativas de imagens quebradas (os quadrinhos ou ícones com “X” ou “!”). Apenas esses Outlooks malditos não mostraram nenhuma indicação de imagem quebrada, na verdade, era como se não houvesse mesmo nenhum elemento inserido ali. Hummm.

Então, em vez de olhar apenas para as imagens, observei o HTML ao redor delas. Eu as inseri dentro de células de uma tabela. As células estavam com seus align e valign declarados normalmente e a tabela estava com seus cellpadding, cellspacing e border devidamente zerados, o que faltava? O atributo de largura. Não o especifiquei antes porque eu não tinha um valor exato pra ela, apenas queria que a tabela aumentasse automaticamente, de acordo com o tamanho dos elementos que ela abrigaria.

Infelizmente, não funcionou colocar apenas o atributo width=“” vazio (sem valor algum dentro das aspas). Tentei uma largura irrisória, só pra dizer que tinha um número ali, tipo 10. Além de ainda não ter aparecido nada nesses Outlooks, as imagens também ficaram encavaladas, umas por cima das outras, nos outros programas de email. A solução, então, foi colocar um valor bem próximo ao que seria a largura real em pixels, somando todas as larguras das imagens e espaçamentos padding laterais que coloquei nas células. Nesse caso, foi de 168.

Apesar de o template ser responsivo, desde antes de detectar esse problema eu havia determinado que, em telas menores que 480px de largura, essa tabela com os ícones ficaria escondida. Porém, se eu não quisesse que ela ficasse oculta, teria que criar uma classe para resolver esse problema da largura no ambiente mobile, indicando que, em telas menores, a largura dessa tabela deveria ser qualquer outra que não 168.

Lembrando que essa instrução seria determinada em media query, que o Gmail App não suporta e, por isso, seria válida apenas para iPhones, iPads e outros bonitos que aceitam media queries.

Espero que essa dica seja útil para você e lhe poupe preciosos minutos olhando incrédulo para o computador, pensando “por que eu não fiz Zootecnia?”.

Assine Nossa Newsletter


Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações