Como criar um anúncio HTML5 interativo em 10 minutos
Com o desaparecimento do Flash, a responsabilidade pelos anúncios interativos foi passada para o HTML5. Aqui aprendemos a criar um anúncio HTML5 interativo em apenas 10 minutos.
Hoje, gostaríamos de demonstrar como criar um anúncio em banner HTML5 interativo.
Este foi um projeto que fizemos para Carlsberg um tempo atrás, o que achamos que pode ser útil para designers e programadores interessados no trabalho de design front-end.
A Carlsberg é uma marca global de cerveja de bilhões de dólares que emprega mais de 40.000 pessoas em todo o mundo. Além da marca da família Carlsberg, também abrigam outras marcas como Tuborg, Somersby (sidra), Kronenbourg e Dali Beer (uma marca de rápido crescimento na Ásia).
O que é um anúncio interativo?
Vamos fazer uma rápida recapitulação. Antigamente, tínhamos anúncios de texto, que são basicamente uma breve sinopse de texto com um link para a página, o produto ou o serviço do anunciante.
Em seguida vieram os anúncios de banner estáticos. Estas são tipicamente imagens estáticas. Eles são mais atraentes que os anúncios de texto, porque as imagens valem mais que mil palavras. Os principais formatos vêm em 300 × 250 pixels (caixa), 728 × 90 (largura) ou 90 × 728 (arranha-céu).
Então, jogo de tecnologia Flash junto no navegador de desktop. O Flash foi revolucionário, porque permitiu uma onda de anúncios de banner animados, bem como interativos. Os anúncios animados cativam a atenção do usuário, resultando em taxas de cliques (CTR) mais altas. Os jogadores podem até mesmo jogar um micro-game, atirando em algo ou jogando uma bola no aro.
Em 2010, a Apple convenceu o mundo das virtudes de mudar para o HTML5, e com gigantes, incluindo o Google, seguiram o exemplo, a tecnologia Flash diminuiu rapidamente.
As empresas de tecnologia de anúncios veem o enorme potencial de crescimento em dispositivos móveis e, portanto, começaram a implementar o HTML5 em um novo bloco de anúncios de plataforma cruzada. Essa unidade é chamada de anúncio interativo HTML5, com suporte de novos padrões do setor, como MRAID, MRAID2 e outros.
Resumindo, um anúncio HTML5 interativo é um anúncio que agora funciona em smartphones, tablets e navegadores de computador.
Então, o que é esse anúncio da Carlsberg?
Aqui está um link para vídeo , mostrando o anúncio interativo em execução em um iPhone:
O objetivo deste anúncio interativo é conscientizar sobre o Torneio Mundial de Rugby Sevens, um evento anual de rúgbi que acontece em Hong Kong. As melhores das melhores equipes de todo o mundo competem anualmente para ganhar o prêmio principal. A Carlsberg é um dos principais patrocinadores.
A experiência do anúncio é simples. Os usuários veem uma garrafa de cerveja brilhante da Carlsberg. Uma mensagem está pedindo ao usuário para tocar na garrafa brilhante.
Ao tocar nela, uma curta animação toca em um jogador de rúgbi carregando um balde gelado e gelado de cervejas Carlsberg.
Um slogan de marca divertido aparece: "Você está pronto para cerveja"?
Os usuários podem tocar no link "Encontre-nos no Facebook" para visitar a página do anunciante para obter mais informações.
De volta à nossa programação regular
Um anúncio HTML5 interativo consiste em cinco elementos principais:
- index.html (ponto de entrada principal)
- main.js (o javascript que contém a lógica)
- main.css (a folha de estilo CSS)
- ativos (ativos visuais)
- o link de saída (para o qual o anúncio deve levar os usuários)
Vamos começar a construir o anúncio ...
Parte 1: index.html
O index.html consiste em declarações HTML padrão.
Veja a caneta Carlsberg Interactive Ad Demo - index.html de Ben Chong ( @marketjs ) em CodePen .
O que importa aqui é a meta viewport e a vinculação a main.css e main.js
Como você pode ver, é bastante simples. Nada fora do comum.
Parte 2: main.js (A Carne E Ossos)
O main.js é um arquivo Javascript que direciona toda a interação com o anúncio.
Veja a caneta Carlsberg Interactive Ad Demo - main.js de Ben Chong ( @marketjs ) em CodePen .
No topo, nós inserimos todo o JS minificado do jQuery. Observe que você pode usar a versão mais recente do jQuery http://jquery.com/
O jQuery será útil para a maioria das técnicas de manipulação do DOM que usamos.
Em seguida, criamos uma função de pré-carregamento baseada em imagem simples.
Nós pré-carregamos vários recursos gráficos relacionados ao anúncio.
Agora, para a lógica. Quando o anúncio for carregado, você perceberá que criamos 2 divs, chamados scene1 e scene2 .
scene1 contém o div da garrafa brilhante. Quando clicado, ele transita para scene2, através da função gotoScene2
O scene2 contém o tagline div, que redireciona para a página do Facebook da Carlsberg, quando tocado.
Isso é basicamente isso. Lógica muito simples é necessária.
Parte 3: main.css (a folha de estilo)
O arquivo main.css contém todos os estilos relacionados ao CSS.
Veja a caneta Carlsberg Interactive Ad Demo - main.css de Ben Chong ( @marketjs ) em CodePen .
Neste exemplo, fizemos algumas das animações legais que você vê via CSS
Por exemplo, a garrafa de cerveja incandescente usa o valor de intermitência da propriedade -webkit-animation
Também adicionamos alguns algoritmos padrão que os usuários tendem a amar, como bounceIn e bounceOut
Parte 4: Ativos Visuais
Anúncios interativos exigem visuais divertidos relacionados à marca. Por isso, é aconselhável trabalhar com um designer em anúncios HTML5 interativos.
No nosso caso, usamos: O fundo verde em branco; A garrafa; O fundo com o homem de rugby, segurando um balde de gelo frio de cervejas; A chamada para gráficos de ação.
Parte 5: Apelo à Ação (CTA)
Essa é a parte mais importante para qualquer anúncio interativo. A chamada à ação precisa ser desenvolvida para que os usuários realmente queiram clicar para saber mais.
Tem que ser uma mensagem convincente que esteja ligada à curiosidade do usuário.
Resumo
Esperamos que este artigo seja útil para a comunidade. Como você pode ver, esse anúncio interativo é muito fácil de criar e não leva mais de 10 minutos para ser montado.
Clique aqui para baixar os arquivos do projeto e o código fonte.