Funciona en teléfonos inteligentes, tabletas y navegadores de escritorio
Hoy nos gustaría mostrar cómo crear un banner publicitario interactivo con HTML5.
Este fue un proyecto que hizo Ben Chong hace un tiempo para Carlsberg, y pensamos que puede ser útil para diseñadores y programadores interesados en el trabajo de diseño frontal.
Carlsberg es una marca multimillonaria mundial de cerveza que emplea a más de 40.000 personas en todo el mundo. Además de la marca doméstica Carlsberg, también fabrican otras marcas como Tuborg, Somersby (sidra), Kronenbourg y Dali Beer (una marca de rápido crecimiento en Asia).
¿Qué es un anuncio interactivo?
Hagamos un resumen rápido. En los viejos tiempos, teníamos anuncios de texto, que básicamente son una pequeña propaganda de texto con un enlace a la página, producto o servicio del anunciante.
Luego vinieron anuncios de banner estáticos. Estas son típicamente imágenes estáticas. Son más convincentes que los anuncios de texto, porque las imágenes valen más que mil palabras. Los formatos principales vienen en 300×250 píxeles (cuadro), 728×90 (ancho) o 90×728 (rascacielos).
Luego llegó la tecnología Flash en el navegador de escritorio. Flash fue revolucionario, porque permitió una ola de anuncios publicitarios animados, así como anuncios interactivos. Los anuncios animados cautivan la atención del usuario, lo que resulta en tasas de clics (CTR) más altas. Los jugadores podrían incluso jugar un microjuego como disparar contra algo o lanzar una pelota al aro.
En 2010 Apple convenció al mundo de las virtudes de cambiar a HTML5, y con gigantes que incluyen a Google siguiendo su ejemplo, la tecnología Flash disminuyó rápidamente.
Las empresas de tecnología publicitaria vieron el enorme potencial de crecimiento en dispositivos móviles y, por lo tanto, comenzaron a implementar HTML5 en un nuevo bloque de anuncios multiplataforma. Esta unidad se denomina anuncio interactivo HTML5, compatible con los nuevos estándares de la industria, como MRAID, MRAID2, etc.
Para resumir, un anuncio HTML5 interactivo es un anuncio que ahora funciona en teléfonos inteligentes, tabletas y navegadores de escritorio.
Entonces, ¿de qué se trata este anuncio de Carlsberg?
Aquí hay un enlace al vídeo, que muestra el anuncio interactivo que se ejecuta en un iPhone:
El objetivo de este anuncio interactivo es dar a conocer el Torneo Seven de World Rugby, un evento anual de rugby que tiene lugar en Hong Kong. Los mejores equipos de todo el mundo compiten anualmente para ganar el primer premio. Carlsberg es uno de los principales patrocinadores.
La experiencia publicitaria es simple. Los usuarios ven una brillante botella de cerveza Carlsberg. Un mensaje le pide al usuario que toque la botella brillante. Al tocarla, se reproduce una breve animación de un jugador de rugby que lleva un cubo frío y helado de cervezas Carlsberg. Aparece un divertido eslogan de marca: "¿Estás listo para la cerveza"? Luego, los usuarios pueden tocar el enlace "Encuéntrenos en Facebook" para visitar la página del anunciante y obtener más información.
Volver a nuestra programación regular
Un anuncio HTML5 interactivo consta de 5 elementos principales:
1. index.html (punto de entrada principal)
2. main.js (el javascript que contiene la lógica)
3. main.css (la hoja de estilos CSS)
4. assets (activos visuales)
5. el enlace de salida (donde el anuncio debería llevar a los usuarios)
Comencemos construyendo el anuncio...
Parte 1: Index.html
El index.html consiste en declaraciones HTML estándar.
Lo que importa aquí es la metaventana (meta viewport) y el enlace a main.css y main.js
Como puedes ver, es bastante simple. Nada fuera de lo común.
Paso 2: main.js (La carne y los huesos)
Main.js es un archivo Javascript que maneja toda la interacción con el anuncio.
En la parte superior, insertamos el JS minificado completo de jQuery. Ten en cuenta que puedes usar la última versión de jQuery desde http://jquery.com/
jQuery será útil para la mayoría de las técnicas de manipulación DOM que usamos.
A continuación, creamos una función de precarga sencilla basada en imágenes.
Precargamos un conjunto de activos gráficos relacionados con el anuncio.
Ahora, vamos a la lógica. Cuando el anuncio se carga, notarás que creamos 2 divs, llamados scene1 y scene2.
scene1 contiene el div de la botella brillante. Cuando se hace clic en ella, pasamos a scene2 a través de la función gotoScene2.
scene2 en sí contiene el tagline div, que cuando se toca redirige a la página de Facebook de Carlsberg.
Es básicamente eso. Se necesita una lógica muy simple.
Parte 3: main.css (La hoja de estilos)
En este ejemplo, se hicieron a través de CSS algunas de las geniales animaciones que ves.
Por ejemplo, la botella de cerveza brillante usa el valor del intermitente de la propiedad -webkit-animation.
También se han agregado algunos algoritmos estándar que los usuarios tienden a adorar, como bounceIn y bounceOut.
Parte 4: assets visuales
Los anuncios interactivos requieren imágenes divertidas relacionadas con la marca. Por lo tanto, es recomendable trabajar con un diseñador en anuncios HTML5 interactivos.
En este caso se ha utilizado: el fondo verde en blanco; La botella; El fondo con el hombre de rugby sosteniendo un cubo de hielo frío de cervezas; Los gráficos de llamada a la acción.
Parte 5: Llamada a la acción (CTA)
Estas son las partes más importantes de cualquier anuncio interactivo. La llamada a la acción tiene que estar diseñada para que los usuarios realmente quieran hacer clic para obtener más información.
Tiene que ser un mensaje convincente que se vincule con la curiosidad del usuario.
Para enfatizar, aquí está el aspecto final de la CTA:
Resumen
Esperamos que este artículo sea útil para la comunidad. Como puedes ver, este anuncio interactivo es realmente fácil de construir y no lleva más de 10 minutos en ensamblarlo tu mismo.
Haz clic aquí para descargar los archivos y el código fuente del proyecto (En formato .zip).
