To all the ravers in the internet

So macht man heute Layouts mit CSS

nospam@example.com (Dragan Espenschied) — Mon, 13 Oct 2008 19:57:55 +0200

Mit HTML und CSS gibt es zwei Möglichkeiten, das Layout einer dynamischen Webseite zu gestalten:

Floats
FAP

(Mit “dynamischer Webseite” ist hier eine gemeint, deren Inhalte sich jederzeit ändern können—zum Beispiel indem Besucher Kommentare hinterlassen. Auf einer Seite deren Inhalte sich niemals ändern und somit die genaue Länge der Texte bekannt ist, kann natürlich über die CSS-Eigenschaften position:absolute und Pixelkoordinaten wie top:10px und left:232px alles an genau definierte Stellen geschoben werden.)

Floats

Die CSS-Eigenschaft float wurde vom W3C als offizielle Möglichkeit vorgesehen, die dem Datenformat Text innewohnende Eindimensionalität im Dokumentfluss zu durchbrechen.

HTML:

<div class="leftCol">
   Hallo zusammen!
</div>
<div class="rightCol">
   Ich bin auch noch da!
</div>

CSS:

.leftCol {
   float: left;
   width: 200px;
}
.rightCol {
   float: left;
   width: 300px;
}

So ordnet sich leftCol links an und rightCol rückt gleich auf.

Ganz ohne Probleme ist diese Technik nicht. Das W3C Box Model, das die Darstellung von HTML-Elementen als rechteckige Flächen definiert, macht es zuweilen recht umständlich, Innenabstände und Breiten von Elementen zu setzen.

Wir sind zwei nebeneinander stehende Textblöcke, die beide den gleichen Text enthalten. Da wir keinen Innenabstand gesetzt haben, stoßen wir direkt aneinander, was doch ziemlich schlecht aussieht. Ein Innenabstand ist also notwendig. Immerhin sind wir beide genau 40% breit.

Den “Floats” nachfolgende Elemente werden ebenfalls gefloatet, wie dieser Text. Das geht so lange, bis entweder der übrige Platz komplett gefüllt ist oder das Floaten durch die CSS-Eigenschaft clear beendet wird.

Leider ist oft gerade kein HTML-Element verfügbar, das sich sinnvoll mit der Eigenschaft clear ausstatten lässt. Eine Lösung ist, die Floats mit einem Element zu umschließen, das overflow:auto enthält:

HTML:

<div class="wrap">
   <div class="leftCol">
      Hallo zusammen!
   </div>
   <div class="rightCol">
      Ich bin auch noch da!
   </div>
</div>

CSS:

.leftCol {
   float: left;
   width: 200px;
}
.rightCol {
   float: left;
   width: 300px;
}
.wrap {
   overflow: auto;
}

Diese Technik wurde erstmalig von Paul O’Brien auf sitepoint beschrieben.

Doch gleich weiter zum nächsten Problem:

Wir sind wieder zwei Textblöcke, die beide den gleichen Text enthalten. Nun haben wir padding, also einen Innenabstand gesetzt. Leider ist unsere tatsächliche Breite damit unbekannt, da sie sich aus der width von 40% plus dem padding von 20 Pixeln links und rechts zusammensetzt. Der Innenabstand wird also dummerweise zur Breite dazugezählt. So kann kein flexibles Layout – also eines, das auf Prozentwerten und damit der aktuellen Größe des Browserfensters basiert – sicher in CSS definiert werden.

Es sieht so aus als favorisiere CSS nur fixe Layouts, also solche, die in einer festen Pixelgröße existieren, unabhängig von der Größe des Browserfensters. Das lässt sich umgehen, indem die Elemente so verschachtelt werden, dass die äußeren nur die width und die inneren die paddings enthalten:

HTML:


<div class="wrap">
   <div class="leftCol">
      <div class="content">Hallo zusammen!</div>
   </div>
   <div class="rightCol">
      <div class="conent">Ich bin auch noch da!</div>
   </div>
</div>

CSS:

.leftCol {
   float: left;
   width: 40%;
}
.rightCol {
   float: left;
   width: 40%;
}
.content {
   padding: 20px;
}
.wrap {
   overflow: auto;
}

Das sind schon recht viele <div>s! Nicht sonderlich elegant, aber es funktioniert. Hätte das doofe W3C das Boxmodell nur etwas näher an der Praxis formuliert!!

FAP - Faux Aboslute Positioning

Diese frisch entdeckte Technik erlaubt dynamische oder feste Layouts mit beliebiger Spaltenaufteilung.

Innerhalb einer row können mehrere col vorkommen. Diese werden mit left:100% am rechten Rand der row positioniert. Jede individuelle col wird dann über einen negativen Außenabstand (margin-left) rückwärts zurück in die row gezogen.

HTML:

<div class="row">
   <div class="col leftCol">
     Halli und Hallo!!
   </div>
   <div class="col rightCol">
      Ich ziehe meinen Hut!
   </div>
</div>

CSS:

.row {
   float: left;
   width: 100%;
   display: block;
   position: relative;
   overflow: auto;
}
.col {
   position: relative;
   float: left;
   overflow: hidden;
   left: 100%;
}
.leftCol {
   width: 45%;
   margin-width:-100%;
}
.rightCol {
   width:45%;
   margin-width:-45%
}

Hier eine Beispiel-Seite, auf der unter anderem zu sehen ist, wie sich die FAP-Technik mit klassischen Floats verträgt. Beim Ändern der Fenstergröße passt sich das Layout automatisch an. Hier das Stylesheet.

FAP kann nur ein übergeordnetes Seitenraster konstruieren. Innerhalb einer col ist keine weitere row möglich.

Abgesehen von der Möglichkeit, (endlich wieder wie früher zu Tabellen-Zeiten!!) mit garantiert funktionierenden flüssigen Layouts zu arbeiten, bietet FAP den Vorteil, weiter “hinten” im Quelltext stehende Elemente in der Anzeigereihenfolge nach “vorne” zu holen. Dies bedeutet größere Gestaltungsfreiheit bei behindertengerechten Seiten und Suchmaschinenoptimierung. Die Vorstellung, Spalten hinaus und wieder hinein zu schieben, ist etwas gewöhnungsbedürftig. Allerdings ist dabei meistens weniger Rechnerei nötig als bei Floats.

Diese vereinfachte Beschreibung der FAP-Technik basiert auf dem Artikel von Eric Sol bei A List Apart.

Also ran an den Texteditor und alles fein aufgeteilt!

Empfehlenswerte Software

nospam@example.com (Dragan Espenschied) — Sat, 26 Jan 2008 23:14:13 +0100

Besonders für meine Zweitsemestergruppen – diese kostenlosen oder freien Programme erlauben es, daheim an den Internet-Projekten weiterzuarbeiten:

Windows

Benutzt WinSCP für die Datenübertragung zum NM-Server.
Ein beliebter Texteditor ist Notepad++.

XAMPP ist ein Apache-Webserver mit PHP, Perl, MySQL-Datenbank und vielen weiteren Bibliotheken.
Macintosh
Zur Datenübertragung bietet sich die Cyberduck an. Das klassische Fetch geht einem dann doch mit der Zeit auf den Keks. Am tollsten ist natürlich MacFusion, mit dem sich Server wie lokale Festplatten behandeln lassen, aber das ist etwas schwieriger zu installieren.
Der Textwrangler ist ein benutzbarer Texteditor.

MAMP ist eine einfache Distribution des Apache-Webservers mit PHP und MySQL.
Linux (Ubuntu)
Die Desktops Gnome und KDE unterstützen das SFTP-Protokoll bereits über die URL, also in diesem Fall sftp://user.name@server/home/user.name/
- Gnome: Im Nautilus-Filemanager die Adresszeile auf ein Eingabefeld umstellen und die URL eingeben.

KDE: Im Konqueror URL in die Adresszeile eingeben.

Die mitgelieferten Texteditoren Gedit (Gnome) oder Kate (KDE) kann man empfehlen.

Apache-Webserver, php und MySQL übers Paket-Management installieren, Kommandozeile: sudo apt-get install apache2 php5 mysql-server phpmyadmin
Je nach Einsatz von Gedit oder Kate kate-plugins oder gedit-plugins anhängen.

Zeitspeicherung

nospam@example.com (Dragan Espenschied) — Wed, 31 Oct 2007 19:53:44 +0100

Was in Blogs von mir aus leidlich funktioniert – also das neuste “steht oben”, kommt “zuerst”, ältere Artikel werden “weiter hinten” oder “später” einsortiert – ist für Audio leider vollkommen untauglich. Das hat sich gleich am ersten Tag, an dem mein Anrufbeantworter umgedreht wurde, gezeigt: Meine Vodafone Voicemailbox verhält sich seit neustem merkwürdig: Die gespeicherten Anrufe werden mir in umgekehrter Reihenfolge ihres Eingangs vorgespielt. Das bedeutet, der neuste Anruf kommt zuerst und der am weitesten zurückliegende zuletzt.

Eine Anruferin hinterließ zwei Nachrichten, es ging um eine Terminabsprache. In der ersten Nachricht erklärte sie mir, warum wir uns treffen sollten. In der zweiten Nachricht referenzierte sie den Grund selbstverständlich nur noch, wie sie es bei einem tatsächlich zustande gekommenem Gespräch auch getan hätte: “Wir könnten das auch am Freitag machen”, “Hast Du am Donnerstag Zeit dafür?”, – wofür denn? Das wurde mir erst klar, als ich die vorhergehende Nachricht später abhörte. Wären mir die Nachrichten in der richtigen Reihenfolge präsentiert worden, wäre mir einige Verwirrung erspart geblieben.

Audio ist eben kein Blog, Podcasts sind keine Anrufe, das Neuste ist nicht immer das Wichtigste; vor allem: Nicht jeder Anruf ist eine in sich geschlossene Informationseinheit. Denn üblicherweise wird das Telefon benutzt, um mit jemandem etwas zu besprechen, also einen Kommunikationsprozess zu beginnen.

Entweder müssten sich nun also alle Anrufer, die eine Nachricht hinterlassen möchten, bei jedem Anruf alles von vorne und komplett erklären; oder ich müsste mich daran gewöhnen und, wenn ich eine Nachricht nicht verstehe, immer weiter zurückspulen. – Wobei “zurückspulen” nicht einmal eine sinnvolle Metapher darstellt, denn die Zeit wird vom Anrufbeantworter nicht mehr linear aufbewahrt, sondern als Zickzack.

Hier eine beeindruckende Visualisierung der Zeitreise, die man beim Abhören eines Anrufbeantworters unternimmt:

Die Zickzack-Zeitspeicherung wurde durch Blogs populär gemacht und bricht auch dort Linearität eines durchgängigen Textes. Allerdings können die meisten Blogschreiber damit umgehen und verfassen ihre Einträge dementsprechend: Wie in einem Zeitungsartikel wird alles zum Verständnis nötige kurz zusammengefasst. Oft werden für die Herstellung des Zusammenhangs Links anstelle von Zusammenfassungen verwendet.

Üblicherweise werden die Nachrichten auf dem Anrufbeantworter beim Netzbetreiber und nicht im Telefon, von dem aus abgehört wird,aufbewahrt. Somit lässt sich eine bessere Sortierung der Zeit, zum Beispiel anhand der auf dem Telefon gespeicherten Kontaktdaten, technisch nicht umsetzen. Bis eines Tages die Aufzeichnungen verpasster Anrufe auf dem Endgerät verwaltet werden können, wäre eine lineare Sortierung beim Abhören die am einfachsten zu benutzende Methode.

Geht mir fort mit euren Fonts!

nospam@example.com (Dragan Espenschied) — Sun, 09 Sep 2007 23:12:22 +0200

Als gegen Ender der 1990er viele Desktop-Publishing-Experten ins Web wechselten, war die Enttäuschung groß: die geliebten, aus Quark XPress bekannten “Fonts” konnten nicht benutzt werden! Stattdessen muss man sich als Gestalter bis heute mit der Handvoll Schriften herumplagen, die Webnutzer auf ihren Computern installiert haben. Und welche sind das? Zum Beispiel Arial, der Angstfeind eines jeden feinsinnigen Grafikers, Comic Sans MS, die schriftgewordene Geschmacklosigkeit, oder Times New Roman, eine schwurbelig dahinkrumpelnde Serifenschrift!

Alle Jahre wieder kommt die Frage auf, wann es denn endlich möglich sein wird, richtige, professionelle Schriften auf Webseiten einzusetzen. Oder es werden neue Technologien vorgestellt, die Schriftglückseligkeit im Web verheißen.

5 Schriften müssen reichen

Nun möchte ich zusammenfassen, warum man sich diese Fantasien sparen kann, und zwar anhand der Diskussion um einen Artikel auf A List Apart: CSS @ Ten.

Hier stellt sich Håkon Wium Lie, der CTO von Opera, vor, wie der CSS-Standard erweitert werden müsste, damit Webdesigner spezifizieren könnten, welche Fonts vom Browser für eine bestimmte Webseite von einer URL nachgeladen werden sollen. Am Schluss folgt der Aufruf an die mitlesenden Designer, sich bei den Browser-Herstellern für die technische Implementierung dieser geplanten Erweiterung einzusetzen.

Für all jene, die Webdesign immer noch als eine Unterdisziplin von Grafikdesign ansehen und deren größter Wunsch darin besteht, die im Printdesign zur Verfügung stehenden Ausdrucksmittel ins Web zu übertragen, hört sich das alles prima an. Doch das Web stellt besondere Anforderungen an Schriften. Vor allem müssen sie folgende Kriterien erfüllen:

Ein anständiges Schriftbild bei einer Buchstabenhöhe von lediglich 9 bis 13 Pixeln bieten – natürlich auch bei abgeschaltetem “Weichzeichnen der Buchstabenkanten”, also ohne Anti-Aliasing.
Die größtmögliche Menge an Unicode-Zeichen enthalten, damit Webnutzer aus aller Welt sich in ihrer Muttersprache durch diese Schriften ausdrücken können. – Man denke nur an Blogs, in denen bei den Kommentaren keine Umlaute dargestellt werden können, weil jemand einen nur das US-Amerikanische Alphabet enthaltenden Font vorgegeben hat. Eine Käthe Schönheiß könnte nicht einmal ihren eigenen Namen schreiben.
Sie müssen frei verfügbar sein, damit sie von einem Großteil der Browser angezeigt werden können – sonst bringt die ganze Idee nichts.
So gut wie alle Schriften, die diese Kriterien erfüllen, sind auf so gut wie allen Desktop-Computern bereits vorhanden. Es handelt sich um Arial, Times New Roman, Courier New, Georgia und Verdana.

(Andere oft genutzte Schriften wie Andale Mono, Impact, Trebuchet MS oder Comic Sans sind für bestimmte Zwecke natürlich geeignet, bieten aber weniger Unicode-Zeichen oder Schnitte.)

1996 rief Microsoft das Projekt Core Fonts for the Web ins Leben, das diese, speziell für den Bildschirm optimierten Schriften kreieren und im Web verteilen sollte. Natürlich wurden die Fonts Bestandteil aller Windows-Systeme. Apple liefert sie zusammen mit ihren Computern ebenfalls aus, unter freien Systemen (GNU/Linux) lassen sie sich üblicherweise einfach nachinstallieren.

Solche Fonts herzustellen ist ein sehr aufwändiger Prozess. Natürlich gibt es im Web viele Schriften zur kostenlosen Verwendung, doch diese enthalten meist nur eine winzige Untermenge der Unicode-Zeichen und sehen in kleinen Größen sehr schlecht aus.

Die einzige freie Schriftfamilie, welche die oben genannten Kriterien erfüllt, heisst DejaVu. Bitstream veröffentlichte die Vera-Familie unter einer Lizenz, die es erlaubte, diese Fonts zu kopieren und zu verändern; seitdem kümmert sich eine Community um die Weiterentwicklung der Schrift unter dem Namen DejaVu. Sie findet zum Beispiel Verwendung in vielen GNU/Linux-Distributionen.

Andere Schriften, die mit einiger Sicherheit im Web zu gebrauchen wären, sind mir nicht bekannt.

Nachdem Microsoft das Core Fonts-Projekt geschlossen hat, entwickeln sich für das Web geeignete Schriften nur noch im Umfeld der freien Software. Kommerzielle Anbieter werden mit großer Wahrscheinlichkeit keine Arbeit in einen Schrift stecken, die sie nachher umsonst verteilen sollen. Vielleicht ließe ein in den Browser eingebautes Font-DRM – also ein System, das wie bei “geschützten” MP3-Dateien die Anzeige von Schriften nur unter bestimmten Bedingungen zulässt – einen Markt für Webschriften entstehen. Allerdings braucht die Welt nicht mehr DRM, sondern weniger. Wenn eine ganz bestimmte Schrift derart wichtig ist tut’s vielleicht auch ein PDF?

Wirtschaftlich und politisch können nachladbare Web-Fonts also nicht überzeugen. Mit Web-Fonts unterversorgte Designer sollten, anstatt die Browser-Hersteller zur Implementierung nachladbarer Fonts anzuregen, Projekte wie DejaVu fördern.

Pixel und Hints

Jeder anständige Grafiker kann die Standard-Schrift Arial nicht ausstehen. Sie sei nur ein billiger Abklatsch der Helvetica, ihre Existenz dem Umstand verschuldet, dass Microsoft keine Lizenzen für die echte Helvetica zahlen und trotzdem eine ähnliche Schrift für Windows zur Verfügung stellen wollte.

Auf dem folgenden Screenshot sind sowohl Arial als auch die Neue Helvetica auf dem Bildschirm in einem Browser bei ausgeschaltetem Anti-Aliasing zu sehen:

Angesichts solcher Unterschiede in der Darstellung bei geringen Schriftgrößen kann man die ganze Typographen-Ideologie, mit Verlaub, vergessen. Hier noch ein Beispiel von der Website der professionellen Blogging-Software Movable Type:

Nicht überzeugend!

Die Arial ist mit guten Hinting-Informationen ausgestattet, Extra-Daten, die bei geringen Auflösungen helfen, die wenigen vorhandenen Pixel auf dem Bildschirm optimal auszunutzen. Die Helvetica sieht auf dem Papier, aus einem Laserdrucker kommend, ganz hervorragend aus. Aber auf dem Bildschirm erscheinen nicht einmal die Strichstärken konsistent.

Um auf dem Bildschirm die Darstellung solcher Schriften zu verbessern, wurde das Schriften-Anti-Aliasing (“Kantenglättung”) erfunden. Dabei werden die Buchstaben nicht nur mit schwarz und weiss, sondern auch mit Graustufen gezeichnet. So entsteht die Illusion einer höheren Auflösung. Ist Anti-Aliasing aktiviert, sieht auch die Helvetica auf dem Bildschirm nicht vollkommen grauenvoll aus.

Warum sollte nun jemand das Anti-Aliasing abschalten?
Es kann sein, dass Anti-Aliasing auf dem eingesetzten Betriebssystem nicht vorhanden ist. Das kann technische oder lizenzrechtliche Gründe haben. Schriftdarstellungstechniken wie ClearType von Microsoft oder CoolType von Adobe sind patentiert. Selbst Hints sind aufgrund von Apple-Patenten nicht uneingeschränkt in Freier Software nutzbar.
Windows XP und alle Versionen davor wurden und werden mit ausgeschaltetem Anti-Aliasing ausgeliefert. Die meisten Nutzer haben keine Ahnung, dass es so eine Funktion überhaupt gibt oder wo man sie anstellen kann.
Anti-Aliasing führt oft zu einem matschigen, zu weichen Schriftbild, bei dem einige Buchstaben keinen einzigen schwarzen Pixel mehr enthalten. Daher deaktivieren einige Nutzer diese Funktion aus ästhetischen Gründen.
Notlösungen

Was also tun, wenn man nun aber dringend dringend dringend eine “besondere” Schrift im Web einsetzen will, ohne gleich auf Bilder oder Flash auszuweichen?

Mit einer gewissen Wahrscheinlichkeit kann man davon ausgehen, dass gewisse Schriften je nach verwendetem Betriebssystem beim Betrachter einer Website verfügbar sind. Zum Beispiel die Tahoma unter Windows oder die Monaco unter OS X.

Wer’s genauer wissen will kann auf verschiedenen Systemen eine beliebige Office-Anwendung starten und mal nachsehen, was da so alles im Schirftauswahlmenü steht. Somit lässt sich zumindest bei einigen Nutzern der Website vielleicht ein Schriftbild erzeugen, das für einen bestimmten Fall irgendwie besser ist wenn’s Arial wäre. Alle anderen bekommen aber trotzdem Arial zu sehen, also warum der ganze Aufwand? Ein großer Teil von Webdesign besteht darin, die Einschränkungen des Mediums zu akzeptieren. Es gibt für Webdesigner viel interessantere Dinge zu tun als Schriften auszusuchen.

Die endlose Ödnis der Font-Diskussion

Abgesehen von all den technischen und politischen Widrigkeiten, die mit nachladbaren Fonts im Web verbunden sind, ist das Thema schon seit Jahren für gepflegte Langeweile gut. Immer wieder wird auf die Bedeutung von Schriften im klassischen Grafikdesign verwiesen, und darauf, dass im Web größtenteils Text gestaltet werden muss. Die allgemeine Fantasielosigkeit dabei ist bestürzend.

Es hat sich noch nie jemand darüber beschwert, dass alle digitalen Schriftformate für den Druck ausgelegt sind und nicht für den Bildschirm. Eine “Outline-Schrift” (etwa im TrueType-Format) enthält zum Beispiel keine Information über Farben, Transparenzen oder programmatische Effekte (Extrusion, Noise, Bevel usw), sondern nur das, was für den schwarzweißen Laserdrucker benötigt wird.

Genau so scheint es vielen Designern nicht diskussionswürdig, dass der CSS-Standard es konzeptionell erschwert, sich dynamisch an die vorhandene Größe des Browserfensters anpassende Layouts zu definieren.

Und so weiter, so viele aufregende Dinge könnte man sich wünschen, aber die “Fonts” stehen mal wieder an erster Stelle.

Zum Abschluss noch einige ausgefallene Buchstaben. ~~Wer zuerst den Namen dieser Deathmetal-Band errät, bekommt einen Euro per Paypal von mir!~~ Roglok hat gewonnen! Die Lösung kann man in den Kommentaren nachlesen.

Kommunikation in Pixel Arts

nospam@example.com (Dragan Espenschied) — Mon, 03 Sep 2007 15:01:33 +0200

Das Projekt Pixel Arts von Alexander Schlegel aus dem Sommersemester 2007 wird fleißig genutzt. Täglich kommen mindestens ein Dutzend neue Bilder hinzu. Wie zum Teil miteinander kommuniziert wird halte ich für besonders interessant, da von einer kurzen Bildbeschreibung abgesehen keine Möglichkeit zur Texteingabe existiert und auch verschiedene Benutzer nicht identifiziert werden können.

Deswegen funktioniert das so:

Siehe die gesamte Pixel Arts-Galerie. Bei solchen Web-Projekten gibt es kein Gegenmittel, die Leute werden immer einen Weg finden, Nachrichten auszutauschen.

Zombie-Links

nospam@example.com (Dragan Espenschied) — Sun, 02 Sep 2007 22:09:47 +0200

Zombie-Links gehören zu den 7 großen Pestbeulen des Webs. Es handelt sich um Links, die auf exakt die selbe Adresse verweisen, die gerade im Broswer angezeigt wird. Klickt man auf so einen Link landet man genau da, wo man ohnehin schon ist.

Das ist unangenehm, weil beim Verfolgen des Zombie-Links alle Anzeichen für das Erscheinen einer neuen Seite auftreten: Die aktuell angezeigte Seite verschwindet, der Browser baut die Verbindung zum Server auf, die entsprechenden Animationen laufen, das Browser-Fenster füllt sich mit Inhalt … aber dem selben wie vorher! Erschwerend kommt hinzu, dass viele Websites Elemente enthalten, die sich bei jedem Aufruf ändern, zum Beispiel Werbebanner. Auf den ersten Blick kann es also scheinen als wäre man auf einer anderen Seite angekommen.

Szenarien:

Die Benutzer haben bereits einen langen Text gelesen, sind am Ende angekommen, und wollen jetzt mehr zu diesem Thema erfahren. Ein Link scheint zu weiterem Material zu führen. Natürlich haben die Benutzer inzwischen den genauen Wortlaut des Anfangs des gerade gelesenen Textes vergessen. Nach dem Klick auf den Zombie-Link gelangen sie zu …

Die Benutzer landen über eine Suchmaschine auf einer Unterseite einer größeren Website. Exakt dort findet sich aber nicht der gewünschte Inhalt. Im Navigationsbereich steht jedoch ein Link mit einer vielversprechenden Überschrift. Hinter diesem Link verbirgt sich …

Zombie-Links werden zum größten Teil von Content Management Systems erzeugt, also Software, die automatisch Inhalte und Navigation auf einer Website strukturiert. Dazu gehören komplexe Dinge wie Joomla oder typo3, aber genau so Blogs (Wordpress, blogger) und Community-Systeme (drupal).

Diese Software hat an vielen Stellen Listen mit Links zu erzeugen, um zum Beispiel alle Artikel einer bestimmten Rubrik anzuzeigen.

In der Logik eines CMS geschieht immer folgendes:

Aktuellen Kontext feststellen.
Das ist zum Beispiel eine Rubrik, ein Datum oder ein bestimmter Benutzer. In diesen Kontext fällt auch die gerade angezeigte Seite, sie befindet sich selbstverständlich in ihrem eigenen Kontext.

Passende Artikel/Rubriken/Blog-Posts aus der Datenbank zusammenstellen.
Die aktuell angezeigte Seite ist unter den Ergebnissen dieser Datenbank-Abfrage.

HTML-Code mit Links dorthin erzeugen und ausgeben. Diese Links werden ins Navigationsmenü eingetragen, das natürlich zusammen mit den Inhalten angezeigt wird. Es entsteht somit mindestens ein Link auf die gerade angezeigte Seite.

Luxuriöse Systeme fügen in Zombie-Links zuweilen eine “active” Stylesheet-Klasse ein, zum Beispiel so:

<a href='other.html'>There</a>
<a href='this.html' class='active'>Here</a>

Dadurch kann der Zombie-Link zumindest anders aussehen als die normalen Links. Und zwar möglichst so anders, dass niemand auf die Idee kommt, darauf zu klicken. Dabei ließ sich eine Fehlbedienung zu 100% ausschließen, wenn der Link entfernt würde.

<a href='other.html'>There</a>
<span class='active'>Here</span>

Damit wären alle Probleme gelöst, der Kontext des aktuellen Inhalts bleibt erhalten, es ist klar, welche Position in der Struktur gerade angezeigt wird, es führt kein redundanter Link zur gleichen Stelle.

Warum also den Link stehen lassen? Weil sich diese billige “active”-Klasse extrem einfach automatisch in den HTML-Code einfügen lässt. Hier ein PHP-Beispiel:

if ($linkurl==$currenturl) {$class="active";} else {$class="";}
print "<a href='$linkurl' class='$active'>$linktext</a>";

Um wirklich ein nicht-klickbares Element zu erzeugen, müssten die Programmierer viel mehr schreiben, zum Beispiel:

if ($linkurl==$currenturl) {
    print "<a href='$linkurl' >$linktext</a>";
} else {
    print "<span class='$active'>$linktext</span>";
}

Und man kann doch niemandem zumuten, wegen jedem Link so einen if-Zirkus zu veranstalten!

Leider sind durch diese Sparmaßnahmen bereits viele Designer zu der Überzeugung gelangt, dass Zombie-Links ganz normal und vollkommen in Ordnung wären. Einige schreiben sie sogar in Handarbeit, wenn sie ein Web-Projekt ohne CMS umsetzen. Und finden die merkwürdigsten Begründungen, warum das logisch genau so sein muss:

“Ist doch auf allen Websites so!”
Nein, und selbst wenn Amazon, Youtube und Konsorten solchen Unsinn machen bedeutet das nicht, dass man ihnen nacheifern muss.

“Das ist wegen der Konsistenz, was auf einer Seite ein Link ist, muss auf jeder Seite ein Link sein.”
Falsch, damit werden die Grundaufgaben der Navigation untergraben: den Benutzern zu zeigen wo sie herkommen, wo sie sich befinden, welche Optionen jetzt offen stehen und was sie bereits gesehen haben.

“Ist doch praktisch, wenn die Überschrift eines Artikel auch gleichzeitig ein Reload-Button ist!”
Falsch, denn dafür gibt’s schon den Reload-Button im Browser. Genau so werden nicht auf jeder Seite “aktuelles Fenster schließen”-, “Fenster minimieren”- oder “diese Seite drucken”-Buttons eingebaut. Die handvoll Funktionen, die ein Browser bietet, sollten dankend angenommen und nicht auf verwirrende Weise dupliziert werden.

“Ist doch voll egal Mann, chill out!”
Nein, sonst brauchen wir gar nicht weiter über Webdesign sprechen. Korrekte, sinnvolle Links sind wirklich das mindeste, was ein Webdesigner zu produzieren in der Lage sein sollte.

Mit den Zombie-Links hat sich nur eine faule technische Einschränkung zum Standard erhoben. Das lässt sich leicht mit ein paar ifs oder selbstgeschriebenem HTML umgehen. Warum noch weiter diese Zombie-Link-Pest verbreiten? Mach’s lieber wie die Profis!

Rainbow to the stars

nospam@example.com (Dragan Espenschied) — Wed, 29 Aug 2007 21:46:37 +0200

Verena und Oliver von Dune wussten schon immer, dass im Internet der sprichwörtliche “Bär” “steppt”, um es mal ein wenig “salopp” auszudrücken. Das war natürlich zu einer Zeit, als der Rainbow to the Stars noch direkt ins WWW führte und auf allen Seiten Sternenhintergründe gekachelt wurden.

Das Original dieses schönen Bildes fand ich auf einer reizenden Dune-Fanseite aus Dänemark.

To all the ravers in the internet

So macht man heute Layouts mit CSS

Floats

FAP - Faux Aboslute Positioning

Empfehlenswerte Software

Windows

Macintosh

Linux (Ubuntu)

Zeitspeicherung

Geht mir fort mit euren Fonts!

5 Schriften müssen reichen

Pixel und Hints

Notlösungen

Die endlose Ödnis der Font-Diskussion

Kommunikation in Pixel Arts

Zombie-Links

Rainbow to the stars