Provavelmente já passou horas a desenhar a assinatura de correio eletrónico perfeita - escolheu cores, escolheu tipos de letra, talvez até tenha adicionado um assinatura caligráfica para dar aquele toque pessoal. Depois, carrega-se no botão enviar e tudo parece... estranho. O logótipo está esmagado, a faixa está cortada, as imagens demoram uma eternidade a carregar.
As dimensões são importantes. Não por causa de um princípio de design abstrato, mas porque a sua assinatura circula por dezenas de clientes de correio eletrónico, cada um com as suas próprias peculiaridades. O que fica bem no Gmail pode falhar no Outlook. O que carrega instantaneamente no computador pode falhar no telemóvel.
Vamos corrigir isso.
Índice
Otimizar o tamanho das imagens da assinatura de e-mail
Acertar no tamanho das imagens não é uma questão de seguir regras - é uma questão de compreender o que acontece quando alguém abre o seu e-mail.
Porque é que o tamanho é importante nas assinaturas de correio eletrónico
Eis o que a maioria das pessoas não percebe: os clientes de correio eletrónico não se limitam a mostrar a sua assinatura. Redimensionam-na, comprimem-na e, por vezes, rejeitam-na completamente.
Uma fotografia de 2MB? O Outlook retira-a. Um logótipo de 50x50px? É ilegível em ecrãs retina. Um banner de 800px de largura? Cortado ao meio no telemóvel.
Todos os clientes de correio eletrónico têm limites. O Gmail limita as imagens a um total de 10 MB, mas boa sorte a carregar isso numa ligação 4G. O Apple Mail lida melhor com ficheiros grandes, mas comprime-os de forma agressiva. O Outlook - o pior dos infractores - por vezes mostra apenas um X vermelho.
O tamanho afecta três coisas: a capacidade de entrega, o tempo de carregamento e o seu aspeto profissional. Se errar em algum deles, a sua assinatura torna-se um risco.
Impacto do tamanho do ficheiro no carregamento do correio eletrónico
Envia 50 mensagens de correio eletrónico por dia. Cada um tem uma assinatura de 500 KB. São 25MB de largura de banda - só para assinaturas. Multiplique por todos na sua empresa.
Os destinatários apercebem-se de carregamentos lentos. Não pensam em "ficheiro grande" - pensam "os e-mails desta pessoa são lentos". Depois começam a ignorá-los.
O ponto ideal? Menos de 50 KB para toda a assinatura. Menos de 20 KB é melhor.
As imagens pesadas fazem algo pior do que o carregamento lento - accionam os filtros de spam. Os fornecedores de correio eletrónico têm em conta o tamanho da mensagem. Um e-mail de texto de 5KB com uma assinatura de 1MB? Suspeito. Direto para a pasta de spam.
O tamanho do ficheiro aumenta rapidamente. Um logótipo PNG com 300x100px pode ter 80KB. Acrescente um banner, ícones sociais, talvez uma foto de rosto e, de repente, está a 200 KB. Isto antes da compressão.
Como o tamanho afecta a perceção da marca
A sua assinatura funciona em piloto automático. Cada e-mail, cada resposta, cada reencaminhamento - representa-o a si.
Um logótipo pixelizado diz às pessoas que não se preocupa com os detalhes. Um banner de grandes dimensões grita "não sei o que estou a fazer". Imagens que não carregam? Parece pouco profissional.
A consistência da marca vive em dimensões. O seu logótipo deve ser reconhecível, mas não exagerado. Os banners devem ser complementares, não dominantes. Tudo deve ser dimensionado corretamente em todos os dispositivos.
Pense na última assinatura que o impressionou. Provavelmente limpa, compacta e legível. Nada a lutar pela atenção. É o dimensionamento intencional em ação.
Dimensões recomendadas para o logótipo
Os logótipos são complicados. Demasiado pequenos, e ninguém os vê. Demasiado grandes, e dominam tudo o resto.
Tamanhos ideais de logótipo
Comece com um máximo de 300x100px. Isto é, largura por altura. A maioria dos logótipos cabe confortavelmente neste espaço.
Logótipos horizontais? 300x80px funciona. Logótipos quadrados? Experimente 100x100px. Os logótipos verticais são difíceis - 80x120px no máximo, senão empurram tudo para baixo.
As dimensões reais do ficheiro devem ser o dobro do que é apresentado: 600x200px guardado, apresentado a 300x100px. Isto permite lidar com ecrãs retina sem tornar os ficheiros enormes.
Porquê estes números? Os clientes de correio eletrónico apresentam as assinaturas numa coluna estreita - normalmente com 500-600 px de largura. O seu logótipo deve ocupar cerca de metade desse espaço, no máximo. Deixe espaço para texto, informações de contacto e outros elementos.
As diferentes orientações dos logótipos requerem abordagens diferentes. Os logótipos largos escalam melhor. Os logótipos altos necessitam de restrições de altura ou dominarão os ecrãs móveis.
Dimensionamento de logótipos sem perda de qualidade
Nunca esticar um logótipo. Nunca. Se o seu ficheiro de origem tiver 400x200px, não o apresente a 300x150px - as proporções mudam.
Utilize o rácio de aspeto original. Um logótipo 2:1 mantém-se 2:1 quer tenha 300x150px ou 200x100px. Os clientes de e-mail manterão este aspeto se definir a largura OU a altura, não ambas.
Trabalhar com ficheiros vectoriais sempre que possível. Exportar com o dobro do tamanho de apresentação. Um logótipo com 250 px de largura? Exporte o PNG com 500 px de largura. Isto dá-lhe imagens prontas para retina sem tamanhos de ficheiro enormes.
Teste em diferentes tamanhos antes de se comprometer. O que parece bom a 300px pode perder pormenores a 150px. Os pormenores mais finos desaparecem primeiro - linhas finas, texto pequeno, formas complexas.
Escolher formatos de ficheiro de logótipo
PNG com transparência - é a predefinição. O PNG de 24 bits lida bem com as cores, com a transparência na perfeição e comprime razoavelmente.
JPEG para fotografias ou gradientes complexos. Mas logótipos com texto? O PNG ganha. Os JPEGs criam artefactos em torno de arestas vivas. O texto torna-se difuso.
O SVG é tentador - ficheiros minúsculos e infinitamente escaláveis. Mas os clientes de correio eletrónico bloqueiam-nos. O Outlook não apresenta SVG de todo. O Gmail retira-os. Fique com PNG.
Para obter o tamanho do ficheiro, passe os PNGs por compressão. Ferramentas como TinyPNG ou ImageOptim cortam 60-70% sem perda visível de qualidade. Um logótipo de 80KB passa a 25KB. Mesmo aspeto, carregamento mais rápido.
Guarde com a profundidade de cor correta. A maioria dos logótipos não precisa de milhões de cores. O PNG-8 com 256 cores é muitas vezes idêntico ao PNG-24, mas com metade do tamanho.
- Dizer adeus aos rabiscos desarrumados
- Obter uma assinatura elegante e confiante em poucos dias
Tamanhos ideais de banners e elementos
Os banners são espaços promocionais na sua assinatura. Se forem mal utilizados, são spam. Se forem bem utilizados, geram cliques.
Dimensões dos banners para melhores taxas de cliques
Banner padrão: 600x100px no máximo. Esta é a largura que a maioria dos clientes de correio eletrónico atribui antes de envolver ou cortar o conteúdo.
Os banners estreitos funcionam melhor - 600x70px ou 600x80px. Não sobrecarregam a assinatura. Os destinatários podem ver as suas informações de contacto sem terem de passar por um painel publicitário.
O telemóvel muda tudo. Aqueles 600px? Tornam-se 320-375px nos ecrãs dos telemóveis. Desenhe primeiro para essa largura. O texto deve ser legível a 320 px. Os apelos à ação devem poder ser tocados.
O posicionamento do banner é tão importante quanto o tamanho. A parte inferior da assinatura funciona melhor - primeiro as informações de contacto, depois a promoção. O posicionamento superior compete com o seu nome e título.
As áreas clicáveis precisam de espaço. Um botão no seu banner deve ter, pelo menos, 44x44px - o objetivo mínimo de toque da Apple. Se for mais pequeno, as pessoas não o vêem no telemóvel.
Criar banners dentro das restrições de e-mail
Os clientes de correio eletrónico não têm código sofisticado. Não há efeitos de foco, animações ou layouts complexos. O seu banner é apenas uma imagem e um link.
Mantenha o texto grande - tamanho de letra mínimo de 14px, 16px é mais seguro. Os textos pequenos tornam-se ilegíveis quando reduzidos.
O contraste é mais importante no correio eletrónico do que nos sítios Web. O texto claro em fundos claros desaparece nos painéis de pré-visualização. Um contraste elevado garante a legibilidade em todos os clientes de correio eletrónico.
Utilize cores seguras para a Web. Os clientes de correio eletrónico processam as cores de forma diferente. Aquela cor azul-petróleo da marca perfeita? Pode parecer azul no Outlook e verde no Apple Mail. Teste entre clientes.
Os limites de tamanho de ficheiro afectam fortemente os banners. Um banner de 600x100px não deve exceder 30KB. Utilize cores sólidas em vez de gradientes sempre que possível. Comprima de forma agressiva. Cada kilobyte conta.
Aspectos técnicos da resolução de assinaturas de correio eletrónico
A resolução determina se a sua assinatura tem um aspeto nítido ou desfocado. Se a resolução for incorrecta, nem mesmo as dimensões perfeitas o salvarão.
Impacto da resolução da imagem
As assinaturas de correio eletrónico são apresentadas a 72 DPI (pontos por polegada) - a resolução de ecrã padrão. A impressão utiliza 300 DPI, mas isso é irrelevante neste caso.
O que importa: as dimensões dos píxeis e a forma como são apresentados em diferentes ecrãs.
Os ecrãs Retina mostram o dobro dos pixéis. Um logótipo de 300px num ecrã normal passa a 600 pixels lógicos em retina. Se a sua imagem de origem tiver apenas 300 px, parece desfocada.
Solução: criar imagens em tamanho 2x, apresentar em 1x. Um logótipo apresentado a 200x80px deve ser guardado a 400x160px. O HTML ou CSS reduz a escala, proporcionando uma visualização nítida em retina.
A maioria dos clientes de correio eletrónico trata disto automaticamente se definir corretamente as dimensões de visualização. Alguns não o fazem. Teste em dispositivos reais - Macs, iPhones, máquinas Windows de alta resolução.
Melhores formatos de ficheiros de imagem
PNG para tudo o que tenha transparência ou texto. Logótipos, ícones, botões - o PNG trata deles sem artefactos.
JPEG apenas para fotografias. Uma fotografia de rosto, uma fotografia de produto - o JPEG comprime-as melhor do que o PNG. Mas mantenha a qualidade em 80-85%. Se for inferior, os rostos ficarão estranhos.
O GIF funciona para gráficos simples e suporta animação, mas GIFs animados em assinaturas? Distraem e são frequentemente bloqueados. Opte por imagens estáticas.
O WebP oferece uma melhor compressão, mas o suporte do cliente de correio eletrónico é irregular. O Outlook ignora totalmente o WebP. O Gmail trata do assunto. Não vale a pena correr o risco, a menos que esteja a visar apenas os utilizadores do Gmail.
Nunca utilize BMP, TIFF ou outros formatos exóticos. Ou são demasiado grandes ou não são suportados.
Reduzir o tamanho do ficheiro sem perda de qualidade
A compressão não é negociável. As exportações originais são sempre maiores do que o necessário.
Para PNG: utilize ferramentas como TinyPNG, ImageOptim ou Squoosh. Estas ferramentas optimizam a estrutura do ficheiro sem alterar os pixels. Um logótipo de 100KB passa a 30KB sem qualquer diferença visível.
Para JPEG: exportar com uma qualidade de 80-85%. A diferença entre 100% e 80% é invisível para a maioria das pessoas, mas reduz o tamanho do ficheiro para metade.
Reduzir a paleta de cores para PNGs. Se o seu logótipo utiliza 10 cores, porquê guardá-lo com milhões? O PNG-8 com uma paleta limitada é dramaticamente mais pequeno.
Recortar o espaço não utilizado. Aquele logótipo de 800x200px com espaço branco em ambos os lados? Corte-o para 600x150px. Menos pixéis = ficheiro mais pequeno.
Remover metadados. Os ficheiros de imagem contêm dados EXIF, perfis de cor e outras informações de que não necessita. Retire tudo. Ferramentas como o ImageOptim fazem-no automaticamente.
"A Ge-Sign criou a minha nova assinatura de correio eletrónico e tem um aspeto profissional, carregando instantaneamente."
Kevin F., corretor de imóveis
Testar e adaptar assinaturas de correio eletrónico
A sua assinatura funciona no seu cliente de correio eletrónico. Ótimo. Mas e as outras dezenas de clientes que os seus destinatários utilizam?
Importância de testar as assinaturas de correio eletrónico
Outlook Web versus Outlook Desktop versus Outlook Mobile - três motores de renderização diferentes, três resultados diferentes.
Gmail no Chrome, Gmail no Safari, aplicação Gmail no iOS - todos ligeiramente diferentes.
Apple Mail, Thunderbird, Yahoo Mail, Proton Mail - cada um tem as suas particularidades.
O teste não é opcional. Envie mensagens de correio eletrónico de teste para contas em diferentes plataformas. Verifique o computador e o telemóvel. Procure por:
- Imagens a carregar corretamente
- Dimensões que se mantêm estáveis
- Sem espaços estranhos ou lacunas
- Ligações em funcionamento
- Texto legível
Falhas comuns: imagens esticadas no Outlook, banners cortados no Apple Mail móvel, problemas de espaçamento na aplicação Gmail.
Utilize ferramentas de teste como Litmus ou Email on Acid se estiver a enviar assinaturas para toda a empresa. Elas mostram pré-visualizações em dezenas de clientes simultaneamente.
Os testes manuais também funcionam, mas consomem muito tempo. Crie contas gratuitas nos principais fornecedores. Envie e-mails de teste para si próprio. Verifique no seu telemóvel.
Adaptação de assinaturas para dispositivos móveis
Mais de 50% dos e-mails são abertos no telemóvel. A sua assinatura tem de funcionar aí primeiro.
Os ecrãs móveis têm uma largura de 320-428 px. Aquele banner de 600px? Diminui para caber. O texto torna-se minúsculo. As imagens perdem pormenor.
Conceber com uma mentalidade mobile-first:
- Manter a largura total da assinatura abaixo de 500px
- Utilizar tamanhos de letra maiores (mínimo 16px)
- Os elementos clicáveis devem ter, pelo menos, 44x44px
- Empilhar os elementos verticalmente sempre que possível
- Teste em telefones reais, não apenas no redimensionamento do navegador
As imagens devem ser dimensionadas proporcionalmente. Defina a largura máxima como 100% em HTML. Isto permite que os clientes de correio eletrónico reduzam as imagens para se adaptarem aos ecrãs sem quebrar a disposição.
Considere as velocidades dos dados móveis. Aquela assinatura de 200 KB? Demora segundos a carregar em ligações lentas. Os destinatários passam por ela antes de aparecer.
Algumas empresas criam assinaturas móveis separadas - mais simples, mais pequenas, mais rápidas. Duplica o trabalho, mas garante uma excelente experiência móvel.
Evitar problemas de visualização
Os clientes de correio eletrónico quebram as assinaturas de formas previsíveis. Eis o que corre mal e como o evitar:
Tabelas, não divs. O HTML do correio eletrónico está preso em 2005. Utilize layouts de tabela para a estrutura. As Divs e as CSS modernas falham frequentemente.
Apenas estilos em linha. As folhas de estilo externas são retiradas. são ignoradas. Coloque estilos diretamente nos elementos: <td style="padding: 10px;">.
URLs de imagens absolutas. Ligação a imagens alojadas num servidor, não a ficheiros anexados. As imagens anexadas podem não ser apresentadas em respostas ou reencaminhamentos.
Texto alternativo para tudo. Quando as imagens não são carregadas (bloqueadas pelo cliente ou por uma ligação lenta), o texto alternativo é apresentado. Torna as assinaturas legíveis sem imagens.
Sem imagens de fundo. O Outlook ignora-as. Em vez disso, utilize cores sólidas ou imagens regulares.
Testar a formatação das ligações. Alguns clientes formatam automaticamente os URLs, quebrando as ligações de texto com estilo. Verifique sempre se o texto ligado aparece corretamente.
Evite tipos de letra exóticos. Os tipos de letra da Web não funcionam. Limite-se aos tipos de letra do sistema: Arial, Helvetica, Georgia, Times. São apresentadas em todo o lado.
Atenção à altura e ao espaçamento das linhas. O que parece bem no seu editor pode ser renderizado com lacunas extra no Outlook. Utilize valores de pixel específicos para o espaçamento.
A sua assinatura de correio eletrónico não é estática - é um código que viaja em território hostil. Cada cliente interpreta-a de forma diferente. As dimensões e os tamanhos de ficheiro adequados dão-lhe a melhor hipótese de ter um aspeto profissional em todo o lado.
Comece com estas especificações:
- Logótipos: 300x100px máximo, menos de 20KB
- Banners: 600x80px máximo, menos de 30KB
- Assinatura total: menos de 50KB
- Todas as imagens: 2x densidade de píxeis para retina
Testar em todo o lado. Ajuste com base no que não funciona. A sua assinatura representa-o em centenas de mensagens de correio eletrónico. Faça com que ela conte.
Escrito pela equipa editorial da Ge-Sign.
