Publicitate grafică cu HTML5 – Cum să creați anunțuri receptive

Publicat: 2018-08-28

În acest articol, explicăm de ce anunțurile banner adaptabile HTML5 sunt o necesitate pentru toți agenții de publicitate digitale. De la designeri la specialiști digitali, de la agenții la echipe interne, publicitatea grafică HTML5 este acum formatul standard de banner.

În special, având un număr din ce în ce mai mare de dispozitive și platforme pentru a răspunde, a fi capabil să se adapteze la comportamentele spectatorilor este crucial. Dacă anunțul dvs. banner nu este compatibil, nu poate răspunde la modificările dimensiunii ecranului sau funcționează pe mobil, atunci aveți probleme. Publicitatea grafică adaptabilă HTML5 oferă flexibilitatea și tehnologia de care aveți nevoie pentru ca marca dvs. să prospere online.

Mai exact, HTML5 oferă agenților de marketing digital capacitatea de a:

  • Scala rapid la mai multe formate și dimensiuni
  • Deține controlul suprem asupra designului
  • Creați cu ușurință variante de anunțuri și traduceri
  • Produceți în masă bannere rich media
  • Exploați creșterea afișărilor video și mobile
  • Actualizați în mod dinamic bannerele cu fluxuri de date
  • Colaborați eficient între echipe, la nivel intern

Da, crearea de reclame grafice adaptabile nu a fost niciodată mai importantă, mai ales că astăzi frumosul tău anunț grafic este mai probabil ca niciodată să fie vizualizat pe mobil. Conform cercetării Bannerflow din 2020, anunțurile grafice mobile depășesc cu oarecare marjă desktopul. Aproape două treimi din vizionările anunțurilor grafice sunt destinate dispozitivelor mobile din Europa în prezent. În plus, utilizatorii de telefonie mobilă petrec peste patru ore pe smartphone-urile lor în fiecare zi – aceasta este implicarea pe care un agent de publicitate digital nu își poate permite să o ignore. Vechea lume a bannerelor statice, gif-urilor și flash s-a încheiat de mult – sau cel puțin ar trebui să fie.

De ce ar trebui să creez publicitate grafică HTML5?

Aveți nevoie de mai multe motive pentru a produce publicitate grafică HTML5? Pentru început, jocul nostru se referă la conversie și este competitiv. Toată lumea este disperată după atenție – nu reușești să captivezi și jocul s-a terminat. HTML5 oferă oportunități de design de neegalat prin intermediul rich media și a unei game întregi de formate de anunțuri. Dacă nu urmați cele mai bune practici pentru designul bannerelor, puteți paria că un concurent va face. În plus, publicitatea grafică crește în permanență, în special în domeniul programatic.

Luați, de exemplu, ceea ce se întâmplă în Marea Britanie. În 2020, agenții de publicitate din Marea Britanie au cheltuit 6,79 miliarde de lire sterline pe publicitate programatică, potrivit unui raport eMarketer. Cheltuielile pentru publicitate grafică programatică reprezintă acum 92% din toate cheltuielile publicitare digitale din Regatul Unit – în ciuda impactului pandemiei de Covid-19. Și se așteaptă că această proporție va ajunge la 94,5% până în 2022 și va reprezenta 9,01 miliarde de lire sterline! Producerea de anunțuri mai bune – prin HTML5 – pentru a profita la maximum de această creștere trebuie să fie o prioritate.

În plus, cu companiile care adoptă acum gândirea „în primul rând pe mobil” în tot marketingul lor digital, este o cerință minimă să vă asigurați că site-ul dvs., paginile de destinație și bannerele sunt receptive. HTML5 vă permite să creați bannere pregătite pentru dispozitive mobile, receptive și bogate în funcții. În loc să proiectați o campanie statică pentru desktop și apoi să scalați fiecare banner individual, puteți în schimb să creșteți cu HTML5!

Publicitatea a devenit de mult mobilă, iar HTML5 este modalitatea de a crea bannerele de care aveți nevoie.

Care este treaba cu HTML5?

Înainte ca HTML5 să fie adoptat universal, rularea unei campanii publicitare pe diferite dispozitive era o muncă grea. Crearea manuală de bannere pentru toate ecranele pe care ar putea apărea bannerul publicitar a fost un slog. HTML5 este modalitatea optimă de a crea reclame banner, așa cum este pentru site-urile web receptive.

HTML5 este cea mai recentă actualizare a Hypertext Markup Language. Este limbajul standard folosit pentru a descrie conținutul și designul paginilor web, inclusiv cele care sunt responsive. HTML5 este important în publicitatea online, deoarece oferă flexibilitatea de a difuza anunțuri banner pe dispozitive.

Oferă atât editorilor, cât și agenților de publicitate mijloacele de a crea campanii publicitare adaptabile, prin bannere care se potrivesc pe toate platformele. Spre deosebire de, să spunem că folosiți flash (oh, cât de ciudat), asta înseamnă că nu trebuie să creați sute de versiuni ale aceluiași anunț. Reducerea numărului de versiuni de anunțuri va reduce, de asemenea, probabilitatea de erori și va crește producția de bannere.

În cadrul unui banner publicitar HTML5, textul, imaginile, videoclipurile și JavaScript sunt ajustabile în același mod ca orice pagină web - sunt editabile. Anunțurile banner HTML5 se vor optimiza și ele dinamic, astfel încât anunțul să arate perfect peste tot. În plus, anunțurile banner HTML5 funcționează perfect pe dispozitivele mobile! Fără nicio pierdere a funcționalității, ceea ce înseamnă că este ușor să ajungeți la un public mai larg.

Există două moduri de a construi bannere HTML5

În esență, există două moduri diferite prin care puteți construi anunțuri banner online astăzi.

În primul rând, puteți codifica manual anunțurile banner pentru a le face receptive. Și da, există o mulțime de tutoriale și șabloane online care vă arată cum să faceți acest lucru. Cu toate acestea, procesul este lent și înseamnă că trebuie să aveți cunoștințe decente despre HTML5 și CSS. În plus, bineînțeles că trebuie să ai și flare de designer! O combinație rară.

Alternativ, puteți utiliza o platformă de gestionare a creațiilor, cum ar fi Bannerflow, care include un creator de anunțuri orientat pentru automatizarea producției creative. Acestea vă ajută să vă ocupați de codificare - făcând toate bannerele dvs. receptive cu un clic pe un buton. În plus, după cum vom descoperi, oferă o mulțime de modalități încorporate de a profita de HTML5. Acestea pot varia de la dezvoltarea de bannere video minunate la bannere dinamice care includ fluxuri de date.

Realitatea este că platformele de management creativ reduc timpul necesar pentru construirea și scalarea unei campanii, punând în același timp accent pe design pentru producția de bannere HTML5.

Crearea de reclame grafice adaptabile HTML5

Crearea de anunțuri banner adaptabile HTML5 este relativ simplă. Cu toate acestea, la fel ca toate bannerele digitale, există reguli și cele mai bune practici de urmat. Când construiți publicitate grafică HTML5, merită luat în considerare:

Verificați dimensiunile bannerelor dvs. HTML5

Când creați un aspect adaptabil HTML5, este necesar ca elementele să aibă lățimi variabile similare cu ceea ce trebuie să urmeze anunțurile banner convenționale. De asemenea, puteți utiliza orice înălțime doriți – dar nu înseamnă că anunțul dvs. va rămâne la acea înălțime. Cea mai bună practică atunci când creați bannere receptive este să utilizați aceleași înălțimi ca și dimensiunile bannerelor tradiționale. Acest lucru este pentru a menține compatibilitatea cu editorii și rețelele publicitare.

Proiectați (sau modificați) întotdeauna bannere HTML5 pentru dimensiunile specifice oferite de rețelele publicitare și de editori. De exemplu, iată o listă de dimensiuni oferite de Google Ad Manager. Dacă vă bazați anunțurile banner pe aceste dimensiuni, puteți fi sigur că majoritatea dispozitivelor vor afișa corect reclamele dvs. atunci când sunt publicate.

Imagini, design banner și HTML5

Când creați bannere responsive HTML5, controlul dvs. asupra designului și imaginilor este de neegalat. Cadrele pentru mesaje și animațiile sunt ușor de controlat. Dar nu fi lacom! Bannerul dvs. va fi cel mai probabil vizibil doar pentru spectator între 5 și 15 secunde - așa că profitați la maximum de acest timp și concentrați-vă asupra alegerilor dvs. de design.

Și aici lucrurile devin interesante! Când utilizați unele platforme de management al creației, cum ar fi Bannerflow, imaginile utilizate în bannerul dvs. HTML5 sunt ajustate și comprimate automat. Aceasta înseamnă că dimensiunea și greutatea imaginii pentru banner-ul dvs. sunt ajustate pentru a se potrivi rețelelor publicitare.

Cu toate acestea, chiar și cu toată această tehnologie uimitoare, merită să încercați să păstrați orice imagine la o dimensiune maximă de 4000×4000 (lățime și înălțime) în pixeli. În plus, este întotdeauna cel mai bine să editați fișierele brute foarte mari dacă depășesc 4000×4000 pentru a obține rezultate mai bune. De fapt, cea mai bună practică este să încercați să utilizați întotdeauna cele mai mici imagini posibile. Acest lucru va ajuta la reducerea în continuare a greutății unui banner. Cu cât imaginea este mai mică, cu atât mai bine (dar fără a reduce calitatea desigur!).

De asemenea, merită să selectați cel mai bun format de imagine, pentru tipul de imagine pe care îl utilizați în bannerul dvs. De exemplu, un JPEG ar trebui să fie întotdeauna folosit pentru un fundal. În timp ce, dacă este transparent sau un obiect, atunci utilizați un PNG. Pentru tipurile de logo și obiecte desenate (cu excepția fotografiilor) SVG-uri – mici în dimensiunea fișierului, dar bune la păstrarea clarității atunci când sunt extinse. O combinație de tipuri de fișiere imagine va oferi adesea rezultate mai bune.

Dar amintiți-vă, există anumite lucruri care sunt de la sine înțeles! Cum ar fi să vă asigurați că imaginea dvs. principală este focalizată pe deplin. În timp ce, un design curat, simplist funcționează întotdeauna cel mai bine.

Scalare, versiune și traducere

Chiar și atunci când creați bannere responsive HTML5 care se optimizează automat, trebuie să creați cât mai multe versiuni, pentru a ajunge la cât mai mulți oameni. Cu cât bannerele sunt mai mari, cu atât mai bine. În funcție de tipul de media, cu cât aveți mai multe bannere, cu atât este mai probabil să câștigați orice licitație programatică.

Cea mai bună practică evidentă este să folosiți o platformă de gestionare a creațiilor și un creator de anunțuri care este eficient și rapid atunci când vine vorba de scalarea și crearea mai multor versiuni de bannere HTML5. Mai bine, este mult mai ușor să lucrați pe mai multe piețe dacă puteți duplica, traduce și face variante ale reclamei dvs. grafice.

De asemenea, este ușor să comutați conținutul în bannere HTML5. În plus, posibilitatea de a duplica și extinde campaniile în câteva secunde înseamnă că este mult mai ușor să programați diferite variante pentru zile diferite. Pe scurt, bannerele HTML5 responsive sunt excelente pentru utilizarea în serviciile de automatizare, cum ar fi programatice.

Bannere rich media

Fără HTML5 nu ar exista bannere rich media. Ar fi imposibil să faci bannere care să interacționeze cu spectatorii, care să fie receptivi și să funcționeze pe mai multe dispozitive. Reclamele rich media generează un nivel mai ridicat de implicare și sunt bune pentru marca dvs. De la formulare de înscriere, bare de căutare, până la jocuri în banner, HTML5 permite agenților de marketing digital să atragă spectatorii într-o varietate de moduri.

Dar aveți grijă la modul în care utilizați bannerele rich media. Eficacitatea lor depinde foarte mult de formatul de banner pe care alegeți să îl utilizați. Nu încercați să adăugați prea multe informații sau să le faceți prea complexe. Interacțiunea ar trebui să fie nu mai mult de unul sau doi pași; încercați să vă concentrați pe un singur lucru și să faceți acest lucru rapid și ușor pentru spectator.

De exemplu, un formular online ar trebui să conțină minimum de interacțiuni necesare – mai mult, apoi începe în banner și se termină pe pagina de destinație. Cheia unei campanii bune de bannere HTML5 rich media este că trebuie să fie serioasă în execuție și intuitivă în design.

Astăzi, puteți utiliza funcții precum posibilitatea de a plăti direct pentru un produs prezentat într-un banner. Sau, așa cum se vede în anunțul afișat de mai sus chatbot - cu bannere rich media, aplicațiile viitoare sunt nesfârșite!

Publicitate grafică video și HTML5

În cadrul publicității grafice, utilizarea video este în continuă creștere. Numai în Europa, afișarea video online se înmulțește de trei ori și jumătate mai rapid decât afișarea non-video. Folosirea videoclipurilor în anunțul grafic HTML5 vă ajută să arătați mai autentic și să vă conectați cu spectatorii, ceea ce, la rândul său, ajută la conversie. HTML5 face, de asemenea, crearea de bannere care utilizează videoclipuri ușor de produs în masă.

Prin utilizarea bannerelor HTML5 aveți multe opțiuni în ceea ce privește modul în care utilizați videoclipul. La un nivel de bază, un videoclip poate fi folosit ca fundal pentru un banner. Sau mai creativ, poate face parte din animația bannerului. De exemplu, o trailer care se termină cu un cadru de îndemn (CTA).

Producerea de anunțuri video afișate este ușoară

Câteva sfaturi de top atunci când utilizați videoclipuri sunt să vă asigurați întotdeauna că logo-ul dvs. este vizibil în bannerul video HTML5. Începeți cu mesajul principal și asigurați-vă că videoclipul se repetă. Încercați să aveți și în videoclip maximum 1-3 etape: atrageți atenția spectatorilor, aprofundați implicarea și terminați întotdeauna cu un CTA. Setați întotdeauna videoclipurile la „silențios” și activați subtitrările (dacă este necesar).

HTML5, combinat cu o platformă bună de management creativ, ar trebui să însemne că nu este necesară nicio codificare. Aceasta înseamnă că o mulțime de idei pot deveni realitate fără a fi nevoie să faceți nimic în backend-ul bannerului.

În plus, oamenii urmăresc bannere video în număr tot mai mare pe telefoanele lor mobile. Prin urmare, să vă asigurați că aveți un anunț grafic HTML5 adaptabil, pregătit pentru dispozitive mobile, este deloc o idee.

În plus, dacă aveți opțiunea de a exporta bannere video HTML5 în format mp4, puteți încărca aceste anunțuri video pe rețelele sociale. O modalitate ușoară pentru echipele interne de a crea anunțuri video, de a reutiliza materiale HTML5 și de a extinde acoperirea campaniilor lor digitale. Iată cum creatorul de anunțuri din Bannerflow, Creative Studio face totul atât de ușor:

Crearea de anunțuri banner adaptabile HTML5 pentru mobil

Atunci când creați anunțuri grafice adaptabile HTML5 pentru mobil, totul este să folosiți formatul potrivit pentru început. În loc să reduceți un banner pentru desktop la o dimensiune mobilă, proiectați-vă anunțul special pentru mobil. În unele cercuri, având în vedere popularitatea și implicarea dispozitivelor mobile, proiectarea tuturor campaniilor în primul rând pentru dispozitive mobile este considerată calea de urmat.

Merită să ne amintim că proporțiile bannerelor HTML5 se vor scala pentru a se potrivi oricărui ecran. Cu toate acestea, este încă cea mai bună practică să vă proiectați bannerele ținând cont de formatele mobile selectate.

Un aspect al designului bannerului mobil de luat în considerare este să vă asigurați că toate copiile sunt lizibile. Da, aceasta include dimensiunea fontului, dar ați luat în considerare și mesajul dvs.? Poate fi necesar să adăugați mai multe cadre la bannerul dvs. HTML5 mobil pentru a exprima același mesaj ca un banner pentru desktop. Din nou, depinde de formatul pe care îl utilizați, dar încercați să evitați să strângeți mai mult decât ar trebui într-un singur cadru.

În plus, aruncați corpuri mari de copii și concentrați-vă asupra impactului imaginilor dvs. De asemenea, având în vedere dimensiunea ecranului, anunțul dvs. trebuie să fie captivant și nu intruziv. Publicitatea digitală a devenit mobilă în urmă cu epoci – mergeți acolo unde sunt consumatorii dvs. și produceți bannere minunate HTML5 responsive pentru ei.

Reclame dinamice

Fără HTML5 nu puteți crea și menține anunțuri banner dinamice convingătoare, bazate pe date. Limitați-vă la producerea celor mai elementare bannere și veți fi limitat la un singur mesaj. În timp ce, un concurent poate livra 2000. Da, într-adevăr: prin actualizări consistente ale fluxului de date și automatizare. Un banner responsive HTML5 poate livra 2000 de mesaje în timpul necesar pentru a produce unul static.

După cum am menționat, frumusețea HTML5 este că vă oferă control complet. Același lucru este valabil și pentru un banner conectat la un flux de date – dar mai mult: aveți opțiunea de a actualiza bannerul în timp real.

Personalizați-vă anunțurile grafice adaptabile

De exemplu, luați o campanie banner HTML5 care arată cele mai populare articole dintr-un magazin de comerț electronic. Când un articol este epuizat, acest lucru se reflectă automat în lista de produse afișată în bannerul dinamic. Acest lucru este grozav atât pentru spectatori, cât și pentru afacerile de comerț electronic!

Aceeași idee poate fi folosită de companiile iGaming. De exemplu, cotele se pot schimba dinamic – în cadrul unui banner – în timpul unui meci. Există multe tipuri diferite de campanii personalizate pe care le puteți utiliza cu reclame dinamice bazate pe HTML5.

În plus, este cea mai bună practică să actualizați un feed de produse în timp real. La urma urmei, trebuie să vă gândiți critic la formatul în care sunt afișate datele. Asigurarea că orice date pe care le utilizați în banner este înțeleasă de spectatori este esențială; acest lucru poate varia de la date și prețuri până la cote. Acest lucru poate varia și în funcție de piețe și limbi. De exemplu, modul în care americanii scriu datele este diferit de modul în care suedezii scriu datele. Sau modurile diferite în care britanicii și suedezii înțeleg cotele la pariuri.

Un sfat final: un bun creator de anunțuri, cum ar fi Creative Studio, sau o platformă de gestionare a creațiilor, va facilita configurarea filtrelor și a opțiunilor de sortare atunci când manipulează un flux de date.

Următorii pași: creați-vă cele mai bune anunțuri banner receptive!

Sper că, până acum, ați realizat că construirea de reclame banner adaptabile HTML5 este cea mai bună opțiune pentru nevoile dvs. de publicitate digitală. Cu atât de multă flexibilitate, vizibilitate pe mai multe ecrane și platforme, pur și simplu nu există o tehnologie mai bună pentru bannere. Reclame mai bune, design mai bun, valori mai bune – toate sunt posibile.

În cele din urmă, cu platformele de management creativ care vă oferă capacitatea de a produce campanii pentru toate rețelele publicitare majore – precum și pentru rețelele sociale – utilizarea uneia este o modalitate simplă de a îmbunătăți productivitatea echipei interne. A dura zile (sau chiar săptămâni!) pentru a duplica manual și a extinde campaniile nu mai este o opțiune.

Într-o epocă a piețelor multiple, a optimizării live și a transparenței, adoptarea HTML5 îi ajută pe specialiștii în marketing să atingă performanța publicitară pe care o doresc.

Dacă sunteți interesat să știți cum o platformă precum Bannerflow poate ajuta la producerea unei reclame extraordinare, atunci contactați-vă.