Ohne Zweifel: Die neuen eBay Relevance Ads mit runden Ecken kommen ziemlich rockig rüber.
Ein Blick hinter die Kulissen verrät, dass uns (ein bischen Eigenlob sei gestattet) neben der ansprechenden Optik eine ziemlich brillante technische Implementation gelungen ist. Für die Techies unter uns: Die runden Ecken der eBay Relevance Ads bestehen nicht, wie in den allermeisten Webseiten, aus kleinen Grafiken, sondern sind komplett in CSS „gepixelt“. Klarer Vorteil: Die Darstellung im Client-Browser geht deutlich schneller vonstatten, da nicht erst vier kleine GIFs (für jede Ecke eins) nachgeladen werden müssen. Das reduziert ganz nebenbei auch den Load auf den Auslieferungsservern um ein paar Hundert Millionen Requests pro Tag!
Für uns war die deutlich kompliziertere Implementation per CSS aber auch aus einem anderen Grund unumgänglich: Publisher können die Rahmenfarbe der eBay Relevance Ads über einen Aufrufparameter an ihr Webseitenlayout anpassen. Diese Aufgabe konnte nur mittels CSS gelöst werden: Die einzelnen Pixel nehmen automatisch die RGB-Werte der frei definierbaren Rahmenfarbe auf.
Wie funktionieren CSS-Grafiken?
In einfachen Worten gesagt wird jedes einzelne Pixel der Grafik exakt auf den Bildschirm gemalt. Farbwert und Position werden beispielsweise in ein <SPAN> eingearbeitet. Die einzelnen Pixel werden mittels eines <DIV> exakt positioniert. Ein einzelnes Pixel wird z.B. durch folgenden Code dargestellt:
[HTML2]
[HTML1]
Mit solchen CSS-Grafiken — wir nennen sie „Pixicons“ — lassen sich ganz lustige Sachen bauen. Das nebenstehende eBay Logo ist beispielsweise gar kein echtes Bild (GIF, JPG oder PNG), sondern besteht aus einzelnen Pixeln, die der Browser zur Laufzeit zusammensetzt. Das menschliche Auge erkennt dies jedoch als zusammenhängendes Bild.
Für den Rechner ist das Ganze nur eine Kolonne von exakt 886 html-Kommandos. Jedes Einzelne Kommando entspricht einem Pixel dieser Grafik. Kleiner Nachteil an diesem „eBay-Logo“: Der html-Code ist sportliche 44 KByte gross. Als GIF dürften das nur 2KB sein. Dafür muss der Client die Grafik nicht nachladen.
CSS-Grafiken werden somit wohl auch in Zukunft eher in Spezialfällen angewendet. Wie zum Beispiel in unseren runden Ecken. Auch bei „Captchas“ sind CSS-Grafiken sehr beliebt. CAPTCHAs werden verwendet, um zu entscheiden, ob das Gegenüber ein Mensch oder eine Maschine ist. Diese kleinen Bildchen enthalten Zeichenfolgen, die der Nutzer eingeben soll. Ein solches Captcha soll jedoch nicht computerlesbar sein. Ist es auch nicht. Siehe Code 🙂
