Browserstatistiken sind Lug und Trug

Der, um in der Sprache der BusinessWeek.com-Headline zu bleiben, Endsieg der Mozilla Foundation ist nah, glaubt man den genannten Statistiken. Diese stammen von WebSideStory, einem Unternehmen für Internet-Marktanalysen, und bescheinigen Deutschland einen IE-Anteil von nur noch kümmerlichen 65,04%. Jeder vierte Deutsche soll Firefox-Nutzer sein.

Das klingt ja recht schön, aber bei solchen Statistiken muss man natürlich fragen, wie sie denn zustande kommen. In diesem Fall ist es einfach: Sie stammen von genau jenen Websites, die das WebSideStory-Produkt HBX On-Demand Web Analytics einsetzen. Aus dem Press Release (Hervorhebung von mir):

For the month of June 2006, Germany averaged a Firefox usage rate of 26.80 percent, followed by France (14.89 percent), Italy (12.46), Spain (9.86) and the U.K. (8.82), according to the WebSideStory Index, a statistical barometer featuring global Internet user trends culled from the millions of daily visitors to web sites using the company’s award-winning web analytics technology, HBX Analytics.

Die Vermutung liegt nahe, dass der für diese Statistik herangezogene Stichprobenumfang nicht viel taugt. Doch es heißt, WebSideStory sei mit ihrem HBX Marktführer in Sachen Website-Analyse - vielleicht ist es Programm ja so weit verbreitet, dass die Statistik doch zu etwas nützt? Um das zu ermitteln, sollte man einmal herausfinden was das feine Programm denn so kostet. Die HBX-Website selbst nennt keinen Preis, sondern fordert einen Suchenden nur stets auf, doch einen Sales Executive zu kontaktieren. Billig wird's also kaum sein. Bemüht man Google, findet man auch konkrete Zahlen, nach denen sich jedes Jahr HBX-Benutzung mit mindestens $15.000 zu Buche schlägt.

Wer außer einigen großen Unternehmen wird sich so etwas leisten? Die Macher von WebSideStory mögen (nach eigener Aussage) mit ihrem Programm Marktführer sein, mehr als einen Bruchteil des Internets können sie auch nicht erfassen. Selbst in ihrem die Statistiken veröffentlichenden Press Release steht es!

More than 1,300 enterprises worldwide are using one or more components of the Active Marketing Suite to optimize their online business.

Dieser Bruchteil kann nicht repräsentativ sein, wenn er voraussetzt, dass eine Website mindestens $15.000 auf den Tisch legen muss um erfasst zu werden. Und da das Internet eben nicht zum Großteil aus den 1.300 Websites millionenschwerer Konzerne besteht, ist diese an allen Ecken und Enden genannte Statistik gänzlich wertlos - wie eigentlich jede Browserstatistik, von der man behauptet, sie würde das ganze Internet umfassen.

Spamschutz leichtgemacht

Kaum hatte ich einen wüsten Wutanfall zum Thema Captcha gelesen, da machte Gaim pling und Frank, mein alter Schulkamerad und persönlicher Lieblingsprovider von Messetechnik (nicht dass ich jetzt so übermäßig viele kennen würde) erzählte mir von seinem aktuellen Spamproblem

Nachdem ein Bot ein Kontaktformular auf einer seiner zahlreichen Websites genutzt hatte, um ihm (ungelogen) stündlich 300 patente Diättipps zukommen zu lassen, war jetzt das Gästebuch seiner wichtigsten Seite dran. Alle 60 Minuten kamen sechs Einträge, die die Vorzüge eines bestimmten potenzfördernden Generikas priesen. Angesichts des Alters derer, die normalerweise Franks Events besuchen, würde ich fast vermuten, dass man dort eher mit zu viel als mit zu wenig Potenz zu kämpfen hat... aber Marketingstrategie ist eben nichts für Spambots.

Es kann so einfach sein

Das Idioten-Captcha
Meine Sicherheitsabfrage. Funktioniert wirklich prima.

Diese sind nämlich strunzdumme Maschinen. Man soll seinen Gegner nie unterschätzen, sicherlich, aber wenn man ihn überschätzt, tut man sich selbst auch nichts gutes. Und das tun viele, so zum Beispiel auch ich... bis ich den eingangs genannten Artikel las. Weil ich keine Lust hatte, für Frank irgendein abgefahrenes Hightech-Captcha zu installieren, habe ich einfach als Experiment das dümmstmögliche gebaut.

Damit nicht der Eindruck entsteht, dies sei eine komplizierte Angelgenheit... es handelt sich um nichts weiter als das Bild eines Elefanten. Das Script prüft einfach, ob die Frage mit Elefant beantwortet wurde (Rechtschreibfehler und originelle Groß- und Kleinschreibung werden akzeptiert) und speichert dann den Kommentar.

Das Bild ändert sich nie. Die Antwort ist immer Elefant. Das ist die dümmste Sicherheitsabfrage der Welt. Und sie funktioniert.

Mit Kanonen auf Spatzen

Nutzlos und lästig.
Spät am Abend ist sowas zu hoch für mich. Wenn es ein Spambot drauf anlegen würde, würde er dieses Ding überwinden. Nur passiert das eben nicht.

Es ist technisch durchaus möglich, Captchas durch Maschinen knacken zu lassen. Nur passiert das praktisch kaum, höchstens wenn ein Spambot gezielt auf eine bestimmte Captcha-Software angesetzt wird. Warum sollte man sich dann die Mühe machen? Normale Captchas sind ab einem gewissen Müdigkeitsgrad auch für optisch optimal ausgerüstete Menschen nicht mehr zu knacken und unter der Bilderzeugung schwitzt unnötig der Server.

Wenn man's barrierefrei halten möchte, sollte statt eines Bildes vielleicht eine einfache (nicht-mathematische) Frage gestellt werden, zum Beispiel Wie lautet der Vorname von Franz Beckenbauer?.

Rastergrafik als Positionierungshilfe

Am Bildschirm sind 2cm eine sehr sehr relative Längenangabe. Dank zahlreicher Browserbugs gilt das gleiche leider oft auch für eigentlich so eindeutige Anweisungen wie 20 Pixel. Über Perus Weblog fand ich nun kürzlich etwas, das bei derartigen Fragen Abhilfe verspricht: Ein großes Raster mit Pixelangaben als Hintergrundbild zum präzisen Abmessen von Positionen und Längen. Eine schöne Idee, allein, die Grafiken, die's dort zu laden gab erschienen mir aus zweierlei Gründen nicht besonders brauchbar.

Warum ein neues Raster?

Erstens scheine ich der einzige zu sein, der bei der Gestaltung seiner Websites das Layout nicht in 10er-Schritten, sondern in Zweierpotenzen anlegt - bei mir ist nie etwas 250 Pixel breit, sondern bestenfalls 256 Pixel. Erscheint mir bei Computergrafiken sinnvoll, der Bildschrim ist ja in der Regel auch 1024 Pixel und nicht 1000 Pixel breit.

Zweitens ist diesere Raster-als-Hintergrundbild-Konstruktion ebenfalls nicht sinnvoll, sobald auf der Seite andere Elemente ebenfalls Hintergründe sporten und damit das Raster überdecken. Also heißt es mal wieder selbst ist der Mann.

Download und How-To

In mühevoller Kleinarbeit habe ich also ein mir zusagendes Raster in verschiedenen Farben gebaut. Als transparentes PNG lässt sich jede Version als absolut positioniertes img sehr schön über allen bestehenden Inhalt legen - an den Linien kann man dann seine Elemente präzise ausrichten.

Die Anwendung ist ebenfalls denkbar einfach, muss man doch lediglich die Grafik als absolut positioniertes Element auf seiner Seite einfügen.

<img src="grid-blue.png"
    style="position:absolute; top:0; left:0;" />

Und schon hat man ein schönes Raster über seiner Seite liegen und kann in Bequemlichkeit Pixel schubsen.

Raster bei Kram-hochladen.de im Einsatz
Wenn mal ein Element nicht genau sitzt, lässt es sich mit Hilfe eines Rasters genauestens nachvollziehen.

Einen (geringfügigen) Nachteil hat diese Technik allerdings. Das Raster ist ein absolut positionirtes Element über überdeckt als solches alle anderen Elemente - oder zumindest die meisten. Das heißt, dass Links u.Ä. die unter dem Raster liegen aufgrund der Transparenz der PNGs zwar sichtbar, aber nicht mehr anklickbar sind. Nicht weiter schlimm, weil außer dem Entwickler eh niemand das Raster zu sehen bekommen sollte. Und schließlich hat man ja seine statischen URLs sowieso im Kopf. Alles kein Problem.

Die praktische Ein-Bild-Navigation

Manchmal möchte man aus rein optischen Erwägungen auf seiner Seite eine aus Grafiken bestende Navigation haben. Das bedeutet im Normalfall viel Arbeit. Man muss die ganzen Einzelgrafiken zurechtscheiden (und jeweils Mouseover-Versionen), sich dann den Kopf darüber zerbrechen wie man den Mouseover-Effekt realisiert (Javascript? Kann man abschalten. CSS-Pseudoklasse :hover? Geht beim IE auf img-Elementen nicht...) und am Ende muss man sich dann auch noch darum bemühen, dass der Mouseovereffekt ohne Verzögerung beim Nachladen der entsprechenden Grafik kommt.

Weniger ist mehr

Die Lösung all dieser Probleme besteht darin, die entsprechenden Schritte beim Bau einer Bildernavigation einfach nicht auszuführen. Nehmen wir erst einmal eine ganz einfache HTML-Navigation her:

<ul id="navi">
    <li><a href="/">Startseite</a></li>
    <li><a href="projekte.html">Projekte</a></li>
    <li><a href="referenzen.html">Referenzen</a></li>
    <li><a href="impressum.html">Impressum</a></li>
</ul>
Das Navibild
Dies Bildnis ist bezaubernd schön... bzw. hässlich. Macht aber nichts, es ist ja nur ein Beispiel.

Passend dazu basteln wir uns dann die grafischen Repräsentationen der Navigationspunkte (inkl. Varianten für den Mouseover-Effekt), lassen sie aber, statt sie wie gewohnt in Einzelbilder zu zerlegen, in einem Stück.

Dieses Bild wird in Folge nicht mehr angerührt - ab jetzt brauchen wir nur noch css und ein paar kleinere Änderungen an der HTML-Datei. Der Plan sieht wie folgt aus:

  1. Die Navigationspunkte (Der Text zwischen den a-Tags) werden mit einem Image-Replace-Trick durch das große Navigationsbild ersetzt.
  2. Durch individuelles CSS-Styling wird das Navigationsbild für jeden Punkt so positioniert, dass es aussieht als wäre dort jeweils ein Einzelbild am Werke.
  3. Weil das ganze in a-Tags stattfindet, ist es kein Problem mit der :hover-Pseudoklasse den Mouseovereffekt zu erstellen. Es wird einfach das Navigationsbild für a:hover so verschoben, dass statt der normalen Grafik die Mouseover-Version zu sehen ist.

Schritt 1

Image-Replace-Trick bedeutet in diesem Fall, dass die a-Tags zu Block-Elementen werden, ein Hintergrundbild bekommen - und dass der Text zwischen den a-Tags verschwindet. Wir setzen ihn einfach in einen Span und stylen diesen unsichtbar. CSS-Fähige Browser werden ihn nicht anzeigen, aber für Suchmaschinen, Screenreader und Textbrowser ist der Text immer noch da. Der Code für diesen Schritt:

<ul id="navi">
    <li><a href="/"><span>Startseite</span></a></li>
    <li><a href="projekte.html"><span>Projekte</span></a></li>
    <li><a href="referenzen.html"><span>Referenzen</span></a></li>
    <li><a href="impressum.html"><span>Impressum</span></a></li>
</ul>

CSS macht aus den Links Block-Elemente und verpasst ihnen unser Navibild als Hintergrund.

#navi {
  list-style-type:none;
  margin:0;
  padding:0;
}

#navi li a {
  display:block;
  width:160px;
  height:32px;
  background:white url(navi.jpg) no-repeat top left;
}

#navi li a span {
  display:none;
}

Jetzt sieht die Navigation schon richtig nach etwas aus, allein die richtige Positionierung des Hintergrundbildes für die einzelnen Punkte fehlt noch.

Schritt 2 und 3

Mit CSS und background-position kein ist die Positionierung des Hintergrunds kein Problem; und um Zeit zu sparen, legen wir das ganze gleich so an, dass die Position beim Mouseover eine andere ist. Weil das ganze ja nur Hintergrundbilder eines a-Tags sind, brauchen wir dafür nicht mehr als die :hover-Pseudoklasse. Um die einzelnen Links in den Navigationspunkte zu identifizieren, verpassen wir den Listenpunkten noch IDs. Jetzt schaut das ganze so aus:

<ul id="navi">
    <li id="navi-start" ><a href="/"><span>Startseite</span></a></li>
    <li id="navi-projekte"><a href="projekte.html"><span>Projekte</span></a></li>
    <li id="navi-referenzen"><a href="referenzen.html"><span>Referenzen</span></a></li>
    <li id="navi-impressum"><a href="impressum.html"><span>Impressum</span></a></li>
</ul>

Das CSS mit all den Zahlen ist dann doch etwas mühsam (Beziehungsweise es wird schnell mühsam wenn die Navigationsliste lang wird), aber schneller als sich im Grafikprogramm einen Wolf zu schnibbeln ist's allemal. Letztendlich ist es ja nur einfachstes Rechnen.

#navi-start a:link, #navi-start a:visited, #navi-start a:active {
    background-position:0px 0px;
}
#navi-start a:hover {
    background-position:0px -128px;
}

#navi-projekte a:link, #navi-projekte a:visited, #navi-projekte a:active {
    background-position:0px -32px;
}
#navi-projekte a:hover {
    background-position:0px -160px;
}

#navi-referenzen a:link, #navi-referenzen a:visited, #navi-referenzen a:active {
    background-position:0px -64px;
}
#navi-referenzen a:hover {
    background-position:0px -192px;
}

#navi-impressum a:link, #navi-impressum a:visited, #navi-impressum a:active {
    background-position:0px -96px;
}
#navi-impressum a:hover {
    background-position:0px -224px;
}

Uns schon ist unsere Navigation fertig. Kein Javascript, keine großen IE-Probleme, keine Nachladezeit-Probleme. Die optimale Lösung wenn's denn mal Bilder sein müssen.

Nachtrag vom 26. August 2007

Die Methode, die hier zum Verstecken des Textes der Navigationspunkte verwendet wird, hat den Nachteil, dass die versteckten Elemente von Screenreadern nicht erfasst werden. Wie man es besser besser macht ist im Artikel über Image Replacement beschrieben.

Folgt mir!