informatie over banners

menu

  Banners

  Wat is een banner?

Banners (en buttons) zijn kleine advertentie-achtige graphics op webpagina's, al of niet aangevuld met tekst en animatie. De term komt van 'banner advertisement' en is afgekort tot 'banner'.
Banners hebben een aantal vaste afmetingen en meestal worden er ook eisen gesteld aan de bestandsgrootte in verband met de download tijd.
De kosten van het plaatsen van banners worden vaak berekend aan de zgn. CTR of Click Through Rate, het percentage waarbij werkelijk op de banner geklikt werd. Deze 'doorklikratio' bedraagt op dit moment gemiddeld 1%. Een andere gebruikte methode is CPM, waarbij uitgegaan wordt hoe vaak de banner wordt getoond. (CPM is een afkorting voor cost per thousand. De M is dan een afkoring voor duizend als romeinse cijferteken.)

Een banner moet op een zeer kleine afmeting en binnen zeer korte tijd zijn informatie aan de bezoeker van een website kunnen doorgeven. Meestal zijn er nog vele andere aspecten die op dezelfde pagina om de aandacht van de bezoeker vragen. Design is, zoals in de meeste reclame ontwerpen, slechts een onderdeel van het gehele ontwerpproces.
Net als in een logo moet het bedrijf en product samengebald worden in beeld en tekst. Daarnaast geldt voor banners dan ook nog de geringe resolutie en de beperking in de bestandsgrootte.

  Als je een complete training met banners wilt doorlopen klik dan hier.

  De voorbereiding

Nog voordat er ook maar een pixel ontworpen wordt zal er eerst een gedegen voorstudie gemaakt moeten worden. Het is belangrijk om zo veel mogelijk gegevens te verzamelen, voordat het werkelijke 'design' begint. Daarnaast moet rekening gehouden worden met marketing doeleinden, corporate identity en design en eventuele andere campagnes.
Het is noodzakelijk om een nauwkeurige omschrijving te krijgen van de opdrachtgever ten aanzien van het doel van de banner en de doelgroep die bereikt moet worden. Wat zijn de werkelijke communicatie punten waarop deze banner moet scoren.
Houd, indien mogelijk, ook rekening met de 'natuurlijke' omgeving van de banner. Op wat voor soort pagina zal deze geplaatst worden. Welke kleuren spelen hier een rol, hoe is de lay-out en zijn er meerdere kleine items die de aandacht vragen van de bezoeker. Is er al (veel) bewegend beeld op de betreffende pagina aanwezig en zijn er al andere banners.
Tot slot zijn er een aantal 'technische' specificaties waarmee we rekening moeten houden en die duidelijk omschreven moeten worden, zoals afmeting, gebruikte techniek, kleurdiepte, bestandformaat en bestandsgrootte.

  Technische specificaties

Het is belangrijk om in het begin al de technische specificaties te definiėren waaraan de banner zal moeten voldoen. Het betreft hier o.a. de afmetingen, de bestandsgrootte, het bestandformaat en eventuele speciale technieken.

  Afmetingen

Er wordt een grote hoeveelheid formaten gehanteerd voor banners. Hier staan de belangrijkste, zoals die door veel providers en bureaus gehanteerd worden:

soort formaat indicatie maximale
bestands-grootte in KB
full banner 468 x   60 30
half banner 234 x   60 20

square button

(button 120)

120 x 120 15

button 1

(button 90)

120 x   90 10
button 2 120 x   60 8
leaderboard 728 x 90 30 wegens de grote afmeting niet in deze tabel opgenomen

skyscraper
120 x 600
30

ter illustratie: voorbeelden van advertentievormen bij Ilse en eBanner.nl

De meest voorkomende formaten zijn de full banner, half banner en button1 en 2.
Baners bij Google hebben ook zo hun specificaties: zie https://www.google.com/adsense/adformats#image

  Compressie

Om afbeeldingen (maar ook geluid en andere data) zo snel mogelijk te kunnen doorgeven wordt er gebruik gemaakt van verschillende compressietechnieken. Hierbij maken we onderscheidt tussen compressie technieken zonder (bijv. GIF) en met verlies (bijv. JPG). Onder Windows kan een bestand in de verkenner geselecteerd worden om de grootte van het bestand te controleren. Onder MacOS moet er gebruik gemaakt worden van het Desktop menu File --> Get Info. Bij de informatie achter grootte gaat het om het getal tussen haakjes, wat de ware grootte van het bestand weergeeft. Behalve compressie kan de bestandsgrootte en de afspeelsnelheid van animaties bevorderd worden door gebruik te maken van weinig kleuren en kleinere paletten van bijvoorbeeld 4-bits (16 kleuren), egale kleurvlakken in plaats van kleurverlopen of complexe patronen en stilstaande en egale achtergronden bij animaties.

  Bestandsformaten

Er worden standaard maar enkele grafische formaten door een browser ondersteund. Dit zijn het *.gif en *.jpg formaat. Het modernere *.png formaat wordt door de nieuwere browsers ondersteund en wordt om die reden minder toegepast. Andere bestandsformaten maken veelal gebruik van een zgn. plugin om dit soort bestanden te kunnen vertonen in de browser. Steeds populairder worden de mogelijkheden van Flash animaties: het *.swfHet voordeel is het kleine bestandsformaat en de grote interactieve mogelijkheden. De Flash-plugin wordt tegenwoordig standaard met de browser geļnstalleerd, zodat je ervan uitmag gaan dat Flash-banners algemeen ondersteund worden.

  Enkele ontwerp tips

Het ontwerpen vindt plaats aan de hand van de opdrachtomschrijving, het concept en de technische specificaties. Eigenlijk hebben we het hier over het uitwerken van het concept en het geschikt maken voor de eerste schetsfase. Er zijn een aantal 'tips' die toegepast kunnen worden, of waarmee rekening gehouden kan worden om een banner beter te laten 'scoren', zoals:

  Werkwijze

Link naar de gemaakte banners in oktober 2006

links naar andere sites over HTML en CSS:

naar een exclusieve beschrijving van HTML.
nog een site met veel over HTML - CSS - JavaScript: www.mijnhomepage.nl/
de webpagina, waar ik de techniek voor de navigatie van deze pagina's heb gevonden.