Encuentra los tips más importantes para gestionar y desarrollar Banners HTML5 respecto al cambio obligatorio a este nuevo formato

2. Y CLARO, TRABAJAMOS CON FLASH…
PROGRAMA
09:30
¿Que es bannercity?
Antecedentes Generales
10:00
Coffee Break
10:25
Tips para enfrentar el cambio
Tips para enfrentar el cambio (Marcas)
Tips para enfrentar el cambio (Agencia de medios)
Tips para enfrentar el cambio (Digital / Publicidad)
Tips para enfrentar el cambio (Diseñadores / Desarrolladores)
11:45
La solución Bannercity
Ronda de preguntas.

3. Y CLARO, TRABAJAMOS CON FLASH…
¿QUÉ ES
BANNERCITY?

4. Mayo 2013 Agosto 2013 Octubre 2013 Septiembre 2014 Agosto 2015

5. CLARO, TRABAJAMOS CON FLASH…TODAVÍA.

6. PERO DESDE SEPTIEMBRE
DEL 2015
HTML5 SERÁ EL NUEVO
FORMATO STANDARD
PARA EL DESARROLLO
DE PIEZAS BANNERS

8. LOS QUE HAN DICHO NO A FLASH

9. FIREFOX YA LO HIZO.
• JUNIO 2015 Y SIN PREVIO AVISO.
• FIREFOX SOLICITÓ A ADOBE RESOLVER
PROBLEMAS DE SEGURIDAD.
• ESTUVO 1 MES SIN REPRODUCIR FLASH.

10. SEGURIDAD AHORRO ENERGÉTICO

11. ¿CUÁNDO?
 1 DE SEPTIEMBRE 2015
 OCTUBRE 2015
 DE AQUÍ A 9 MESES MÁS, PAULATINAMENTE
“En Septiembre de 2015, esta configuración será habilitada por defecto de manera de que los usuarios
de Chrome puedan disfrutar de un rendimiento más rápido y puedan ver más contenido antes de tener
que cargar la batería de sus dispositivos. Este cambio afectará la mayoría de las creatividades Flash de
tamaño estándar en Chrome y alineará a Chrome con otros navegadores como Safari, que ya tienen
habilitada una función similar. Pueden leer más sobre esta configuración de Chrome en este artículo
del centro de ayuda.
Cómo este cambio afecta sus anuncios de Google:
Como resultado de este cambio AdWords dejará de servir anuncios Flash en Chrome desde el 1 de
Septiembre. Los anuncios Flash no servidos por Google (anuncios que utilizan un servidor de terceros)
continuarán mostrándose en Chrome pero verán una reducción significativa de los CTRs dado que los
usuarios deberán hacer clic una vez para ver el anuncio y nuevamente para ir a la página de destino o
interactuar con el anuncio.”

12. ¿A QUIÉNES AFECTA?
https://statcounter.com/
Mundial / Navegadores / Escritorio /Últimos 12 meses

13. ¿A QUIÉNES AFECTA?
https://statcounter.com/
Chile / Navegadores / Escritorio / Últimos 12 meses

14. ¿COMO SE VERÁ EL BLOQUEO
DE FLASH EN CHROME?

15. ¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?

16. ¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?

17. ¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?

18. ¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?

19. ¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?

20. IMPACTO DEL CAMBIO EN MEDIOS DIGITALES
CTR promedio estándar banners display.
CTR = 0,20%
CTR = 0,10%

21. El problema directo para la publicidad online:
• Performance de campañas
• Baja de inventario
• Aumento de pujas
• Aumentos de costos (CPC - CPM - CPL)
• Baja de inversión
IMPACTO DEL CAMBIO EN MEDIOS DIGITALES

22. Coffee Break

23. TIPS PARA
ENFRENTAR
EL CAMBIO

24. DIFERENCIAS ENTRE AMBOS FORMATOS
FLASH HTML5
Solo para equipos Desktop Desktops y dispositivos
Tecnología propietaria Standard (open source)
Replicación más rápida de piezas Replicación más lenta de piezas
Software de Pago Gratis
Limitado hasta su última versión Oportunidades de mejora constante
Perfil de Diseñador Gráfico Perfil de Desarrollador Web
Banner en 1 archivo Banner con varios archivos

25. CÓMO FUNCIONARÁ LA IMPLEMENTACIÓN

26. La Advertencia de Google Adwords
Peso de todos los archivos compilados y comprimidos en zip: 150 kilos

27. COMPARATIVA VISUAL DE BANNERS FLASH Y HTML5

28. TIPS PARA
ENFRENTAR EL
CAMBIO PARA
LAS MARCAS

29. TIPS PARA ENFRENTAR EL CAMBIO PARA MARCAS
• Considera animar tus banners ( Tu competencia lo animará ).
• Estudios avalan que los banners animados tienen mayores
resultados que los estáticos.
• Impacto en el costo de las piezas.
• Producción HTML5 afectará los tiempos de replicación.
• Considera experiencias interactivas para contribuir al branding
digital con Html5
• Enriquece el engagement en smartphones y tablets.

30. TIPS PARA
ENFRENTAR EL
CAMBIO DESDE LA
AGENCIA DE
MEDIOS

31. TIPS PARA ENFRENTAR EL CAMBIO DESDE LA AGENCIA DE MEDIOS
Consultar alternativas TAGS a desarrolladores de banners en
caso que el adserver no soporte HTML5.
Definir métricas con que se evaluará el plan de medios.
Weborama, Sizmek, Google Adwords, DoubleClick, DFP son
algunos adservers que soportan HTML5.
Restructurar especificaciones técnicas en grillas de medios.
Solicitar a los medios especificaciones claras acerca de la
implementación de piezas HTML5 junto con sus clicktags.
*Hasta el momento Google Adwords acepta piezas Html5 solo cuando se hace desde un MCC con facturación.

32. TIPS PARA
ENFRENTAR EL
CAMBIO DESDE LA
AGENCIA DIGITAL /
PUBLICIDAD

33. CONSIDERAR LOS FORMATOS MÁS USADOS Y DE MEJORES OPCIONES MOBILE
728x90
300x250
336x280
300x600 160x600
320x100

35. AÑADE UN CARÁCTER DE URGENCIA / VALOR

36. PIENSA EN MOBILE
Revisar diagramaciones y diseños en las piezas
que consideren versiones mobile
DEMASIADO CONTENIDO
CONTENIDO IDEAL

37. NO USES DEMASIADAS IMÁGENES INNECESARIAMENTE
Cantidad de imágenes:
• Fondo.jpg
• Boton.jpg
• Brillobtn.pngl
• Logo.png
• Dispositivos.png
Cantidad de imágenes:
• FondoTxt.jpg
• Boton.jpg
• Logo.png
Cantidad de imágenes:
• Dispositivos.svg
• Logo.svg

38. LA MUERTE DEL LOOP
CONSIDERAR QUE EL ÚLTIMO FRAME DE LA PIEZA LLEVE LA
INFORMACIÓN CLAVE QUE SE QUIERE ENTREGAR.
FIN BANNER SIN CALL TO ACTION BANNER CON CALL TO ACTION

39. REALIZA DISEÑOS ACORDE A LA PÁGINA DE DESTINO

40. EXPLORA
Y SÉ CREATIVO.

41. TIPS PARA ENFRENTAR EL CAMBIO
PARA DISEÑADORES /
DESARROLLADORES.

42. EL PROGRAMA IDEAL
PARA HACER
BANNERS HTML5:

43. EL QUE A MÁS TE ACOMODE
Adobe Edge Swiffy 1.1.1 Adobe Flash cc

44. ANTES, LO QUE NECESITABAS PARA HACER BANNERS:

45. Lo que necesitas ahora:
Herramienta de creación
de imágenes
HTML5 Herramienta de
Animación
Convertidores Flash Librerías JavaScript
Compresores de Código Compresores de Imagen Generadores de Sprites Fuentes

46. Revisar compatibilidades respecto a degradados con css.
Checar que colores corporativos no necesariamente serán
idénticos en la web.
Considerar versiones de los colores representados en desktop y
en mobile
UTILIZA LOS COLORES ADECUADOS.

47. IMPLEMENTACIÓN DEL CLICK TAG.
Antes había una forma de insertar el
click tag. Ahora hay varias:
• Google Web Editor utiliza el
componente “pulsación” más un
evento de salida.
• Inserción de función clicktag en el
código html (depende de cada
medio).
• URL Final (sin click tag).

48. COMIENZA A USAR EN REEMPLAZO DE PNG

49. • PREFIERE GOOGLE WEB FONTS.
• BUSCA FONTS ALTERNATIVAS SIMILARES A LAS CORPORATIVAS EN GWF.
• SI USAS FUENTES CORPORATIVAS, IDEAL SEAN EN FORMATO WEB.
• USA FUENTES TRAZADAS.

50. HAZ EL “MASTER” PENSANDO EN LA
REPLICACIÓN Y EN LA
DIAGRAMACIÓN MULTIDISPOSITIVO.

51. INNOVACIONES EN BANNERS HTML5

52. RESUMEN GENERAL
• Aumento de tiempo de replicación de piezas
• Si de todas maneras se decide construir y publicar piezas en flash, esto afectará
considerablemente en el CTR de la campaña
• Ya no hay replicas…hay masters
• Aumento de skills por parte de los desarrolladores
• Aumento considerable de pesos kb por pieza
• Consideración un elemento extra en los presupuestos (hosting)
• Aumento de costos de desarrollo por pieza
• Al ser HTML5, las piezas serán 100% responsivas
• HTML5 permite una amplia gama de posibilidades de interactividad

53. DESPUES DE TODO ESTO,
¿QUÉ HACER?

54. LA SOLUCIÓN
BANNERCITY

55. “Necesitamos al menos 48 horas para entregar las piezas”
“¿Qué significa eso del clicktag?”
“Otra vez llegaron mal las piezas”
“¡El adserver me las rechazó! ”
“…está como fome el banner…”
“¿porque se ve tan pixelado?”
“ya es muy tarde y se fueron todos los diseñadores…¿te puedo enviar los banners
mañana a ultima hora?”
“son las 10:00 de la noche…aun no llegan las piezas”
“No puedo implementar la campaña”
PARA QUE NO VUELVAS A ESCUCHAR ESTO:

56. • Servicio de HTML5 ADServer propio que nos permite crear nuestros propios TAGS.
• Comunicación y gestión constante en la actualización de especificaciones de medios.
• Sistema CLOUD de Banners 24/7.
• Profesionales dedicados exclusivamente a la generación de banners.
• Más de 13.500 banners desarrollados hasta la fecha.
• Ambiente de prueba de banners.

57. RONDA DE PREGUNTAS

58. BANNERS HTML5:¿ESTÁS LISTO?
www.bannercity.click