clemisan.de

Typische Missverständnisse bezüglich der Webseitengestaltung

In vielen Diskussionen um Fehlverhalten von Browsern und Problemen bei der Webseitengestaltung sind mir immer wieder verschiedenen Aussagen begegnet die ich hier einmal sammeln und beantworten möchte. Es sind Erkenntnisse die ich beim Lesen in Newsgruppen und Diskutieren mit anderen Fachleuten gesammelt habe. Diese Erkenntnisse sind also nicht originär von mir entwickelt, sondern adaptiert und zusammengefasst. Der Text wurde ca. im Jahr 2001 geschrieben.

Missverständnis: Webseiten werden programmiert

Unter ‘Programmieren’ versteht man normalerweise einen Programmcode zu erstellen, d.h. ein in einer Programmiersprache ein Programm zu bauen. Webseiten sind Dokumente und keine ausführende Programme. Insofern ist es falsch davon zu sprechen eine Webseite zu programmieren.

Des weiteren spricht man auch nicht von HTML Befehlen sondern von Markierung (für das Markup) oder besser Auszeichnung eines Elements im Dokument. Mit HTML-Markup beschreibt man in einem Dokument, welches die Inhaltsteile sind, und wie sie logisch angeordnet sind; einer Gliederung gleich oder ähnlich (siehe dazu auch die Idee von Outlines'). HTML-Tags sind auch keine Anweisungen. HTML-Tags zeichnen Text aus.

Für weitere Informationen ist folgende Webseite interessant: Programs vs. markup or why HTML authoring is not programming. Zur Definition von Programmiersprachen hat die Deutsche Industrie Norm Ihre eigene Vorstellung (DIN 44300) oder es gibt die Möglichkeit den Begriff program im Foldoc

Des weiteren bin ich inzwischen auf den Text von Jukka Korpella aufmerksam gemacht worden: Programs vs. Markup.

Missverständnis: Webseiten für alle Browser zu schreiben bringt Mehrarbeit

Oftmals kommt man als Websurfer auf Internetseiten bei denen ein bestimmter Browser empfohlen wird um die Seiten problemlos zu betrachten. Hat sich der Webseitenautor besonders viel Arbeit gemacht, so leiten so genannte Browserweichen oder andere Abfragen den Benutzer auf Extra-Seiten für Netscape, Internet Explorer, manchmal sogar unterschieden nach Betriebssystemen.

Grundlegend dafür ist die Vorstellung, dass verschiedene Webseiten-Versionen geschrieben werden müssen um alle Browser und Sichtgerte zu bedienen. Das ist dein grosser Irrtum. Die grösste Stärke von HTML ist, dass das alles mit einer Version geht und man sich darauf besinnt, welche Grundidee hinter der Entwicklung von HTML steht. Das Problem bei der fehlerhaften Darstellung von Webseiten liegt oftmals auf der anderen Seite vom User; dem Hersteller des Browsers oder dem Ersteller der Webseite. Die korrekte Darstellung durch den Browser kann man auf einer Testseite nachprüfen. Oder man sieht sich die Auflistung der Fehler von Browsern in der Darstellung mit CSS an.

Man kann auch den Besuchern vorschreiben, welchen Browser sie zu benutzen haben um die (fehlerhaften Seiten) im vollen Glanz zu betrachten. Sollten sie dieses vorhaben, so empfehle ich Ihnen den Text von Jahn Rentmeister, der freundlicherweise von einem Kollegen übersetzt wurde Diese Seite ist optimiert für – mit Kunden diskutieren .

Hier ein "mini-Howto" zum Schreiben von einfachen Webseiten, basierend auf Aussagen von Michael Nahrath:

  1. Schreibe den Inhalt strukturiert (gegliedert) und dann in HTML (structural markup)! Alles muss funktionieren, das heisst, erreichbar sein und in der logischen Struktur nachvollziehbar. Farben, Schriften etc. sind in dieser Phase ganz egal.
  2. Linke Dein StyleSheet in die site, eventuell ist es noch ein wenig daran anzupassen und in den HTML-Code einige Male das CLASS="…" Attribut einzubauen.
  3. Baue zusätzlich alle möglichen tollen Sachen mit JavaSript etc. ein.
  4. Wenn jetzt eine Funktionselement doppelt auftaucht (z.B. Link per HTML und per JacaScript), setze bei Bedarf den entsprechenden HTML-Tag in <noscript></noscript>!
  5. Wenn die Webseite (inter-)aktive Inhalte (Filme, Audio, Flash) zeigen soll, so sollten sie erst jetzt eingefügt werden unter Berücksichtigung der Zugänglichkeitsrichtlinien für Webinhalte

HTML beschreibt die Struktur (das logische Markup) eines Dokuments und teilweise auch das Aussehen. HTML ist also Zuständig eine Überschrift als eben solche zu kennzeichnen, ein Zitat als Zitat usw. Das Layout ist nicht primäres Ziel von HTML, denn das Layout beim Empfängers kann man nur bestimmen, wenn man das Ausgabemedium kennt. Dies ist jedoch oft kaum möglich zu bestimmen und die Möglichkeiten der Webseitendarstellung nehmen immer weiter zu (WAP-Handy, PDA, Grafik-Browser, Textausgabe, Braille-Ausgabe, WebTV oder Dreamcast, usw.). Zur Geschichte und Ursprungsidee gibt es beim ‘W3C’ Informationen. Derzeit bemühen sich verschiedene Teilnehmer des Internet in HTML die Beschreibung von Struktur und Form zu trennen, so wie es ursprünglich auch einmal gedacht war. Die Struktur eines Dokuments bedingt sich durch den Inhalt. Die Form bedingt sich durch das (Betrachtungs-)Medium; und deren gibt es viele verschiedene. Design beinhaltet Funktionalität; sofern man sich an dem englischen Ursprung des Wortes ‘design’. Das Zusammenführen von Struktur und Styling ist eine Design-Leistung.

Missverständnis: Webseiten mit Struktur sind langweilig gestaltet

Auf diese Aussage möchte ich polemisch entgegenhalten: nichts ist langweiliger als eine Seite die man nicht ansehen oder lesen kann. Auch wenn es nur eine Visitenkarte eines Unternehmens oder einer Privatperson betrifft. Der Grund für den Erfolg des Internets war auch unter anderem, das die Informationen ohne grossen Probleme eingesehen werden können und frei verfügbar sind. Ein neuer Schub steht bevor, wenn mehr Menschen mit Ihrem PDA oder dem Handy auch unterwegs vermehrt das Internet nutzen. Das macht das Surfen spannend; die Begeisterung an einem Flash-PlugIn das nur eine nette Animation zeigt lässt schneller nach. Lange Downloadzeiten frustrieren nur bei dem Wunsch nach schneller Information.

Dementsprechend sind auch erfolgreiche Seiten, wie von Yahoo oder Google entsprechend gestaltet: Website-Design: Weniger ist oft mehr ('iX' 12/2000)

Dies bedeutet nicht, dass die Seiten nackt sein müssen. Der Bedarf an visueller Unterstützung ist bekannt und wird inzwischen auch immer mehr beachtet und unterstützt. Dabei sollten Möglichst ein paar Punkte beachtet werden, welche die Firma Macromedia, also der Distributor der Software Flash aufgelistet hat(te). [Anmerkung 2]

Richtig interessant wird es, wenn entsprechende Zusätze den Inhalt verdeutlichen, nachvollziehen oder unterstützen. Dann kann das WorldWideWeb seine kompletten Vorteile gegenüber z.B. Print-Veröffentlichungen ausspielen. aber einmal ehrlich: wie oft wird im realen Leben ein Bild gezeigt ohne dass ein entsprechender Kommentar …und hier siehst du wie… oder Achte hier einmal auf… dazu geben wird? Das geht mit HTML ebenfalls. Einerseits natürlich im Text, aber auch durch eine entsprechende Auszeichnung. Attribute wie longdesc oder standby ermöglichen es mit der Besucherin oder dem Besucher zu kommunizieren. Wobei ich offensichtliche Informationen wie PlugIn wird geladen für unnötig empfinde. Warum nicht beschreiben was gleich kommen soll?

Wie bereits erwähnt: die Idee von Web-Design ist ursprünglich, die Strukturierung von Inhalten über HTML ohne Layoutbezug (was durch CSS ergänzt wird oder werden kann). Ein Cascading Style Sheet (CSS) ist für das Layout zuständig, bietet auch Möglichkeiten, die unterschiedlichsten Ausgabemedien gezielt anzusprechen. Daher gibt CSS der Web-Seite das gewünschte Layout für die unterschiedlichen Ausgabemedien. Wie man sich das vorstellen kann und welche Vorteile dies gegenüber dem reinen Print-Medium hat, wurde von Michael Nahrath in der Newsgroup <de.comp.sys.mac.internet> anschaulich dargestellt.

> > Dass sich eine Website der Umgebung, in der sie
> > angezeigt wird anpasst, ist normal und die Hauptstärke von HTML.
> …
> Das würde ich aus meiner jetzigen Sicht eher als Schwäche erkennen, aber
> ich bin ja noch am Anfang.

Stell Dir vor, Du kaufst eine Zeitung.
Beim Lesen in der U-Bahn ist es eng, da hat sie A5-Format.
Auf dem Fussweg zur Arbeit lässt Du dir einen Artikel vom Walkman vorlesen.
Im Büro liest Du sie auf dem Schreibtisch, da hat sie A2.
Abends gibst Du sie Deiner Oma zu lesen und machst dafür die Schrift grösser.
Und das alles mit ein und derselben Zeitung!

Geht leider nicht mit Papier, mit einer Website geht sowas.

Im Zuge dieser Diskussion wurde auch der Artikel von Jeffrey Zeldman empfohlen. Zeldman greift unter dem Titel DAO of Webdesign die Fragen zum Medium an sich, der Kontrolle von Webseiten oder auch der Zugänglichkeit auf.

Sehr anschaulich hat Dominik Boecker beschrieben wie er entschied, die “Kontrolle” über die Seiten aufzugegeben um die Anpassungsfähigkeit zu entdecken. Webseiten sind kein bedrucktes Papier (Übersetzung des englischsprachigen Artikels Web Pages aren't Printed on Paper).

Behält man die im “mini-HowTo” genannten Grundlagen im Bewusstsein, so ist es unproblematisch die Inhalte auch ansehnlich zu gestalten. Dabei ist nur die bereits genannte Sachlage zu verinnerlichen: jede Webseite sieht auf jedem Ausgabegerät anders aus. Dies lässt sich auch in keinem Fall vermeiden, selbst wenn von vielen Seiten her versucht wird eine bestimmte Ausgabegeräte “optimiert” festzulegen.

Alles in allem wirkt ein gut aufbereiteter Text immer noch besser und ansehnlicher als die plumpen Hinweise wie "Sie verwenden einen Browser der Frames nicht unterstützt oder Sie müssen ein Flash-PlugIn installieren. Diese Hinweise sind ganz bestimmt nicht ansehnlich und führen eher zu einem Klick von der Webseite weg, als dass die entsprechende Seite angesehen und die Informationen angenommen werden.

Hier kommt man zu zwei grundlegenden Begriffen, die ein Autor einer Information immer im Kopf behalten sollte. Die Idee der Zugänglichkeit (Accessibility) und der Brauchbarkeit (Informationswert bzw. Usability). Nur wenn die Zugänglichkeit gesichert ist, kann der Besucher einer Seite über die Brauchbarkeit entscheiden. Dazu bedarf es erst einmal einer Benutzung von HTML (ohne Layout), die von jedem Browser angezeigt werden kann, ohne das die Funktionalität leidet.

Missverständnis: Es gibt einen Kampf zwischen Strukturalisten (Generalisten) und Designern

In einem der bekanntesten Büchern zum Thema Webdesign unterscheidet David Siegel zwischen zwei Typen von Webautoren und zwar zwischen den Strukturalisten und den Designern. In einer Newsgroupdiskussion um Webdesign hat Aleksander Jensko diese beiden Typen passend beschrieben:

Etwas übertrieben gesagt, möchte ein Strukturalist die HTML-Sprache wie anno dnnemal verwenden, nämlich als Strukturierungs-Sprache, die er danach noch mit Validator prüfen lt. Ein Grafiker dagegen würde am liebsten die ganzen Seiten in Illustrator/Photoshop bauen, inklusive Schriften, typografischer Feinheiten etc. Ersteres hat unter Umständen nach wie vor seine Daseinsberechtigung, ist aber für das Augentier Mensch nicht immer akzeptabel. Letzteres geht aus verschiedenen Gründen auch nicht.

Warum nicht beides vereinen?! Ein guter Inhalt wird erst recht wahrgenommen, wenn er auch ansprechend präsentiert wird. Gute Präsentationen werden ohne substantiellen Inhalt oft schnell langweilig. Beide Seiten brauchen sich also. Die Frage ist nur, wie man Struktur und gutes Design (im Sinne von Funktion, wie auch Aussehen) vereinen kann. Dass ein Grundmass an Struktur und Abwärtskompatibilität notwendig ist, hat auch “Mr. Web Design” David Siegel erkannt, beschrieben und inzwischen auch in Interviews ausgesprochen: Mr Web Design changes direction.

Wer jemals eine Präsentation vor einer Gruppe halten musste oder eine solche Präsentation gesehen hat, der wird sich leicht in die Lage hineinversetzen können, dass man durch Inhalt überzeugen muss aber auch durch einige Farbtupfer Aufmerksamkeit erregen sollte.

Missverständnis: Durch die Verwendung von Frames muss ich nicht auf allen Webseiten die Links verändern

Frames wurden zur Zeiten des “Browserkriegs” von einzelnen Firmen eingeführt um sich einen Vorteil zu verschaffen. Die Idee von Frames entspricht allerdings in keiner Weise der Grundidee eines strukturierten Dokuments. Grundsätzliches bezüglich der Verwendung von Frames steht unter folgenden Verweisen:

Wie einfach man heute mit guter Software in einem grossem Projekt Links verändern kann zeige ich an einem Beispiel mit BBEdit, welches IMHO auf der Windows-Ebene vergleichbar mit Home-Site ist. Als weitere Lösung bietet sich für grössere Projekte eine Datenbank in Verbindung mit PHP an, welche zum Beispiel oft auch in so genannten Weblogs Verwendung findet.

Zusammenfassung

Ich denke, es ist deutlich geworden, dass sich viele Dinge im Web in einer Form darstellen lassen, die auch den Normen und Regeln entspricht. War das Einhalten solcher Normen bisher komplett der Freiwilligkeit unterlegen, so haben sich in den letzten Jahren die Gesetzesvorschriften geändert. Webseiten von offiziellen Stellen müssen nun den Vorschriften zur Barrierefreiheit entsprechen.

Davon abgesehen, sollte es einleuchtend sein warum Normen eingehalten werden sollten, wenn man sich aus dem alltäglichen Leben heraus deutlich macht wo man überall auf solche Vorgaben vertraut und daraus Vorteile gewinnt: das kann beim Kauf des Kaffefilters anfangen, über die Wahl der Grösse des Bettbezugs bis hin zum Kauf von Reifen – sei es für das Fahrrad oder ein anderes Verkehrsmittel. Sicher gibt es bei allen genannten Beispielen unterschiedliche Wahlmöglichkeiten. Letztendlich kann man sich aber in den Fällen darauf verlassen die richtige Wahl getroffen zu haben, bei denen allgemein gültige (festgelegte) Maße eingehalten wurden.

Wer Normen (mit) einhält, der trägt gleichzeitig mit dazu bei, dass man sich darauf verlassen kann.

Weitere Beispiele dafür, welche Personen von Zugänglichen Webseiten profitieren können stellt Mark Pilgrim sehr anschaulich dar: Dive Into Accessibility. 30 days to a more accessible web site.

Anmerkungen

Dank
Ich danke für die Erkenntnisse Michael Nahrath, unbekannter Weise Alan Flavell, Björn Hährmann und Steffi Abel aus der Newsgroup <de.comm.infosystems.www.authoring.misc> und den vielen anderen Leuten die bereit waren Ihr Wissen mit mir zu teilen oder in fruchtbare Diskussionen zu treten.
Überarbeitung
Dieser Text wurde im Juli und im September 2003 leicht überarbeitet und ergänzt.
Die Webseiten von Macromedia
Macromedia hat mit der Überarbeitung seiner Seiten die früher genannten Tips wieder komplett ignoriert. Angefangen damit, dass die Webseiten in kaum einer Weise Standards entsprechen, brechen sie auch mit anderen (normativen) Regeln wie z.B. das Löschen der genannten Webseite. Sie werden wissen, warum…. Der genannte Text ist über das Wayback-Internet Archiv gelinkt.