Cómo crear un anuncio HTML5 interactivo en 10 minutos
Con la desaparición de Flash, la responsabilidad de los anuncios interactivos pasó a HTML5. Aquí aprendemos a construir un anuncio HTML5 interactivo en solo 10 minutos.
Hoy nos gustaría mostrarle cómo crear un banner publicitario HTML5 interactivo.
Este fue un proyecto que hicimos para Carlsberg Hace un tiempo, lo que creemos que puede ser útil para los diseñadores y programadores interesados en el trabajo de diseño de front-end.
Carlsberg es una marca mundial de cerveza multimillonaria que emplea a más de 40,000 personas en todo el mundo. Además de la marca doméstica Carlsberg, también albergan 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, juego de tecnología Flash en el navegador de escritorio. Flash fue revolucionario, ya que habilitó una ola de anuncios 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 algo o lanzar una pelota al aro.
En 2010, Apple convenció al mundo de las virtudes de cambiar a HTML5, y con los gigantes que incluyen a Google siguiendo su ejemplo, la tecnología Flash disminuyó rápidamente.
Las empresas de tecnología publicitaria ven 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í está un enlace al video , 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 tocarlo, se reproduce una breve animación de un jugador de rugby que lleva un cubo frío y helado de cervezas Carlsberg.
Aparece un eslogan de marca divertido: "¿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:
- index.html (punto de entrada principal)
- main.js (el javascript que contiene la lógica)
- main.css (la hoja de estilos CSS)
- activos (activos visuales)
- 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.
Vea la pluma Demostración de anuncios interactivos Carlsberg - index.html por Ben Chong ( @marketjs ) en CodePen .
Lo que importa aquí es la metaventana y el enlace a main.css y main.js
Como puede ver, es bastante simple. Nada fuera de lo común.
Parte 2: main.js (La carne y los huesos)
Main.js es un archivo Javascript que maneja toda la interacción con el anuncio.
Vea la pluma Demostración de anuncios interactivos de Carlsberg - main.js por Ben Chong ( @marketjs ) en CodePen .
En la parte superior, insertamos el JS minificado completo de jQuery. Tenga en cuenta que puede 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á que creamos 2 divs, llamados scene1 y scene2 .
scene1 contiene el div de la botella brillante. Cuando se hace clic en, pasa a scene2, a través de la función gotoScene2
scene2 en sí contiene el tagline div, que redirige a la página de Facebook de Carlsberg, cuando se toca.
Eso es básicamente eso. Se necesita una lógica muy simple.
Parte 3: main.css (The Stylesheet)
El archivo main.css contiene todos los estilos relacionados con CSS.
Vea la pluma Demostración de anuncios interactivos de Carlsberg - main.css por Ben Chong ( @marketjs ) en CodePen .
En este ejemplo, hicimos algunas de las geniales animaciones que ves a través de CSS
Por ejemplo, la botella de cerveza brillante usa el valor del intermitente de la propiedad -webkit-animation
También agregamos algunos algoritmos estándar que los usuarios tienden a amar, como bounceIn y bounceOut
Parte 4: Activos 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 nuestro caso, utilizamos: 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. El llamado a la acción tiene que estar diseñado 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.
Resumen
Esperamos que este artículo sea útil para la comunidad. Como puede ver, este anuncio interactivo es realmente fácil de construir y no toma más de 10 minutos ensamblarse usted mismo.
haga clic aquí para descargar los archivos del proyecto y el código fuente.