Publicidad gráfica con HTML5: cómo crear anuncios receptivos

En este artículo, explicamos por qué los anuncios de banner receptivos HTML5 son imprescindibles para todos los anunciantes digitales. Desde diseñadores hasta especialistas digitales, desde agencias hasta equipos internos, la publicidad gráfica HTML5 es ahora el formato de banner predeterminado.

En particular, con una cantidad cada vez mayor de dispositivos y plataformas para atender, es crucial poder adaptarse a los comportamientos de los espectadores. Si su anuncio de banner no es compatible, no puede responder a los cambios en el tamaño de la pantalla o no funciona en dispositivos móviles, entonces tiene problemas. La publicidad gráfica sensible a HTML5 ofrece la flexibilidad y la tecnología que necesita para que su marca prospere en línea.

Específicamente, HTML5 ofrece a los especialistas en marketing digital la capacidad de:

• Escale rápidamente a muchos formatos y tamaños
• Poseer el máximo control sobre el diseño
• Cree fácilmente variantes y traducciones de anuncios
• Producir en masa banners rich media
• Explotar el crecimiento del video y la pantalla móvil
• Actualice dinámicamente los banners con fuentes de datos
• Colabore de manera efectiva entre equipos, internamente

Sí, crear anuncios gráficos receptivos nunca ha sido tan importante, especialmente porque hoy en día es más probable que nunca que su hermoso anuncio gráfico se vea en dispositivos móviles. De acuerdo con la investigación de Bannerflow de 2020, los anuncios gráficos móviles están superando por cierto margen a las computadoras de escritorio. Actualmente, casi dos tercios de las visualizaciones de anuncios gráficos se realizan en dispositivos móviles en Europa. Además, dado que los usuarios de dispositivos móviles pasan más de cuatro horas en sus teléfonos inteligentes todos los días, ese es un compromiso que un anunciante digital no puede permitirse ignorar. El viejo mundo de los banners estáticos, gifs y flash se acabó hace mucho tiempo, o al menos debería ser así.

¿Por qué debo crear publicidad gráfica HTML5?

¿Necesita más razones para producir publicidad gráfica HTML5? Para empezar, nuestro juego se trata de convertir y es competitivo. Todo el mundo está desesperado por llamar la atención: no logras cautivar y se acaba el juego. HTML5 ofrece oportunidades de diseño sin precedentes a través de medios enriquecidos y una amplia gama de formatos de anuncios. Si no está siguiendo las mejores prácticas para el diseño de banners, puede apostar a que la competencia lo hará. Además de esto, la publicidad gráfica está creciendo todo el tiempo en alcance, particularmente dentro de la programática.

Tomemos, por ejemplo, lo que está pasando en el Reino Unido. En 2020, los anunciantes del Reino Unido gastaron 6790 millones de libras esterlinas en publicidad programática, según un informe de eMarketer. La inversión en publicidad de display programática ahora representa el 92 % de toda la inversión en publicidad de display digital del Reino Unido, a pesar del impacto de la pandemia de Covid-19. ¡Y se espera que esta proporción alcance el 94,5 % para 2022 y represente 9010 millones de libras esterlinas! Producir mejores anuncios, a través de HTML5, para aprovechar al máximo este crecimiento debe ser una prioridad.

Además, con las empresas que ahora adoptan el pensamiento de "primero el móvil" en todo su marketing digital, asegurarse de que su sitio web, páginas de destino y banners respondan es un requisito mínimo. HTML5 le permite crear banners listos para dispositivos móviles, receptivos y ricos en funciones. En lugar de diseñar una campaña estática para escritorio y luego escalar cada banner individualmente, ¡puede escalar con HTML5!

Hace tiempo que la publicidad se volvió móvil y HTML5 es la forma de hacer los banners que necesita.

¿Cuál es el trato con HTML5?

Antes de que se adoptara universalmente HTML5, ejecutar una campaña publicitaria en diferentes dispositivos era un trabajo arduo. La creación manual de banners para todas las diferentes pantallas en las que podría aparecer el anuncio de banner era una tarea ardua. HTML5 es la forma óptima de hacer anuncios de banner tal como lo es para sitios web receptivos.

HTML5 es la última actualización del lenguaje de marcado de hipertexto. Es el lenguaje estándar utilizado para describir los contenidos y el diseño de las páginas web, incluidas las que son receptivas. HTML5 es importante en la publicidad en línea, ya que brinda la flexibilidad para ejecutar anuncios publicitarios en todos los dispositivos.

Proporciona tanto a los editores como a los anunciantes los medios para crear campañas publicitarias adaptables, a través de banners que se adaptan a todas las plataformas. A diferencia de, por ejemplo, usar flash (oh, qué pintoresco), esto significa que no tiene que crear cientos de versiones del mismo anuncio. Reducir la cantidad de versiones de anuncios también disminuirá la probabilidad de errores y aumentará la producción de banners.

Dentro de un anuncio de banner HTML5, el texto, las imágenes, el video y JavaScript se pueden ajustar de la misma manera que cualquier página web: son editables. Los anuncios de banner HTML5 también se optimizarán dinámicamente, por lo que el anuncio se ve perfecto en todas partes. ¡Además, los anuncios de banner HTML5 funcionan perfectamente bien en dispositivos móviles! Sin pérdida de funcionalidad tampoco, lo que significa que llegar a un público más amplio es fácil.

Hay dos formas de crear banners HTML5

Esencialmente, hay dos formas diferentes de crear anuncios publicitarios en línea hoy.

En primer lugar, usted mismo puede codificar manualmente los anuncios publicitarios para que respondan. Y sí, hay muchos tutoriales y plantillas en línea que le muestran cómo hacerlo. Sin embargo, el proceso es lento y significa que debe poseer un conocimiento decente de HTML5 y CSS. Además, por supuesto, ¡también debes tener el toque de un diseñador! Una rara combinación.

Alternativamente, puede usar una plataforma de gestión creativa como Bannerflow, que cuenta con un creador de anuncios diseñado para la automatización de la producción creativa. Estos ayudan a encargarse de la codificación por usted, haciendo que todos sus banners respondan con solo hacer clic en un botón. Además, como descubriremos, ofrecen muchas formas integradas de aprovechar HTML5. Estos pueden variar desde el desarrollo de impresionantes banners de video hasta banners dinámicos que incluyen fuentes de datos.

La realidad es que las plataformas de gestión creativa reducen el tiempo que se tarda en crear y escalar una campaña, mientras que la producción de banners HTML5 se centra firmemente en el diseño.

Creación de publicidad gráfica adaptable a HTML5

La creación de anuncios publicitarios adaptables a HTML5 es relativamente sencilla. Sin embargo, como todos los banners digitales, existen reglas y mejores prácticas a seguir. Al crear publicidad gráfica HTML5, vale la pena considerar:

Verifique los tamaños de sus banners HTML5

Al crear un diseño receptivo de HTML5, se requiere que los elementos tengan anchos variables similares a los que deben seguir los anuncios de banner convencionales. También puede usar la altura que desee, pero eso no significa que su anuncio permanecerá en esa altura. La mejor práctica al hacer pancartas receptivas es usar las mismas alturas que los tamaños de pancartas tradicionales. Esto es así para mantener la compatibilidad con los editores y las redes publicitarias.

Siempre diseñe (o modifique) banners HTML5 para los tamaños específicos que ofrecen las redes publicitarias y los editores. Por ejemplo, aquí hay una lista de tamaños que ofrece Google Ad Manager. Si basa sus anuncios de banner en estos tamaños, puede estar seguro de que la mayoría de los dispositivos mostrarán correctamente la creatividad de su anuncio cuando se publique.

Imágenes, diseño de banners y HTML5

Al hacer banners adaptables a HTML5, su control del diseño y las imágenes no tiene comparación. Los marcos para mensajes y animaciones son fáciles de controlar. ¡Pero no te vuelvas codicioso! Lo más probable es que su banner solo sea visible para el espectador entre 5 y 15 segundos, así que aproveche al máximo ese tiempo y concéntrese en sus elecciones de diseño.

¡Y aquí es donde las cosas se ponen interesantes! Al usar algunas plataformas de gestión creativa, como Bannerflow, las imágenes utilizadas en su banner HTML5 se ajustan y comprimen automáticamente. Esto significa que el tamaño y el peso de la imagen de su banner están ajustados para adaptarse a las redes publicitarias.

Sin embargo, incluso con toda esta increíble tecnología, vale la pena tratar de mantener cualquier imagen en un tamaño máximo de 4000 × 4000 (ancho y alto) en píxeles. Además, siempre es mejor editar archivos sin procesar súper grandes si superan los 4000 × 4000 para lograr mejores resultados. De hecho, es una buena práctica tratar de usar siempre las imágenes más pequeñas que puedas. Esto ayudará a reducir aún más el peso de una pancarta. Cuanto más pequeña sea la imagen, mejor (¡pero sin reducir la calidad, por supuesto!).

También vale la pena seleccionar el mejor formato de imagen, para el tipo de imagen que está utilizando en su banner. Por ejemplo, siempre se debe usar un JPEG para un fondo. Mientras que si es transparente o un objeto, use un PNG. Para tipos de logotipos y objetos dibujados (excepto fotos) SVG: tamaño de archivo pequeño pero bueno para mantener la nitidez cuando se expande. Una combinación de tipos de archivos de imagen a menudo proporcionará mejores resultados.

Pero recuerda, ¡hay ciertas cosas que no hace falta decir! Como asegurarse de que su imagen principal esté completamente enfocada. Mientras que un diseño limpio y simple siempre funciona mejor.

Escalado, versionado y traducción

Incluso al crear banners adaptables a HTML5 que se optimizan automáticamente, debe crear tantas versiones como sea posible para llegar a la mayor cantidad de personas posible. Cuantos más tamaños de banner, mejor. Según el tipo de medio, cuantos más banners tenga, más probable es que gane cualquier licitación programática.

La mejor práctica obvia es usar una plataforma de administración creativa y un creador de anuncios que sea eficiente y rápido cuando se trata de escalar y crear múltiples versiones de banners HTML5. Mejor aún, es mucho más fácil trabajar en múltiples mercados si puede duplicar, traducir y hacer variantes de su publicidad gráfica.

También es fácil cambiar el contenido de los banners HTML5. Además, poder duplicar y escalar campañas en segundos significa que es mucho más fácil programar diferentes variantes para diferentes días. En pocas palabras, los banners adaptables a HTML5 son excelentes para usar en servicios de automatización, como la programación.

Banners de medios enriquecidos

Sin HTML5 no habría banners de medios enriquecidos. Sería imposible hacer banners que interactúen con los espectadores, que respondan y funcionen en múltiples dispositivos. Los anuncios de medios enriquecidos generan niveles más altos de compromiso y son buenos para su marca. Desde formularios de registro, barras de búsqueda hasta juegos en banner, HTML5 permite a los especialistas en marketing digital atraer a los espectadores de diversas maneras.

Pero tenga cuidado con la forma en que usa los banners de medios enriquecidos. Su eficacia depende en gran medida del formato de banner que elija utilizar. No intente agregar demasiada información ni hacerla demasiado compleja. La interacción no debe ser más de uno o dos pasos; trate de concentrarse en una cosa y hacerlo rápido y más fácil para el espectador.

Por ejemplo, un formulario en línea debe contener el mínimo de interacciones requeridas; además, comienza en el banner y termina en la página de destino. La clave para una buena campaña de banners Rich Media HTML5 es que debe ser seria en su ejecución e intuitiva en su diseño.

Hoy en día, puede usar funciones como poder pagar directamente por un producto que aparece en un banner. O como se ve en el anuncio gráfico arriba de los chatbots: ¡con banners de medios enriquecidos, las aplicaciones futuras son infinitas!

Publicidad gráfica en video y HTML5

Dentro de la publicidad gráfica, el uso del video está creciendo todo el tiempo. Solo en Europa, la visualización de video en línea se está multiplicando tres veces y media más rápido que la visualización sin video. El uso de video en su anuncio gráfico HTML5 lo ayuda a parecer más auténtico y conectarse con los espectadores, lo que a su vez ayuda con la conversión. HTML5 también hace que la creación de banners que usan video sea fácil de producir en masa.

Mediante el uso de banners HTML5, tiene muchas opciones con respecto a cómo usa el video. En un nivel básico, un video se puede usar como fondo para un banner. O, de forma más creativa, puede formar parte de la animación del banner. Por ejemplo, un tráiler que termina con un marco de llamada a la acción (CTA).

Producir anuncios gráficos de video es fácil

Uno de los mejores consejos al usar videos es asegurarse siempre de que su logotipo esté visible en el banner de video HTML5. Comience con su mensaje principal y asegúrese de que el video se repita. Trate de tener también un máximo de 1 a 3 etapas en el video: capte la atención de los espectadores, profundice el compromiso y siempre termine con un CTA. Siempre configure sus videos en "silencio" y tenga los subtítulos habilitados (si es necesario).

HTML5, combinado con una buena plataforma de administración creativa, debería significar que tampoco se requiere codificación. Esto significa que muchas ideas pueden convertirse en realidad sin necesidad de hacer nada en el backend del banner.

Además, la gente está viendo banners de video en cantidades cada vez mayores en sus teléfonos móviles. Por lo tanto, asegurarse de tener un anuncio de visualización de video HTML5 receptivo que esté listo para dispositivos móviles es una obviedad.

Además, si tiene la opción de exportar sus banners de video HTML5 en formato mp4, puede cargar estos anuncios de videos en las redes sociales. Una manera fácil para que los equipos internos creen anuncios de video, reutilicen activos HTML5 y amplíen el alcance de sus campañas digitales. Así es como Creative Studio, el creador de anuncios en Bannerflow, lo hace todo tan fácil:

Creación de anuncios de banner adaptables a HTML5 para móviles

A la hora de crear anuncios de display adaptables a HTML5 para móviles, se trata de utilizar el formato adecuado para empezar. En lugar de reducir un banner de escritorio a un tamaño móvil, diseñe su anuncio específicamente para dispositivos móviles. En algunos círculos, dada la popularidad y el compromiso de los dispositivos móviles, se considera que el diseño de todas las campañas pensando primero en los dispositivos móviles es el camino a seguir.

Vale la pena recordar que las proporciones de los banners HTML5 se escalarán para adaptarse a cualquier pantalla. Sin embargo, sigue siendo una buena práctica diseñar sus banners teniendo en cuenta los formatos móviles seleccionados.

Un aspecto del diseño de banners móviles a considerar es asegurarse de que toda la copia sea legible. Sí, esto incluye el tamaño de la fuente, pero ¿también ha considerado su mensaje? Es posible que deba agregar más marcos a su banner HTML5 móvil para expresar el mismo mensaje que un banner de escritorio. Nuevamente, depende del formato que use, pero trate de evitar comprimir más de lo que debería en un solo cuadro.

Además, suelte grandes cuerpos de texto y concéntrese en el impacto de sus imágenes. Además, dado el tamaño de la pantalla, su anuncio debe ser atractivo y no intrusivo. La publicidad digital pasó a ser móvil hace mucho tiempo: vaya donde están sus consumidores y produzca fantásticos banners adaptables a HTML5 para ellos.

Creatividades dinámicas

Sin HTML5, no puede crear ni mantener atractivos anuncios de banner dinámicos basados ​​en datos. Limítese a producir solo los banners más básicos y se verá limitado a un solo mensaje. Mientras que un competidor puede ofrecer potencialmente 2000. Sí, en serio: a través de actualizaciones constantes de fuentes de datos y automatización. Un banner adaptable a HTML5 puede entregar 2000 mensajes en el tiempo que se tarda en producir uno de forma estática.

Como se mencionó, la belleza de HTML5 es que le proporciona un control total. Lo mismo ocurre con un banner conectado a una fuente de datos, pero más aún: tiene la opción de actualizar el banner en tiempo real.

Personalice sus anuncios gráficos receptivos

Por ejemplo, tome una campaña de banner HTML5 que muestre los artículos más populares en una tienda de comercio electrónico. Cuando un artículo está agotado, esto se refleja automáticamente en la lista de productos que se muestra en el banner dinámico. ¡Esto es genial tanto para los espectadores como para el negocio del comercio electrónico!

La misma idea puede ser utilizada por empresas de iGaming. Por ejemplo, las probabilidades pueden cambiar dinámicamente, dentro de un banner, durante un partido. Hay muchos tipos diferentes de campañas personalizadas que puede usar con creatividades dinámicas basadas en HTML5.

Además, es una buena práctica actualizar un feed de productos en tiempo real. Después de todo, debe pensar de manera crítica sobre el formato en el que se muestran los datos. Asegurarse de que cualquier dato que use en su banner sea comprensible para los espectadores es clave; esto podría variar desde fechas y precios hasta cuotas. Esto también puede variar según los mercados y los idiomas. Por ejemplo, la forma en que los estadounidenses escriben las fechas es diferente de cómo escriben las fechas los suecos. O las diferentes formas en que británicos y suecos entienden las probabilidades de apuestas.

Un último consejo: un buen creador de anuncios, como Creative Studio, o una plataforma de administración de creatividades facilitará la configuración de filtros y opciones de clasificación al manipular un feed de datos.

Próximos pasos: ¡cree sus mejores anuncios de banner responsivos!

Es de esperar que, a estas alturas, se haya dado cuenta de que la creación de anuncios de banner adaptables a HTML5 es la mejor opción para sus necesidades de publicidad gráfica digital. Con tanta flexibilidad, visibilidad en múltiples pantallas y plataformas, simplemente no hay mejor tecnología para los banners. Mejores anuncios, mejores diseños, mejores métricas: todo es posible.

Por último, con las plataformas de administración creativa que le ofrecen la capacidad de producir campañas para las principales redes publicitarias, así como las redes sociales, usar una es una forma simple de mejorar la productividad de su equipo interno. Tardarse días (¡o incluso semanas!) en duplicar y escalar campañas manualmente ya no es una opción.

En una era de múltiples mercados, optimización en vivo y transparencia, la adopción de HTML5 está ayudando a los especialistas en marketing a lograr el rendimiento publicitario que anhelan.

Si está interesado en saber cómo una plataforma como Bannerflow puede ayudar a producir publicidad increíble, póngase en contacto.