Gedanken zum Webdesign

Die Herderschach-Homepage ist mein erstes Web-Projekt. Zuvor hatte ich bei der Gestaltung der Trainingsmaterialien erste HTML-Erfahrungen gesammelt. Daher weichen diese in ihrem Aussehen etwas von der übrigen Präsenz ab.
In diesem Artikel möchte ich darstellen, von welchen Gedanken ich mich beim Entwickeln der Herderschach-Seiten leiten lasse und meine Meinungen dazu auch gerne als Diskussionsanstoß verstehen.

Meine Grundsätze und Ziele

Bevor ich an die Arbeit ging, war die Grundstruktur der Homepage in meinem Kopf weitgehend fertig. Es bestand Klarheit darüber, welche Inhalte ich anbieten will und wie die Seite aussehen soll. Dieses Konzept hat weitgehend noch heute Gültigkeit. Sehen wir die wichtigsten Aspekte:

• Das Wichtigste ist der Inhalt. Er entscheidet darüber, wie die Seite von den Besuchern angenommen wird. Diesem Grundsatz hat sich alles andere unterzuordnen.
• Ebenso wichtig ist die Aktualität. Jede mitteilenswerte Nachricht muss schnellstmöglich auf der Seite zu lesen sein. Der Besucher muss sofort erkennen, was es Neues gibt.
• Die Gestaltung tritt ganz klar in den Dienst des Inhaltes. Sie soll die Seiten strukturieren und dem Leser Orientierung geben. Die Seiten müssen angenehm zu lesen sein. Jeglicher Schnickschnack wird vermieden.
• Wir brauchen eine einfache Navigation. Der Leser muss die Inhalte ohne Umwege und Fehlleitungen finden und sich von jeder Seite zurück zur Homepage oder den übergeordneten Inhalten orientieren können.
• Die Verzeichnisstruktur ist weitgehend identisch mit der inhaltlichen Gliederung. Davon hat zwar der Besucher nicht viel, aber dem Webmaster erleichtert es die Arbeit.
• Einziges Werkzeug zum Erstellen der Seiten ist ein einfacher Editor. Dies sorgt für schlanken Quelltext und dafür, dass der Webmaster immer Herr der Lage bleibt. Auch der Lerneffekt ist damit am größten.
• Die Seite kommt weitgehend mit einfachem HTML (und CSS) aus. Allenfalls JavaScript wird dort verwendet, wo es sich nicht vermeiden lässt oder einen informativen Mehrwert bietet.
• Alle Seiten zeichnen sich durch ein einheitliches Erscheinungsbild aus.
  Diese Forderung wird durch eine zentrale CSS-Datei umgesetzt, was obendrein die Wartung der Seiten sehr vereinfacht. Je nach Bedarf werden Layout-Angaben lokal ergänzt oder übersteuert, selbstverständlich auch mittels CSS.
  Vergleichbare Inhalte kommen im gleichen Outfit daher.

Grundgedanken zur Gestaltung

Bei der optischen Gestaltung dieser Seiten lasse ich mich von einer Reihe einfacher Grundsätze leiten.

• Klare Struktur hinsichtlich Überschriften, Absätzen, Aufzählungen, Tabellen usw.
• Verzicht auf spielerische Elemente wie Laufschrift, blinkende Zeichen und dergleichen. Beherrschende Schriftfarbe ist Schwarz, für höherwertige Überschriften Blau. Andere Farben kommen extrem selten zum Einsatz und bedeuten dann eine ganz außergewöhnliche Heraushebung des betreffenden Sachverhalts. Der Hervorhebung im laufenden Text dient vorwiegend der Fettdruck, gelegentlich die einfache Vergrößerung. Auch kursive Schrift wird eingesetzt und zwar für Zitate, Quellenangaben und technische Bemerkungen. Unterstreichungen werden nur angewendet, wo sie nicht als Linktext missverstanden werden können.
• Im Kopf jeder Seite sind einheitlich gestaltete Navigationsbuttons zur Startseite und zu den wichtigsten übergeordneten Hierarchiestufen der aktuellen Seite angebracht. Der Nutzer weiß immer:
  • wo er sich er gerade befindet und
  • wie er von dort zu den wahrscheinlichsten Zielen kommt.
• Bilder werden immer ohne Rand dargestellt. Sie dienen der Illustration und sind in der Regel nicht als Link-Images gedacht. Die Größe von Fotos wird so bemessen, dass die Ladezeit zumutbar bleibt. Hier lautet mein Grundsatz: "Qualität vor Größe". Die Bilder werden also nur sparsam komprimiert, dafür aber in kleineren Abmessungen bereitgestellt.
• Tabellen (z. B. zu sportlichen Ergebnissen) haben über alle Seiten ein einheitliches Aussehen mit Hervorhebung der Titelzeile und angemessen dargestellten Zellenrändern. Sorgfältige Darstellung solcher Tabellen betrachte ich als ein Qualitätsmerkmal des Webdesigns. Auf farbige oder verzierte Rahmen wird verzichtet.
• Horizontale Linien gliedern den Inhalt einer Seite zusätzlich. Sie werden zweckmäßig aber sparsam eingesetzt.
• Sonderzeichen (z. B. ½ und é ) werden korrekt maskiert. Dabei beschränke ich mich auf jene Zeichen, die von allen Browsern korrekt dargestellt werden. Die deutschen Umlaute (ä, ö, ü, ß) habe ich bisher nicht maskiert. Ich gehe davon aus, dass die Besucher unserer Webseite zu 99% deutschsprachig sind und diese Zeichen korrekt dargestellt bekommen.

Tabellenbasiertes Layout – Pro und Contra

Es gab eine Zeit, da galt es als normal, dass man ein mehrspaltiges Layout der Seite herstellte, indem man die Inhalte in eine rahmenlose Tabelle packte. Inzwischen gilt dieses Verfahren als überholt und widerspricht der "reinen Lehre" der Trennung von Inhalt und Layout. CSS-Elemente gelten als zeitgemäßes Gestaltungsmittel und bieten in der Tat weit mehr und flexiblere Möglichkeiten, ein angenehmes Erscheinungsbild der Webseite zu schaffen. Tabellen sollen hingegen den Anwendungsfällen vorbehalten bleiben, in denen es wirklich um die Präsentation tabellarisch geordneter Daten geht.
Ich teile diese Ansicht weitgehend, werde mich ihr aber nicht sklavisch unterwerfen.
Dort wo es mir angebracht erscheint, wird man auch auf meinen Seiten weiterhin rahmenlose Tabellen als Mittel des Spaltenlayouts finden. Für ihre gelegentliche Anwendung sprechen vor allem folgende Gründe:

• Ein tabellenbasiertes Layout ist schnell und einfach zu notieren.
• Wenn man das tabellenbasierte Layout überlegt einsetzt, entspricht die tatsächliche Darstellung sehr gut der Vorstellung des Entwicklers.
• Tabellenbasiertes Layout wird von allen Browsern verstanden und weitgehend identisch interpretiert. Es ist zukunftssicher.

Natürlich spricht auch manches gegen diese Darstellungsform:

• Bei komplexen Strukturen wird ein Layout mit geschachtelten Tabellen schnell unübersichtlich und schwer wartbar. Wartbarkeit ist ohnehin ein Schwachpunkt, weswegen diese Strategie für Seiten deren Layout sich häufig ändert, kaum in Frage kommt.
• Die Gestaltungsmöglichkeiten sind relativ beschränkt.
• Bei deutlicher Änderung der Fenstergröße kann sich die Darstellung evtl. doch von der Intention unterscheiden.
• Tabellenbasiertes Layout führt u.U. zu subjektiv verlängerten Ladezeiten, da der Browser immer zunächst die gesamte Tabelle laden muss, bevor er eine korrekte Darstellung anbieten kann.

Für komplexere Darstellungen und insbesondere das Einbinden von Bildern in den fortlaufenden Text verwende ich also moderne CSS-Elemente (Stichwort "float"). Einfache Layout-Aufgaben (z. B. bei den Bildergalerien) werde ich hingegen auch weiter tabellenbasiert lösen.

HTML-Strict oder HTML-Transitional?

Zunächst hatte ich alle Seiten in der HTML-Variante "transitional" entworfen. Diese enthält noch eine Reihe von Sprachelementen, die inzwischen vom WWW-Konsortium als "missbilligt" gebrandmarkt sind. Sie wurden durch (in der Regel leistungsfähigere) CSS-Elemente ersetzt. Obwohl man sicher sein kann, dass die gängigen Browser auf lange Sicht auch diese Elemente korrekt anzeigen werden, war es mein Ehrgeiz, eine Seite anzubieten, die im Sinne der HTML-Variante "strict" korrekt ist. Der Aufwand für diese Umstellung war überraschend gering. Lediglich die mit dem Programm Chessbase erstellten nachspielbaren Partien erfüllen die Anforderungen an HTML-strict nicht. Bei einigen Partien (Partie-Rubrik im Hauptteil der Homepage) habe ich mit großem Aufwand eine validierbare Fassung erstellt.

An zwei Stellen stieß die Umstellung auf Grenzen der Machbarkeit, die nur mit Workarounds lösbar waren:

Das Target-Attribut in Verweisen

• Um dieses Attribut ist unter den Webdesignern ein regelrechter Glaubenskrieg entbrannt. Es gibt dem Entwickler die Möglichkeit, einen Link so zu gestalten, dass die angeklickte Seite in einem neuen Fenster bzw. einem neuen "Tab" geöffnet wird. Die Puristen der Web-Gemeinde, darunter auch einige selbsternannte Wächter der reinen Lehre in diversen Foren, betrachten es als Bevormundung, dem Nutzer nicht selbst zu überlassen, ob er ein neues Fenster öffnen will. Damit haben sie zweifellos Recht, wenn dieses Mittel unbedacht eingesetzt wird. Dem ist nun aber entgegenzuhalten, dass es durchaus sinnvoll sein kann, das Öffnen eines neuen Fensters gezielt als Stilmittel einzusetzen. Ich verwende es vor allem beim Verzweigen zu nachspielbaren Partien und beim Öffnen fremder Webseiten. Ich setze dieses Mittel behutsam und bewusst ein, will aber nicht ganz darauf verzichten.
  
  Es musste also ein Weg gefunden werden, das Target-Attribut zu nutzen und trotzdem HTML-strict-konform zu bleiben. Die Lösung fand ich auf der Seite des israelischen Schach-Enthusiasten Lucian Millis. Sie besteht in einem kleinen JavaScript (ok – das muss eben sein), welches die Seite beim Laden nach Links durchsucht und diesen jeweils das Target-Attribut anhängt. In einigen Fällen werden die Links noch genauer analysiert, um auch wirklich nur die "externen" Seiten bzw. die Partien zu erwischen. An manchen Stellen wird das Skript mit einem Formular (bestehend aus einem Ankreuzfeld) aufgerufen. Dort kann der Besucher selbst entscheiden, ob er externe Seiten in einem neuen Fenster öffnen möchte oder nicht. Diese letztgenannte Variante hat noch einen kleinen Schönheitsfehler, da sie nicht ganz korrekt funktioniert, wenn der Besucher mit den Vor- und Zurück-Buttons im Browser-Cache herum springt.
  Um es noch einmal zu verdeutlichen: Durch diesen Kunstgriff sind meine Seiten jetzt statisch HTML-strict validiert und enthalten keine Target-Attribute. Erst nach dem Laden im Browser wird dieses Attribut hinzugefügt.

Die Angabe einer abweichenden Start-Nummer bei einer Aufzählung

• Man könnte es fast als Übereifer bezeichnen, dass aus der strengen HTML-Variante die Möglichkeit gestrichen wurde, eine geordnete Aufzählung mit einer anderen Zahl als "1" zu beginnen. Das bisher dafür übliche Attribut "start=n" wurde nämlich missbilligt. In der Tat enthält CSS ein relativ komplexes Konstrukt mit dem Namen "Pseudolement mit automatischer Nummerierung". Dies ist aber relativ unhandlich (was natürlich keine Entschuldigung ist) und wird (jedenfalls gegenwärtig noch) von den meisten Browsern nicht korrekt dargestellt. Daher kam es für mich nicht in Frage.
  In meinem Anwendungsfall (siehe Trainingsmaterial Nr. 16) sollte eine Aufzählung erst bei der Zahl 6 beginnen. Dafür musste ein Workaround gefunden werden. Er besteht darin, fünf leere Einträge in der Aufzählungsliste vorzuschalten und diese mit dem CSS-Attribut "visibility:hidden" zu verstecken. Das hat nun noch den Nachteil, dass dabei Platz für die versteckten Elemente frei gehalten wird. Es ergab sich also ein unschöner freier Bereich vor Beginn der Aufzählung.
  Dem sollte man eigentlich mit "display:none" (Anzeigeunterdrückung ohne Platzhalter) entgegenwirken können. Doch das scheiterte nun wieder daran, dass dann für die ausgeblendeten Punkte auch keine Nummerierung vergeben wurde. Ich musste also bei "visibility:hidden" bleiben. Der freie Bereich wurde auf ein Minimum eingeschränkt, indem ich diesen Zeilen die Schriftgröße "0" zuordnete. Der Platz für 5 Einträge wird also nach wie vor reserviert, aber in der Größe Null.

Webmasters Leid: Die verschiedenen Browser

Natürlich soll man so entwickeln, dass alle gängigen Browser eine Darstellung bieten, die der Vorstellung des Autors möglichst nahe kommt. Das ist eine Selbstverständlichkeit, aber es wird einem nicht einfach gemacht. Ein kleines Beispiel zeigt, wie 3 der wichtigsten Browser (jeweils in Standard-Einstellung) mit einer recht einfachen Konstruktion umgehen.
Dabei wird innerhalb einer Aufzählungsliste eine der Textzeilen mit einem kleinen Bild eingeleitet. Das Bild ist mit "float:left" innerhalb dieser Zeile positioniert.
Aber alle 3 Browser haben ihre eigene Vorstellung davon, wie es beim Nutzer aussehen soll:

Internet Explorer (Version 6 und 7)	Firefox 1.5	Opera 8.52

Alle 3 Darstellungen sind sicher akzeptabel und geben die gewollte Gliederung gut wieder. Ich würde dennoch jene des Firefox bevorzugen. Sie ist optisch ein wenig gefälliger und wohl auch logisch am korrektesten. Der IE zieht das Bild vor den Aufzählungspunkt, obwohl es innerhalb des List-Items notiert ist. Opera lässt bei diesem einen Eintrag das Gliederungszeichen ganz weg. Man mag streiten, ob dies alles noch innerhalb der Gestaltungstoleranz eines Browsers liegt, oder aber einen "Bug" darstellt…
Allerdings zeigen auch die Browser-Entwickler, dass sie lernfähig sind: In Opera 9 entspricht die Darstellung jetzt jener des Internet Explorers (… dann hätten sie es auch gleich richtig machen können).

Ähnlich erging es mir als ich mich entschloss, alle Seiten mit einem dezenten Rahmen zu umgeben. Über das zentrale Stylesheet und eine Border-Definition für den body sollte das problemlos möglich sein. Das war es auch, lediglich die Gecko-Browser (Firefox und Opera) tanzten bei einer einzigen Seite aus der Reihe. Es handelte sich um die Übersicht der Spielerporträts. Diese Seite bestand damals aus drei jeweils links-floatenden div-Containern. Dadurch wurde ein korrektes dreispaltiges Layout erzeugt. Der Internet Explorer hatte auch kein Problem damit, hier einen Rahmen zu zeichnen. Die beiden anderen Browser beendeten den Rahmen aber schon vor dem ersten floatenden DIV-Container, obwohl natürlich ein Ende des body hier nicht gegeben war. Die folgenden Bilder zeigen den Effekt in zwei verschiedenen Browsern. In diesen Bildern wurde der Rahmen zur Verdeutlichung breiter gewählt.

Internet Explorer 7 oberer Rand	Internet Explorer 7 korrekter unterer Rand	Firefox 2.0 und Opera 9.2 Die Umrandung endet mitten in der Seite am ersten floatenden DIV.

So blieb mir nur, das dreispaltige Layout hier durch eine Tabellenkonstruktion abzubilden – nicht schön, aber sicher akzeptabel. Dann haben alle gängigen Browser auch kein Problem mit dem Rahmen.

Features, die nur von einem Teil der Browser unterstützt werden, kann ich nur einsetzen, wenn sie für das Funktionieren der Webseite nicht essentiell sind. Vor allem die CSS-Unterstützung ist nicht bei allen Browsern so gegeben, wie man sich das wünscht. Dennoch konnte ich nicht widerstehen, bei der Formatierung der Navigations-Buttons den Child-Selektor anzuwenden, der vom Internet Explorer erst ab Version 7 erkannt wird. Außerdem spendierte ich diesen Buttons abgrundete Ecken – ein Vorgriff auf CSS-3, welches bisher nur Mozilla-basierte Browser (also z. B. der Firefox) interpretieren können.

JavaScript

Der Einsatz von JavaScript zur Seitengestaltung wird oft als Sicherheitsrisiko gesehen. Deshalb stellen manche sehr vorsichtigen Menschen ihre Browser so ein, dass sie prinzipiell keine JavaScript-Anweisungen ausführen. Wer sich etwas besser auskennt, definiert eine Gruppe von Webseiten als "vertrauenswürdig" und lässt auf diesen Seiten die JavaScript-Ausführung zu. Die Herderschach-Seite sollte zu diesem Bereich vertrauenswürdiger Seiten gehören.
Lange Zeit kam JavaScript auf unserer Seite nur in 3 Zusammenhängen vor:

• Alle nachspielbaren Partien sind mit Chessbase erstellt und diese Lösung basiert auf JavaScript. Wer die Anwendung dieser Technologie nicht zulässt, bringt sich um den Lern- und Unterhaltungseffekt nachspielbarer Partien.
• Wie bereits erklärt, verwende ich JavaScript um bestimmte Seiten in einem neuen Fenster zu öffnen. Bei abgeschalteter Script-Unterstützung öffnen sie sich im gleichen Fenster. Das wird man akzeptieren können.
• Die Startseite enthält ein kleines JavaScript-Programm. Es blendet einen speziellen Geburtstagsgruß ein, wenn ein aktives Mitglied der Schach-AG seinen Ehrentag feiert. Eine nette Spielerei, bei deren Programmierung ich viel über dynamisches HTML und das DOM-Modell gelernt habe – aber natürlich allemal verzichtbar…

Noch mehr JavaScript

Je mehr ich mich mit JavaScript beschäftigte, um so mehr faszinierte mich die Möglichkeit, dem Leser unserer Seiten auch echten Mehrwert durch JavaScript anzubieten. Im History-Bereich befand sich nämlich eine Tabelle aller in den Schulschach-Teams eingesetzten Spieler mit ihren Bilanzen. Mir schwebte die Möglichkeit vor, dem Besucher eine Möglichkeit anzubieten, diese Tabelle (und eine weitere mit den Medaillengewinnern) interaktiv nach jeder beliebigen Spalte (z. B. nach der Anzahl der Siege oder der prozentualen Ausbeute) zu sortieren.
Im Projekt "SELFHTML" fand ich ein grobes Gerüst für eine solche Idee. Obwohl es noch einen interessanten Bug enthielt, war dies ein guter Ausgangspunkt für tieferes Eindringen in die JS-Welt. Ich konnte den Bug beseitigen und einige weitere Verfeinerungen vornehmen (z. B. die Sortierung nach einer nicht angezeigten Spalte und das programmierte Berechnen einzelner Werte) und nach einer durcharbeiteten Nacht und einem kurzen Gedankenaustausch mit Web-Guru Stefan Münz (Danke!) war eine vorzeigbare Lösung entstanden, die man im History-Bereich dieser Homepage sehen kann. Für Benutzer ohne JavaScript gibt es eine statische Tabelle – alle anderen erhalten das interaktive Angebot.
Ich habe nebenbei viel über JavaScript gelernt und denke, dass sein Einsatz in diesem Fall mehr gerechtfertigt ist, als bei optischen Effekten und Menü-Spielereien.

Organisation der Arbeit

• Alle Seiten werden natürlich zunächst auf dem lokalen PC entwickelt. Erst wenn sie für gut befunden sind, wandern sie auf den Server. Dazu nutzte ich zunächst das Programm FTPSync, welches sich nach Erprobung mehrerer anderer Programme als die beste Wahl erwiesen hatte. Vor allem die Synchronisierung (also die Übertragung der geänderten Seiten) ist ideal gelöst.
  Leider funktioniert dieses Programm nur bis zu 5000 Dateien in einem Verzeichnis zuverlässig. Der Trainingskomplex hat aber diese Grenze inzwischen überschritten. Daher bin ich nunmehr auf das Programm "ftp-uploader" angewiesen, welches meinen Vorstellungen ebenfalls nahe kommt.
• Bevor ich eine Seite auf den Server lade, wird sie mit dem Validator des WWW-Konsortiums getestet. Erst wenn dies fehlerfrei durchlaufen wird, kann ich sicher sein, dass alle Browser die Seite korrekt anzeigen.
• Unter Windows XP ab Service Pack 2 gibt es ein Problem in der Darstellung aktiver Inhalte (und dazu gehört JavaScript) vom lokalen PC. Das kollidiert mit dem Angebot, die Trainingsmaterialien auch offline zu nutzen. Man kann den Internet Explorer so einstellen, dass er sie dennoch ausführt. Diese allgemeingültige Einstellung wird aber mancher Nutzer als zu unsicher empfinden. Daher setze ich eine Umgehungslösung ein, die einen von Microsoft autorisierten Kommentar ("mark of the web") in den Seitenkopf einfügt. Hierzu dient das Programm "savedfrom". Einzelheiten zu dieser Problematik findet man auf vielen Fachseiten, wenn man nach Begriffen wie "mark of the web" und "savedfrom" sucht.
• Ich teste meine Seiten mit der jeweils aktuellsten Fassung von Internet Explorer, Firefox und Opera. Erst wenn alle 3 Browser ein neues Feature korrekt darstellen, setze ich es auf der Homepage ein. Ausnahmen (s. oben) gibt es nur für Details, die nicht essentiell für das Funktionieren der Seiten sind und auch als Alternativdarstellung noch akzeptabel sind.
• Zur Bildbearbeitung verwende ich die Freeware-Tools Picasa und IrfanView. Ich bin auf diesem Gebiet noch absoluter Laie und beschränke mich daher auf wenige Bearbeitungsfunktionen.
• Regelmäßig verfolge ich die Zugriffsstatistiken der Web-Präsenz. Sie sind mir eine wichtige Hilfe, die Wirkung der Seite einzuschätzen. Dabei interessieren mich vor allem folgende Fragen:
  • Wie entwickelt sich das Interesse an der Homepage generell?
  • Welche Angebote werden besonders häufig genutzt, welche nicht oder selten?
  • Über welche Suchbegriffe finden die Gäste zu unserer Seite?
  • Von welchen Seiten kommen die Gäste? Wo sind wir verlinkt?

Thomas Binder, letzte Änderung im Mai 2007 – Der Artikel wird bei Gelegenheit ergänzt.