Webdesign ist die ständige Neuerfindung des Rades

Navigation, Header, Footer, … Webdesigner verbringen die meiste Zeit mit der Gestaltung immer gleicher Elemente, deren sinnvolle Darstellung eigentlich Aufgabe des Browsers sein sollte.

Website, die historische Räder als Neuheit präsentiert.
(Quelle des Räderfotos: Daderot, CC0 1.0)

Heutige Websites von Einzelpersonen sind sehr inhaltsorientiert. Die meisten sogenannten Blogger haben wahrscheinlich nicht einmal ansatzweise eine Ahnung von Webdesign oder Webentwicklung, sondern melden sich einfach bei einem Dienst wie Blogger (Gratulation übrigens für den originellen Namen!) an, um gleich im Anschluss loszuschreiben. Und das finde ich grundsätzlich gut so.

Als ich mit meiner ersten Website online ging, war das nämlich noch umgekehrt. Die meisten Leute, die privat eine Website hatten, verbrachten den Großteil ihrer Zeit mit Design und Programmierung. Das Ergebnis waren haufenweise individuelle Seiten, auf denen dann aber nur selten mehr zu lesen war als »endlcih ist meine hompage online!!!«.

Als Webmaster dieser alten Schule – manch einer würde wohl sagen: altmodischer Spinner – habe ich auch heute noch WIESOSO? händisch in den Sprachen HTML, CSS, PHP und JavaScript geschrieben. Nach unzähligen Stunden Entwicklungsarbeit an der Navigation habe ich mir schließlich die Frage gestellt, warum die Implementierung einer benutzerfreundlichen Navigation überhaupt meine Aufgabe als Webentwickler ist. Eine andere Lösung wäre nämlich wesentlich sinnvoller.

Gleiche Navigation in immer anderer Form

Das Dumme an der Gestaltung einer Website-Navigation ist, dass diese auf fast allen Websites dem gleichen Schema folgt und trotzdem stets aufs Neue erstellt werden muss. Es handelt sich dabei in der Regel um eine Liste aus anklickbaren Menüpunkten, oft mit Unterkategorien. Aber obwohl diese Grundstruktur praktisch immer identisch ist, sieht die Navigation auf fast jeder Website anders aus. Mal ist sie links, mal ist sie oben – mal klappt beim Anklicken ein Untermenü aus, mal ändert sich nach einem Klick das ganze Menü – mal wandert die Navigation beim Scrollen mit, mal bleibt sie an fixer Position …

Aus Sicht der Benutzerfreundlichkeit ist es eine Katastrophe, wenn Dinge, die eigentlich gleich sind, nicht gleich funktionieren. Man stelle sich vor, Verkehrsampeln wären ähnlich inkonsistent: Mal wird »Stopp« durch ein rotes Licht gekennzeichnet, zwei Straßen weiter durch einen Stopp-Schriftzug und noch eine Straße weiter durch eine Schlumpf-Figur, die eine Stopp-Tafel hochhält … Klar könnte man sich mit etwas Grips und Phantasie die jeweilige Bedeutung zusammenreimen, aber gerade im Straßenverkehr sollte man seine Aufmerksamkeit eigentlich auf wichtigere Dinge als kreative Ampelvariationen lenken.

Ein Standard-Werk für Benutzerfreundlichkeit im Web trägt nicht umsonst den Namen »Don’t Make Me Think«. Wenn ich eine Website besuche, will ich etwa nicht darüber nachdenken müssen, wo ich die Navigation finde. Dass die Navigation üblicherweise oben oder links liegt, ist immerhin schon einmal eine Konvention, die das Auffinden erleichtert. Wer sie stattdessen ans Seitenende oder in die Mitte packt, ist entweder Künstler, Sadist oder beides.

Leider gibt es aber keinen enger gefassten Standard für die Website-Navigation. Deshalb bin ich als Entwickler regelrecht dazu gezwungen, das Rad neu zu erfinden, indem ich zu jeder Website die Navigation so gestalte, dass sie gut zum Rest passt.

Browser, übernehmen Sie!

Eine bessere Lösung, die man sich meiner Meinung nach zum Vorbild nehmen könnte, liefert das Textsatzsystem LaTeX (nicht zu verwechseln mit dem glänzenden Zeug, aus dem Sadomaso-Wäsche hergestellt wird). Damit kann man ähnlich wie in HTML strukturierte Textdokumente schreiben, allerdings mit dem Ziel, daraus eine PDF-Datei zu machen.

Wenn ich in LaTeX einen längeren Text mit Kapiteln und Überschriften schreibe und diesen in eine PDF-Datei exportiere, muss ich mich überhaupt nicht um irgendeine Navigationsmöglichkeit kümmern. Das Programm, mit dem ich die PDF-Datei anschließend lese, kann anhand der Überschriften automatisch ein Inhaltsverzeichnis darstellen, über das ich zu jeder beliebigen Überschrift springen kann.

Automatische Navigation in einem PDF-Dokument
Wenn ich meine in LaTeX geschriebene Bachelor-Arbeit im PDF-Betrachter Evince öffne, wird auf Basis der Überschriften automatisch ein Menü eingeblendet.

In diesem Fall habe nicht ich als Ersteller der Datei die Navigationsgestaltung übernommen, sondern der Hersteller der Software, in der die Datei angezeigt wird. Das bietet wesentliche Vorteile:

  • Die Navigation ist über alle angezeigten Inhalte konsistent. Egal, ob Du eine Dissertation über Hämorrhoiden oder ein Kochbuch liest – die Navigation funktioniert immer gleich.
  • Du kannst theoretisch durch die Auswahl oder Konfiguration Deiner Software selbst entscheiden, wie die Navigation dargestellt wird – etwa als Seitenleiste, Drop-Down-Menü oder als Ortstafeln auf einem Schlumpfhausen-Bild. Als theoretisch bezeichne ich diese Möglichkeit deshalb, weil ich nicht weiß, ob es hier bisher tatsächlich eine Auswahl gibt oder ob nicht alle Hersteller von PDF-Betrachtern den selben Einheitsbrei produzieren.
  • Die Dateiersteller gewinnen Zeit, um sich auf die Inhalte zu konzentrieren, weil nicht jeder aufs Neue die Navigation implementieren muss.
  • Design- oder Programmierfehler in der Navigation sind unwahrscheinlicher, wenn diese nicht von jedem Hobbyschreiberling neu erstellt werden muss.

Auf die gleiche Art könnte man das auch im Web lösen. Das Programm, das die Gestaltung der Navigation übernehmen sollte, wäre in diesem Fall der Browser.

Struktur vs. Gestaltung

Das wahrscheinlich größte Problem an dem Konzept ist, dass man eine strenge Trennung zwischen Struktur und Gestaltung benötigt, wobei ich mit »Struktur« ein maschinenlesbares Format meine. Dazu gehört im LaTeX- und PDF-Beispiel vor allem, dass man Überschriften auch dezidiert als Überschriften auszeichnet und nicht nur die Schriftgröße erhöht, um einen beliebigen Text wie eine Überschrift aussehen zu lassen.

Man kann das auch in Textverarbeitungsprogrammen wie Microsoft Word oder LibreOffice Writer beobachten: Wenn man ein automatisches Inhaltsverzeichnis ins Dokument einfügt, zeigt dieses immer nur Überschriften an, die auch als solche deklariert sind. Die Unterüberschrift, die man nur hervorgehoben hat, indem man mal eben auf die Fettschrift-Schaltfläche mit dem großen B geklickt hat, scheint dort nicht auf, weil der Computer keine Ahnung hat, warum dieser Text fett geschrieben ist. Solche Überschriften-Dummys sind wie Türen vor einer Ziegelwand.

Auch im Web herrscht heute grundsätzlich eine recht strenge Unterscheidung zwischen Struktur und Gestaltung. Es werden sogar zwei unterschiedliche Sprachen dafür verwendet: HTML für die Struktur und CSS für die Gestaltung. Aber auch hier wird jede Menge Schindluder getrieben und längst nicht alles, was für den menschlichen Betrachter nach einer bestimmten Struktur aussieht, ist auch eine solche.

Erschwerend für ein automatisch generiertes Menü kommt außerdem hinzu, dass eine Website ja in der Regel mehrere Unterseiten hat, die miteinander verknüpft sind. Das macht die Sache deutlich komplizierter als einfach nur die Überschriften in einem einzelnen Dokument zusammenzufassen.

Wozu optische Gestaltung im Web?

Jetzt stellt sich die Frage: Warum müssen wir überhaupt Elemente im Web optisch gestalten? Könnten wir nicht nur die Struktur festlegen und die Darstellung komplett dem Browser überlassen? Dann hätten wir die gleichen Vorteile wie schon im PDF-Beispiel erwähnt: Konsistenz, Wahlfreiheit, mehr Zeit für die Inhaltserstellung und weniger Fehler. Die Navigation ist dabei nur das prominenteste Beispiel – ebenso stellt sich die Frage, warum wir einfache Textabsätze, Tabellen oder Weiß-der-Kuckuck-was immer wieder neu gestalten müssen.

Wer ganz radikal ist, philosophiert nicht lange, sondern zieht es einfach durch und verzichtet weitgehend auf Gestaltung. Das bekannteste Beispiel dafür ist wahrscheinlich Fefes Blog. So wie ich am Anfang dieses Artikels über die technisch ahnungslosen Blogger schreibe, könnte sicher Fefe über mich schreiben, weil er sich noch einmal um ein Eckhaus weiter auf die wirkliche Basis-Technik des World-Wide-Web beschränkt.

Aber schön ist eine Seite so ganz ohne Gestaltung nicht. Selbst Fefe nutzt ein paar Formatierungen, um zumindest einzelne Textstücke rechts oder mittig auszurichten.

Das größte Problem im Formatierungsverzicht sehe ich darin, dass die Standard-Formatierung der Browser einfach grauenhaft ist. Insbesondere laufen Texte immer über die gesamte Breite des Browserfensters. Da Monitore im Lauf der Jahre schneller in die Breite gewachsen sind als ihre stubenhockenden Nutzer, ist eine einzelne Zeile heute mitunter so lang, dass man an ihrem Ende nur noch mit Glück den fehlerfreien Sprung in die nächste Zeile schafft. Auch die Zeilenabstände sind meistens zu gering und Schriftgröße sowie Schriftart sind nur schlecht zum Lesen am Bildschirm geeignet.

Wikipedia-Artikel ohne CSS
Ein Wikipedia-Artikel in Firefox’ Standard-Formatierung auf einem Breitbildmonitor. Die extralange Zeile beim Lesen nicht zu verlieren ist hier ein lustiges Konzentrationsspiel für Jung und Alt.

In vielen Fällen gibt es für Benutzer durchaus die Möglichkeit, diverse Standardeinstellungen zu ändern. Aber solche Optionen haben immer einen Haken: Sie werden von der absoluten Mehrheit nie genutzt. Fefe kann sich den Verzicht auf Design wahrscheinlich leisten, weil er in erster Linie aluhut-tragende Technik-Freaks anspricht. Das deckt sich aber nicht mit jedermanns Zielgruppe.

Rückblick: Lösung gescheitert

Die Navigation dürfte nun etwas sein, was im Web vom Anfang an keine besondere Beachtung bekommen hat. Ganz ohne Formatierung kann ich eine Navigation praktisch nur als eine reine Auflistung von Links erstellen, was mehr an das Inhaltsverzeichnis in einem Buch erinnert als an das, was man sich heute unter einer Website-Navigation vorstellt.

Historisch betrachtet klingt das auch durchaus logisch – immerhin haben sich gewisse Dinge erst einmal entwickeln müssen. Die Grundlagen des Web gehen auf das Jahr 1989 zurück. Wenn man sich den technischen Stand damaliger Computer und Monitore ansieht, ist es nicht verwunderlich, dass die Denkweise noch stärker vom Buchdruck beeinflusst war als heute und zu breite Monitore für viel zu lange Textzeilen waren auch noch lange kein Thema.

In weiterer Folge gab es dann aber durchaus eine Entwicklung, die das Potenzial gehabt hätte, das Menü in den Browser auszulagern, nämlich das Link-Element in HTML. Die Bezeichnung ist leider etwas verwirrend, denn mit »Link« ist hier nicht etwa das gemeint, was man auf einer Internetseite als Link wahrnimmt (in HTML ausgezeichnet als <a>), sondern eine Verknüpfung, die vorerst für den Betrachter unsichtbar ist (in HTML ausgezeichnet als <link>).

Den meisten Webdesignern ist dieses Element wahrscheinlich nur bekannt, um damit Formatierungsinformationen (CSS) auf einer Seite einzubinden. Aber mit diesem Element ist es auch möglich, auf andere Dokumente zu verweisen und anzugeben, in welcher Beziehung sie zur aktuellen Seite stehen. So könnte ich hier in diesem Artikel etwa mit dem Schlüsselwort »Contents« auf die Übersichtsseite aller Artikel verweisen, mit »Next« auf den nächsten Artikel und so weiter.

Die Krux an der Sache: Wie schon erwähnt, ist das für den Benutzer unsichtbar. Ich könnte es machen, aber Du würdest nichts davon sehen. Damit der Browser selbstständig ein Menü darstellen könnte, müsste er diese Elemente interpretieren. Ärgerlicherweise tat er das früher auch, aber hat diese Funktion wieder entfernt. Ich kann mich erinnern, dass mir zumindest Firefox diese Einträge auf meiner alten Website tatsächlich noch in einem Menü angezeigt hat, aber offensichtlich konnte sich das nicht durchsetzen.

Ausblick: Rettung naht

Leider ist es immer etwas schwierig, althergebrachte Dinge zu ändern – erst recht, wenn sie sich bereits ausgebreitet haben wie ein Grippevirus in einer Kuschelgruppe. Es wird niemand Millionen von Internetseiten dazu bringen, von heute auf morgen ihre Menüdarstellung an den Browser abzugeben. Aber ich sehe ein paar positive Entwicklungen, die auf lange Sicht doch dazu führen könnten.

Allem voran wurden mit HTML 5 erstmals Möglichkeiten eingeführt, um eine ganze Reihe typischer Webseitenelemente wie Navigation, Inhaltsbereich, Header und Footer explizit als solche auszeichnen. Und nach meiner Beobachtung wird das auch tatsächlich genutzt. Solche Strukturelemente sind eine Grundvoraussetzung dafür, dass der Browser passende, einheitliche Formatierungen anwenden kann.

Weiter bietet Firefox mittlerweile auf manchen Seiten einen sogenannten Lesemodus an, der recht prominent in der Adressleiste präsentiert wird. Wenn man diesen aktiviert, wird eine Seite etwa so dargestellt, wie es eigentlich immer sein sollte: Mit beschränkter Zeilenlänge und gut lesbarer Schrift … aber leider noch komplett ohne Menü.

Wikipedia-Artikel im Lesemodus
Der selbe Wikipedia-Artikel wie weiter oben, hier in Firefox’ paradox anmutendem Lesemodus. Über die beiden Symbole am linken Rand kann man den Lesemodus beenden oder die Darstellung konfigurieren.

Eigentlich ist es ein Armutszeugnis, wenn ein Browser, der ja in erster Linie ein Leseprogramm ist, einen separaten Lesemodus benötigt. Das ist, als hätte mein Schreibtischsessel einen separaten Sitzmodus oder ein Messer einen Schneidmodus. Aber es ist zumindest eines – nämlich ein Hinweis darauf, dass man die bestehenden Probleme erkannt hat.

Kommentare

Neuen Kommentar schreiben

Michael Treml, 2017-02-01 23:08:

Danke für das Lob – Und Gratulation zum allerersten Kommentar auf diesem Blog! ;-)

Bisherige Kommentare

  • Tony T

    Sehr amüsant geschrieben, und Recht hast du sowieso! Gefällt mir!

    • Michael Treml (Seitenbetreiber)

      Antwort an Tony T:

      Danke für das Lob – Und Gratulation zum allerersten Kommentar auf diesem Blog! ;-)