Diretrizes para o design de assinaturas

Este artigo descreve as melhores práticas para criar assinaturas de email que sejam exibidas de forma consistente em diferentes clientes de email e dispositivos.

Para garantir os melhores resultados ao criar uma assinatura de email no Exclaimer, siga as recomendações de design abaixo. Estas diretrizes ajudam a evitar problemas comuns de renderização no Outlook, Gmail e clientes de email móveis.

Diretrizes de design

Para garantir que as assinaturas sejam exibidas corretamente em todos os clientes de email, siga estas diretrizes:

• Use larguras recomendadas, tanto para o seu modelo de assinatura como para elementos largos, como banners.
• Use tabelas para o layout
• Carregue imagens no tamanho real
• Escolha formatos de ficheiro suportados
• Considere como a assinatura aparecerá em dispositivos móveis
• Evite copiar e colar texto - insira o texto diretamente ou, se for necessário colar, cole como texto simples sem formatação.
• Aplique a formatação e as escolhas de estilo, como fontes e cores (ou outras opções do painel Propriedades), primeiro às camadas exteriores, depois às tabelas internas, células ou grupos. Para mais informações sobre como analisar as partes internas e externas de um modelo, consulte Bordas coloridas, agrupamento e propriedades herdadas no Signature Designer.

Normas de design recomendadas

Estas normas ajudam a garantir que as assinaturas sejam renderizadas de forma consistente em todas as plataformas de email. A tabela seguinte lista as nossas recomendações para aspetos comuns do design:

Melhores práticas

Layout

Siga estas diretrizes de layout para garantir clareza, consistência e legibilidade:

• Utilize tabelas para estruturar o seu layout.
• Pode aninhar tabelas e células de tabela para criar grelhas mais complexas, mas tente evitar sobreposições excessivas com fotos de utilizadores e formas de fundo, por exemplo.
• Use padding para criar espaço entre os elementos.
• Pode definir uma largura fixa tanto nas tabelas como nos templates completos para evitar que a sua assinatura redimensione em ecrãs de dispositivos mais pequenos.
• Pode esticar alguns elementos ou criar designs largos para ajustar à largura do seu template.

Fontes

Escolhas de fontes

Algumas fontes não estão disponíveis em diferentes dispositivos ou sistemas operativos. Isto é especialmente verdade para fontes personalizadas. Considere as suas escolhas de fontes e se deve configurar uma pilha de fontes de reserva para garantir que o seu design pode sempre exibir texto numa fonte apropriada.

Para mais informações, consulte Diferença entre fontes personalizadas e pilhas de fontes.

Tamanhos de fonte

Utilize os seguintes tamanhos de fonte para manter a legibilidade e uma aparência profissional:

• 11 pt – 12 pt para texto maior (por exemplo: nome, cargo)
• 10 pt – 8 pt para detalhes de contacto (por exemplo: telefone, email, website)
• 8 pt – 7 pt para avisos legais e texto de isenção de responsabilidade

Para mais informações sobre tamanhos de fonte, consulte Como usar valores em pixels e pontos no dimensionamento de fontes.

Imagens

Para uma aparência e desempenho ótimos das imagens:

• Evite redimensionar imagens no Designer de Assinaturas - em vez disso, carregue a sua imagem no tamanho exato em que pretende que seja exibida. Por exemplo, se quiser que a sua imagem seja exibida a 100x100px, crie ou redimensione o ficheiro da imagem para esse tamanho.
• As imagens podem ser incorporadas ou ligadas:
  • Imagens incorporadas: Carregadas diretamente do seu dispositivo para o modelo de assinatura.
  • Imagens ligadas: Hospedadas num servidor público e referenciadas através de um URL hospedado no modelo de assinatura.

Para mais recomendações e resolução de problemas com imagens, consulte Como resolver problemas de qualidade de imagem.

Fundos

Considere se uma imagem de fundo ou uma cor de fundo é a melhor escolha para o seu design. Veja Diferença entre imagem de fundo e cor de fundo para comparar os dois métodos e decidir qual é o mais adequado.

Compatibilidade móvel

Utilize estas práticas para manter um layout limpo, simples e compatível com dispositivos móveis:

• Mantenha os designs compactos e simples para evitar a rolagem horizontal.
• Teste sempre as assinaturas em dispositivos móveis sempre que possível.
• Considere como o modo escuro pode afetar as suas escolhas de cores e outros aspetos do estilo.

Erros comuns

Evite o seguinte ao criar assinaturas:

• Usar assinaturas com largura superior a 600 px. Isto pode causar problemas de visualização em ecrãs mais pequenos.
• Não dimensionar as imagens para as suas dimensões reais de exibição. Isto pode resultar em imagens demasiado grandes ou distorcidas.
• Não usar tabelas para o layout. Designs não estruturados podem ser mal renderizados em clientes de email. Veja Diferença entre tabelas e grupos.
• Usar formatos de imagem não suportados. Utilize apenas JPG, JPEG, PNG ou GIF.
• Usar cores ou estilos inadequados para o modo escuro em dispositivos.
• Não ter cuidado ao usar IA para gerar conteúdo, pois pode não ser possível replicar numa assinatura.

Estes problemas podem fazer com que as assinaturas apareçam desalinhadas ou formatadas incorretamente.