Publicidade gráfica com HTML5 – Como criar anúncios responsivos

Neste artigo, explicamos por que os anúncios de banner responsivos em HTML5 são obrigatórios para todos os anunciantes digitais. De designers a especialistas digitais, de agências a equipes internas, a publicidade gráfica HTML5 agora é o formato de banner padrão.

Em particular, com um número cada vez maior de dispositivos e plataformas para atender, ser capaz de se adaptar aos comportamentos dos espectadores é crucial. Se seu anúncio de banner não for compatível, não puder responder a alterações no tamanho da tela ou funcionar em dispositivos móveis, você está com problemas. A publicidade gráfica responsiva em HTML5 oferece a flexibilidade e a tecnologia de que você precisa para que sua marca prospere online.

Especificamente, o HTML5 oferece aos profissionais de marketing digital a capacidade de:

• Dimensione rapidamente para vários formatos e tamanhos
• Tenha o controle final sobre o design
• Crie facilmente variantes e traduções de anúncios
• Produção em massa de banners de mídia avançada
• Explore o crescimento do vídeo e da exibição em dispositivos móveis
• Atualizar banners dinamicamente com feeds de dados
• Colabore de forma eficaz entre as equipes, internamente

Sim, a criação de anúncios gráficos responsivos nunca foi tão importante, especialmente porque hoje é mais provável do que nunca que seu belo anúncio gráfico seja visualizado em dispositivos móveis. De acordo com a pesquisa da Bannerflow de 2020, os anúncios gráficos para celular estão superando o desktop por alguma margem. Quase dois terços das visualizações de anúncios gráficos são para dispositivos móveis na Europa hoje. Além disso, com os usuários móveis gastando mais de quatro horas em seus smartphones todos os dias – esse é o engajamento que um anunciante digital não pode ignorar. O velho mundo de banners estáticos, gifs e flash acabou – ou pelo menos deveria.

Por que devo criar publicidade gráfica HTML5?

Precisa de mais motivos para produzir publicidade gráfica em HTML5? Para começar, nosso jogo tem tudo a ver com conversão e é competitivo. Todo mundo está desesperado por atenção – não cative e o jogo acaba. O HTML5 oferece oportunidades de design incomparáveis ​​por meio de rich media e uma ampla variedade de formatos de anúncio. Se você não estiver seguindo as melhores práticas para design de banner, pode apostar que um concorrente o fará. Além disso, a publicidade gráfica está crescendo o tempo todo em alcance – principalmente dentro da programática.

Veja, por exemplo, o que está acontecendo no Reino Unido. Em 2020, os anunciantes do Reino Unido gastaram £ 6,79 bilhões em publicidade programática, de acordo com um relatório da eMarketer. Os gastos com publicidade programática agora representam 92% de todos os gastos com publicidade digital no Reino Unido – apesar do impacto da pandemia de Covid-19. E espera-se que essa proporção atinja 94,5% até 2022 e represente £ 9,01 bilhões! Produzir anúncios melhores – via HTML5 – para aproveitar ao máximo esse crescimento precisa ser uma prioridade.

Além disso, com as empresas agora adotando o pensamento “mobile first” em todo o marketing digital, garantir que seu site, páginas de destino e banners sejam responsivos é um requisito mínimo. O HTML5 permite que você crie banners prontos para celular, responsivos e ricos em recursos. Em vez de projetar uma campanha estática para desktop e dimensionar cada banner individualmente, você pode dimensionar com HTML5!

A publicidade há muito se tornou móvel e o HTML5 é a maneira de criar os banners que você precisa.

Qual é o problema com HTML5?

Antes da adoção universal do HTML5, executar uma campanha publicitária em diferentes dispositivos era um trabalho árduo. Fazer banners manualmente para todas as diferentes telas nas quais o anúncio de banner pode aparecer foi um trabalho árduo. HTML5 é a maneira ideal de criar anúncios de banner, assim como para sites responsivos.

HTML5 é a atualização mais recente da Hypertext Markup Language. É a linguagem padrão usada para descrever o conteúdo e o design das páginas da web, incluindo aquelas que são responsivas. O HTML5 é importante na publicidade online, pois oferece a flexibilidade de veicular anúncios de banner em vários dispositivos.

Ele fornece a editores e anunciantes os meios para criar campanhas publicitárias adaptáveis, por meio de banners que se encaixam em todas as plataformas. Ao contrário, digamos, usando flash (oh, que pitoresco), isso significa que você não precisa criar centenas de versões do mesmo anúncio. Reduzir o número de versões de anúncios também diminuirá a probabilidade de erros e aumentará a produção de seu banner.

Dentro de um banner HTML5, texto, imagens, vídeo e JavaScript são ajustáveis ​​da mesma forma que qualquer página da web – eles são editáveis. Os anúncios de banner HTML5 também serão otimizados dinamicamente, para que o anúncio pareça perfeito em todos os lugares. Além disso, os anúncios de banner HTML5 funcionam perfeitamente bem em dispositivos móveis! Sem perda de funcionalidade, o que significa que é fácil atingir um público mais amplo.

Existem duas maneiras de criar banners HTML5

Essencialmente, existem duas maneiras diferentes de criar anúncios de banner online hoje.

Em primeiro lugar, você pode codificar manualmente os anúncios de banner para torná-los responsivos. E sim, existem muitos tutoriais e modelos online mostrando como fazer isso. No entanto, o processo é lento e significa que você precisa possuir um conhecimento decente de HTML5 e CSS. Além disso, é claro que você também precisa ter o brilho de um designer! Uma combinação rara.

Como alternativa, você pode usar uma plataforma de gerenciamento criativo como o Bannerflow, que apresenta um criador de anúncios voltado para automação de produção criativa. Isso ajuda a cuidar da codificação para você – tornando todos os seus banners responsivos com o clique de um botão. Além disso, como descobriremos, eles oferecem muitas maneiras integradas de aproveitar o HTML5. Isso pode variar desde o desenvolvimento de banners de vídeo incríveis até banners dinâmicos que incluem feeds de dados.

A realidade é que as plataformas de gerenciamento criativo diminuem o tempo necessário para construir e dimensionar uma campanha, enquanto colocam o foco da produção de banner HTML5 firmemente no design.

Como criar publicidade gráfica responsiva em HTML5

A criação de anúncios de banner responsivos em HTML5 é relativamente simples. No entanto, como todos os banners digitais, existem regras e práticas recomendadas a serem seguidas. Ao criar publicidade gráfica HTML5, vale a pena considerar:

Verifique seus tamanhos de banner HTML5

Ao criar um layout responsivo HTML5, é necessário que os elementos tenham larguras variáveis ​​semelhantes às que os anúncios de banner de convenção devem seguir. Você também pode usar qualquer altura que desejar – mas isso não significa que seu anúncio permanecerá nessa altura. A prática recomendada ao criar banners responsivos é usar as mesmas alturas dos tamanhos de banner tradicionais. Isso é feito para manter a compatibilidade com editores e redes de anúncios.

Sempre crie (ou modifique) banners HTML5 para tamanhos específicos oferecidos por redes de anúncios e editores. Por exemplo, aqui está uma lista de tamanhos oferecidos pelo Google Ad Manager. Se você basear seus anúncios de banner nesses tamanhos, pode ter certeza de que a maioria dos dispositivos exibirá seu anúncio corretamente quando publicado.

Imagens, design de banner e HTML5

Ao criar banners responsivos em HTML5, seu controle de design e imagens é incomparável. Quadros para mensagens e animações são fáceis de controlar. Mas não seja ganancioso! Seu banner provavelmente só ficará visível para o espectador por entre 5 e 15 segundos – então aproveite ao máximo esse tempo e concentre-se em suas escolhas de design.

E é aqui que as coisas ficam interessantes! Ao usar algumas plataformas de gerenciamento de criativos, como o Bannerflow, as imagens usadas em seu banner HTML5 são ajustadas e compactadas automaticamente. Isso significa que o tamanho e o peso da imagem do seu banner são ajustados para caber nas redes de anúncios.

No entanto – mesmo com toda essa tecnologia incrível – vale a pena tentar manter qualquer imagem no tamanho máximo de 4000×4000 (largura e altura) em pixels. Além disso, é sempre melhor editar arquivos raw super grandes se excederem 4000×4000 para obter melhores resultados. Na verdade, é uma prática recomendada tentar sempre usar as menores imagens possíveis. Isso ajudará a reduzir ainda mais o peso de um banner. Quanto menor a imagem, melhor (mas sem reduzir a qualidade, é claro!).

Também vale a pena selecionar o melhor formato de imagem, para o tipo de imagem que você está usando no seu banner. Por exemplo, um JPEG deve sempre ser usado como plano de fundo. Enquanto se for transparente ou um objeto, use um PNG. Para tipos de logotipo e objetos desenhados (excluindo fotos) SVGs – pequenos em tamanho de arquivo, mas bons em manter a nitidez quando expandidos. Uma combinação de tipos de arquivos de imagem geralmente fornecerá melhores resultados.

Mas lembre-se, há certas coisas que não precisam ser ditas! Como garantir que sua imagem principal esteja em foco total. Enquanto isso, um design limpo e simplista sempre funciona melhor.

Dimensionamento, versionamento e tradução

Mesmo ao criar banners responsivos em HTML5 que otimizam automaticamente, você precisa criar o maior número de versões possível, para alcançar o maior número de pessoas possível. Quanto mais tamanhos de banner, melhor. Dependendo do tipo de mídia, quanto mais banners você tiver, maior a probabilidade de ganhar qualquer lance programático.

A prática recomendada óbvia é usar uma plataforma de gerenciamento de criativos e um criador de anúncios que seja eficiente e rápido quando se trata de dimensionar e criar várias versões de banners HTML5. Melhor ainda, é muito mais fácil trabalhar em vários mercados se você puder duplicar, traduzir e fazer variantes de sua publicidade gráfica.

Também é fácil alternar o conteúdo em banners HTML5. Além disso, ser capaz de duplicar e dimensionar campanhas em segundos significa que é muito mais fácil agendar diferentes variantes para dias diferentes. Colocando claramente, os banners responsivos HTML5 são ótimos para uso em serviços de automação, como programático.

Banners de mídia avançada

Sem HTML5 não haveria banners rich media. Seria impossível fazer banners que interagissem com os espectadores, que fossem responsivos e funcionassem em vários dispositivos. Os anúncios rich media geram níveis mais altos de engajamento e são bons para sua marca. De formulários de inscrição, barras de pesquisa a jogos em banner, o HTML5 permite que os profissionais de marketing digital envolvam os espectadores de várias maneiras.

Mas tenha cuidado com a forma como você usa banners de mídia avançada. Sua eficácia depende muito do formato de banner que você escolher usar. Não tente adicionar muitas informações ou torná-las excessivamente complexas. A interação não deve ter mais do que uma ou duas etapas; tente se concentrar em uma coisa e torná-la rápida e fácil para o espectador.

Por exemplo, um formulário online deve conter o mínimo de interações necessárias – mais, ele começa no banner e termina na página de destino. A chave para uma boa campanha de banner rich media HTML5 é que ela deve ser séria na execução e intuitiva no design.

Hoje, você pode usar recursos como poder pagar diretamente por um produto apresentado em um banner. Ou como visto no anúncio gráfico acima dos chatbots – com banners rich media, as aplicações futuras são infinitas!

Publicidade gráfica em vídeo e HTML5

Dentro da publicidade gráfica, o uso de vídeo está crescendo o tempo todo. Só na Europa, a exibição de vídeo online está se multiplicando três vezes e meia mais rápido do que a exibição sem vídeo. O uso de vídeo em seu anúncio gráfico HTML5 ajuda a fazer você parecer mais autêntico e se conectar com os espectadores, o que, por sua vez, ajuda na conversão. O HTML5 também facilita a criação de banners que usam vídeo para produção em massa.

Através do uso de banners HTML5, você tem muitas opções em relação a como usar o vídeo. Em um nível básico, um vídeo pode ser usado como plano de fundo para um banner. Ou mais criativamente, pode fazer parte da animação do banner. Por exemplo, um trailer que termina com um frame de call-to-action (CTA).

Produzir anúncios gráficos em vídeo é fácil

Algumas dicas importantes ao usar vídeo é sempre garantir que seu logotipo esteja visível no banner de vídeo HTML5. Comece com sua mensagem principal e certifique-se de que o vídeo se repita. Tente também ter no máximo de 1 a 3 etapas no vídeo: chame a atenção dos espectadores, aprofunde o engajamento e sempre termine com um CTA. Sempre defina seus vídeos como "silenciosos" e habilite as legendas (se necessário).

HTML5, combinado com uma boa plataforma de gerenciamento de criativos, deve significar que nenhuma codificação também é necessária. Isso significa que muitas ideias podem se tornar realidade sem a necessidade de fazer nada no back-end do banner.

Além disso, as pessoas estão assistindo a banners de vídeo em números cada vez maiores em seus telefones celulares. Portanto, garantir que você tenha um anúncio gráfico responsivo em vídeo HTML5 pronto para dispositivos móveis é fácil.

Além disso, se você tiver a opção de exportar seus banners de vídeo HTML5 no formato mp4, poderá enviar esses anúncios de vídeo nas redes sociais. Uma maneira fácil para as equipes internas criarem anúncios em vídeo, reutilizarem recursos HTML5 e expandirem o alcance de suas campanhas digitais. Veja como o criador de anúncios no Bannerflow, Creative Studio, torna tudo tão fácil:

Criação de anúncios de banner responsivos HTML5 para dispositivos móveis

Ao criar anúncios gráficos responsivos HTML5 para dispositivos móveis, é preciso usar o formato certo para começar. Em vez de reduzir um banner de desktop para um tamanho móvel, crie seu anúncio especificamente para celular. Em alguns círculos, dada a popularidade e o engajamento do celular, projetar todas as campanhas mobile first é visto como o caminho a seguir.

Vale lembrar que as proporções dos banners HTML5 serão dimensionadas para caber em qualquer tela. No entanto, ainda é uma prática recomendada projetar seus banners com formatos móveis selecionados em mente.

Um aspecto do design de banner móvel a ser considerado é garantir que todas as cópias sejam legíveis. Sim, isso inclui o tamanho da fonte, mas você também considerou sua mensagem? Pode ser necessário adicionar mais quadros ao seu banner HTML5 para celular para expressar a mesma mensagem de um banner para computador. Novamente, depende do formato que você usa, mas tente evitar espremer mais do que deveria em um único quadro.

Além disso, descarte grandes volumes de texto e concentre-se no impacto de suas imagens. Além disso, considerando o tamanho da tela, seu anúncio deve ser atraente e não intrusivo. A publicidade digital se tornou móvel há muito tempo – vá onde seus consumidores estão e produza incríveis banners responsivos em HTML5 para eles.

Criativos dinâmicos

Sem HTML5, você não pode criar e manter anúncios de banner dinâmicos e atraentes baseados em dados. Limite-se a produzir apenas os banners mais básicos e você se verá restrito a uma mensagem. Enquanto isso, um concorrente pode potencialmente entregar 2.000. Sim, realmente: por meio de atualizações consistentes de feed de dados e automação. Um banner responsivo HTML5 pode entregar 2.000 mensagens no tempo necessário para produzir uma estaticamente.

Como mencionado, a beleza do HTML5 é que ele fornece controle completo. O mesmo vale para um banner conectado a um feed de dados – mas mais ainda: você tem a opção de atualizar o banner em tempo real.

Personalize seus anúncios gráficos responsivos

Por exemplo, pegue uma campanha de banner HTML5 mostrando os itens mais populares em uma loja de comércio eletrônico. Quando um item está esgotado, isso é automaticamente refletido na lista de produtos mostrada no banner dinâmico. Isso é ótimo tanto para os espectadores quanto para o negócio de comércio eletrônico!

A mesma ideia pode ser usada por empresas de iGaming. Por exemplo, as probabilidades podem ser alteradas dinamicamente – dentro de um banner – durante uma partida. Há muitos tipos diferentes de campanha personalizada que você pode usar com criativos dinâmicos baseados em HTML5.

Além disso, é uma prática recomendada atualizar um feed de produtos em tempo real. Afinal, você precisa pensar criticamente sobre o formato em que os dados estão sendo exibidos. Certificar-se de que quaisquer dados que você usa em seu banner sejam compreensíveis para os espectadores é fundamental; isso pode variar de datas e preços, a probabilidades. Isso também pode variar entre mercados e idiomas. Por exemplo, a maneira como os americanos escrevem datas é diferente de como os suecos escrevem datas. Ou as diferentes maneiras como britânicos e suecos entendem as probabilidades de apostas.

Um conselho final: um bom criador de anúncios, como o Creative Studio, ou uma plataforma de gerenciamento de criativos facilitará a configuração de filtros e opções de classificação ao manipular um feed de dados.

Próximas etapas: criar seus melhores anúncios de banner responsivos de todos os tempos!

Espero que agora você tenha percebido que criar anúncios de banner responsivos em HTML5 é a melhor opção para suas necessidades de publicidade em display digital. Com tanta flexibilidade, visibilidade em várias telas e plataformas, simplesmente não há melhor tecnologia para banners. Anúncios melhores, designs melhores, métricas melhores – tudo é possível.

Por fim, com plataformas de gerenciamento criativo que oferecem a capacidade de produzir campanhas para todas as principais redes de anúncios – bem como redes sociais – usar uma é uma maneira simples de aumentar a produtividade de sua equipe interna. Levar dias (ou até semanas!) para duplicar e dimensionar campanhas manualmente não é mais uma opção.

Em uma era de vários mercados, otimização ao vivo e transparência, a adoção do HTML5 está ajudando os profissionais de marketing a alcançar o desempenho de anúncio que desejam.

Se você estiver interessado em saber como uma plataforma como o Bannerflow pode ajudar a produzir publicidade incrível, entre em contato.