Skip to main content

Conteúdo HTML Personalizável

O uso de conteúdo HTML customizado nas peças Onsite permite flexibilidade, personalização e alinhamento da solução Etag com o design do website em que está sendo implementada. No entanto, para garantir performance, escalabilidade e uma boa experiência do usuário, é importante seguir algumas boas práticas.

1. Priorize HTML estruturado em vez de imagens estáticas​

Sempre que possível, prefira construir layouts utilizando HTML + CSS ao invés de depender de apenas imagens estáticas. Benefícios:

  • Mais leve: HTML e CSS geralmente consomem menos banda que imagens grandes.
  • Mais dinâmico: permite mais personalização.
  • Melhor responsividade: adapta-se melhor a diferentes telas.
  • SEO e acessibilidade: conteúdo textual pode ser indexado e lido por leitores de tela.

Ou seja, evite conteúdos como:

<img src="banner-completo-com-texto.png" />

Em vez disso, prefira

<div class="banner">
    <img src="header-image-sem-texto.png" />
    <h2>Oferta Especial</h2>
    <p>Até 50% OFF em produtos selecionados</p>
    <a href="/ofertas">Ver ofertas</a>
</div>

2. Otimize o uso de imagens​

Imagens continuam sendo elementos fundamentais e, muitas vezes, são o principal destaque da peça exibida no produto. No entanto, seu uso deve ser feito de forma estratégica:

  • Utilize ferramentas de compressão para reduzir o tamanho dos arquivos sem comprometer a qualidade perceptível. Exemplos:
  • Escolha formatos recomendados ( .png, .jpg)
  • Redimensione imagens para o tamanho real de uso (evite carregar imagens maiores que o necessário)
  • Evite múltiplas imagens pesadas na mesma peça
tip

Idealmente, é preciso buscar o equilíbrio entre qualidade da imagem e performance:

Nem sempre um arquivo maior representa ganho real de qualidade. Em muitos casos, imagens com resolução muito alta não trazem diferença perceptível dentro do contexto da peça - especialmente considerando o tamanho real em que serão exibidas na tela.

Ou seja, você pode estar carregando arquivos mais pesados sem nenhum impacto visual relevante para o usuário.

Exemplo

Considere uma imagem utilizada em uma peça de TagAssist:

  • Versão original: 200 KB
  • Versão comprimida: 40 KB

Isso representa uma redução de aproximadamente 80% no tamanho do arquivo, sem diferença visual perceptível no contexto da peça.

Esse tipo de otimização melhora significativamente o tempo de carregamento e reduz o consumo de dados, sem impactar a experiência do usuário.

Por isso, é recomendável priorizar um carregamento mais eficiente, mesmo que isso envolva uma leve redução de qualidade que não afete a experiência final.

Imagens muito pesadas podem impactar negativamente:

  • Tempo de carregamento.
  • Consumo de dados do usuário.
  • Limites de transferência (quota).

3. Validação​

Sempre teste suas peças antes de publicar:

  • Utilize o modo preview para validar a renderização real.
  • Compare diferentes níveis de compressão.
  • Verifique a experiência em diferentes dispositivos.

O objetivo é garantir que a qualidade percebida seja mantida, com o menor custo possível de carregamento.

Resumo​

  1. Prefira HTML + CSS para construir interfaces
  2. Otimize sempre o tamanho das imagens, mantedo o equilíbrio entre qualidade da imagem e performance.
  3. Valide suas peças antes da ativação das campanhas.

Seguindo essas práticas, você garante peças mais leves, rápidas e flexíveis, além de uma melhor experiência para o usuário.