Sites Responsivos não Redimensionam Banners Gerados por Códigos ou Tags
Um banner para computador 728x90 pixels por exemplo, não redimensiona em um site responsivo e acessado pelo celular se ele for gerado via códigos ou tags.
Sites responsivos não conseguem redimensionar banners de 728x90 pixels ou outras dimensões fixas provenientes de tags de Javascript em celulares devido à maneira como o JavaScript e as tags de iframe, frequentemente usadas nesses códigos, funcionam. Abaixo explico alguns motivos principais:
1. Tamanhos Fixos no Código de Origem: Quando a tag (geralmente uma tag `<iframe>`, `<script>` ou `<embed>`) contém dimensões fixas, como 728x90 pixels, o navegador renderiza o conteúdo com essa largura e altura específicas. Diferente de elementos HTML que podem ser ajustados pelo CSS responsivo, tags como `iframe` e scripts externos, muitas vezes, não são afetados pelas regras de CSS da página que os hospeda.
2. Isolamento de Iframes: Muitos banners fornecidos por terceiros são encapsulados em um `<iframe>`. O iframe é como uma “janela” para outra página web. O conteúdo dentro dele é isolado do site principal, de modo que as regras de CSS aplicadas ao site hospedeiro não impactam o conteúdo do iframe. Para redimensionar esse conteúdo, seria necessário redimensionar o próprio iframe e, ao mesmo tempo, ter controle sobre o conteúdo exibido internamente (o que geralmente não é possível com publicidade de terceiros).
3. JavaScript Externo: Muitos banners utilizam JavaScript para carregar conteúdo dinâmico (por exemplo, anúncios rotativos). Esse JavaScript normalmente é controlado pelo servidor do anunciante, e o próprio código já contém regras de dimensionamento fixas. Isso impede que o código CSS ou JavaScript do site hospedeiro controle o redimensionamento, pois o JavaScript não permite adaptações a diferentes tamanhos de tela de forma automática.
4. Falta de Suporte a Design Responsivo nos Códigos Externos: Muitos banners e anúncios antigos foram criados antes da popularização do design responsivo e, portanto, foram projetados para telas maiores. Como resultado, eles não têm uma lógica de redimensionamento para dispositivos móveis. Para que um anúncio seja responsivo, o código precisa incluir condições para verificar o tamanho da tela e fornecer uma versão alternativa do banner.
Como Resolver ou Mitigar
Para contornar essa limitação, existem algumas abordagens possíveis:
- Solicitar Anúncios Responsivos: Muitos fornecedores de publicidade agora oferecem códigos de banner responsivos, que ajustam o conteúdo conforme o tamanho da tela. Você pode solicitar aos fornecedores esses tipos de tags.
- Inserir o Iframe com CSS Responsivo: Se você tiver algum controle sobre o CSS do iframe, pode tentar redimensioná-lo usando propriedades como `width: 100%; height: auto;`. Contudo, isso nem sempre funciona se o conteúdo interno do iframe tiver um tamanho fixo.
- Usar JavaScript para Redimensionamento: Em alguns casos, scripts personalizados podem redimensionar iframes com base no tamanho da tela. Porém, isso precisa ser feito cuidadosamente para evitar problemas de layout e também exige que o código permita esse tipo de manipulação.
Essas soluções, no entanto, nem sempre funcionam dependendo da rigidez do código fornecido. Portanto, a melhor opção, quando possível, é solicitar anúncios responsivos diretamente aos fornecedores.