Ansprechende Webseiten sind schon lange keine Sache
mehr von professionellen Designern und teurer Software. Auch mit Linux
und einigen weiteren frei erhältlichen Tools ist eine attraktive Gestaltung
möglich.
Dazu gehören nicht nur Bilder, die man sowieso mit Vorsicht einsetzen sollte, sondern auch ein übergreifendes, ansprechendes Layout und einen durchgängigen Stil. In diesem Artikel werde ich versuchen, die Grundlagen erfolgreichen Web-Publishings mit Linux zu vermitteln.
Zuerst sollte überlegt werden, was der Zweck einer Seite ist: eine Seite auf der man sich selbst darstellt soll sicherlich anders aussehen als eine Firmenseite oder die Homepage eines Kleintierzüchtervereins.
Aus der Erkenntnis des Zweckes heraus kann dann recht einfach auf die individuelle Zielgruppe geschlossen werden. Wir werden später sehen, daß das Wissen um die anvisierte Zielgruppe einen großen Einfluß auf die Gestaltung einer Seite haben kann.
Als einfache und schnell anwendbare Hilfe zum "Brainstorming" bietet sich die Methode des "Mind-Mappings" an: Dieses allgemein anwendbare Verfahren erlaubt es, strukturiert gedanklich um ein Problem oder eine Aufgabe zu "kreisen" und entsprechende Unterpunkte und Ergänzungen relativ simpel zu ergänzen.
Man nehme also ein leeres Blatt und Markiere den Mittelpunkt mit dem Problem oder Projekt. In unserem Fall sollte also "Homepage" oder etwas Ähnliches in die Mitte geschrieben werden. Nun wird für jeden Unterpunkt eine Linie von der Mitte aus gezogen und mit dem entsprechenden Einfall beschriftet. Von diesen Linien ausgehend können dann weitere Linien gezogen werden, die sich dadurch weiter verästeln. So entsteht ein "Ideenbaum", der im Idealfall schon die ungefähre Struktur des Webangebots darstellt.
Als nächstes sollte die grobe Navigation innerhalb der Seiten festgelegt werden. Dazu können zum Beispiel farbige Pfeile verwendet werden, die Verknüpfung andeuten.
Für das Navigationsinterface gibt es verschiedene Möglichkeiten: zum einen die klassischen Grafik-Knöpfe, zum anderen textuelle Links.
Beide Methoden lassen sich zu "Toolbars" gruppieren, indem sie zu größeren Schaltfächen zusammenfaßt werden.
Bei der Ausarbeitung der Navigation ist noch eine weitere Regel sehr wichtig: die sogenannte "Zwei-Klick-Regel". Jede Information, die innerhalb des Webangebots zur Verfügung steht, soll maximal zwei Klicks entfernt sein. Dies kann problemlos durch eine intelligente Navigation verwirklicht werden.
Das Stil-Design kann grob in zwei Teile aufgespaltet werden: einmal den "Visual Style", der das generelle Layout und das Aussehen bestimmt und den "Textual Style", der Stil und Sprache der Texte repräsentiert. Visual Style und Textual Style müssen allerdings auch zusammenpassen: eine graphisch absolut seriöse Seite passt einfach nicht zum blumigen Hackerslang. Hier kommen zum ersten Mal die Überlegungen zur Zielgruppe zur Anwendung: spezifische Zielgruppen verlangen nach spezifischer graphischer Repräsentation und Sprache. Der Geschäftsmann, der sich auf Firmenseiten über neue Produkte informieren möchte, erwartet eine kompakte und präzise Sprache, während eine Seite für Kinder sprachlich eher einfach und bildhaft gehalten werden sollte.
Der "Visual Style" wiederum besteht nicht nur aus der Gestaltung der Buttons und Icons, sondern auch aus dem verwendeten Font, der Fontgrößen und vor allem der Farben. Hier kann man von folgenden (natürlich nicht verbindlichen) Faustregeln ausgehen:
Bei der Auswahl der Farben sollte sich allerdings auch noch an allgemeingültige Regeln gehalten werden, denn beispielsweise passt ein grüner Hintergrund nur sehr selten zu blauen Buttons oder blauer Schrift.
Hat man sich nun für ein Farbmuster entschieden, sollte es auch auf allen Seiten durchgehalten werden. Nichts ist schlimmer als der Blick des Lesers zum URL-Fenster um zu kontrollieren, ob er sich noch auf dem gleichen Server befindet. Natürlich sind Farbvariationen erlaubt, aber den grundsätzlichen Stil sollte man konsequent verwenden.
Weiterhin gehört zum "Visual Style" auch die Positionierung der Navigationselemente. Die meisten Seiten halten sich an die (sinnvolle) Regel, die Buttons zentral und nicht versteckt anzuordnen. Bewährt hat sich die Position am oberen oder linken Rand. Handelt es sich um eine lange Seite die über mehrere Bildschirmseiten gescrollt werden kann, ist es sinnvoll die Navigationselemente am Ende der Seite nocheinmal zu wiederholen, z.B. durch eine Toolbar aus textuellen Links, um den Informationsfluß zu erhalten.
Den "Textual Style" sollte man genauso sorgfältig erarbeiten wie den "Visual Style". Der Text muß grundlegend einfach und konsistent sein. Bandwurmsätze und verschlungene Konstrukte sind hier fehl am Platz. Man sollte immer daran denken, daß Webseiten am Bildschirm gelesen werden und daß dies deutlich anstrengender ist, als in einer Zeitschrift oder einem Buch zu lesen. Weiterhin sollte der Einsatz von komplett groß geschriebenen Wörtern vermieden werden. Sie vermitteln das Gefühl von Schreien und zeugen von schlechtem Stil. Hervorhebungen sind besser durch Fettschrift oder Italics realisiert.
In den meisten Fällen werden auch im Text selbst Links eingefügt. Dabei sollte man auf keinen Fall dem "klicken Sie hier"-Teufel verfallen:
Wenn Sie hier klicken finden Sie unsere aktuellen Preislisten. Wollen Sie erst einmal in unserem Katalog schmökern, dann klicken Sie hier.gegenüber
Preise finden Sie in unseren aktuellen Preislisten. Sie können natürlich auch erst einmal in unserem Katalog schmökern.Obligatorisch ist natürlich eine korrekte Rechtschreibung.
Auf jeden Fall sollten Frames in jeder Form vermieden werden. Nicht nur, daß sie nur mit wenigen Browsern lesbar sind, sondern ihr Aussehen wird durch derart viele Faktoren bestimmt, daß ein vernünftiges Vorausplanen kaum möglich ist. Natürlich gibt es auch positive Beispiele für Frames (z.B. http://www.titanicmovie.com/past/index.html), aber die wirklich schlechten Framesseiten überwiegen, was auch zeigt, wie schwer eine gute Seite mit Frames zu erzeugen ist. Dazu kann man nahezu alles, was mit Frames machbar ist, mit Tables verwirklichen, die selbst mit einem Table-losen Browser noch lesbar angezeigt werden können.
Das Verhältnis von Grafikmenge zu Textmenge sollte angemessen sein. Eine Seite mit vielen verzierenden Bildern aber wenig Information ist nicht schön und ärgert den Leser, der unter Umständen massive Downloadzeiten in Kauf nehmen muß.
Eine beliebte Methode den Seitenhintergrund etwas zu beleben ist ein Hintergrundbild. Doch auch hier muß sehr vorsichtig vorgegangen werden, damit der Text lesbar bleibt. Soll die komplette Seite gekachelt werden, dann sollte das Kachelmuster sehr blass, fast schon einfarbig sein, damit es nicht stört. Die Kacheln sollten außerdem möglichst klein sein, damit sich die Downloadzeit nicht gravierend verlängert. Sehr beliebt sind auch farbige Balken am linken oder rechten Rand, auf denen bequem Buttons plaziert werden können. Diesen Effekt erreicht man sehr einfach durch ein Hintergrundbild das sehr breit (800-1000 Pixel) aber nur ein paar Pixel hoch ist. Durch das fugenlose Kacheln als Hintergrundbild entsteht dieser interessante Effekt. Wird dann noch am Übergang des Balkens zur Hintergrundfarbe ein Grauschleier aufgesetzt, entsteht ein netter 3D-Eindruck.
Eine einfachere Methode für den Hintergrund ist die Hintergrundfarbe. Für sie benötigt man kein Grafikbild und damit auch weniger Download-Zeit. Manchmal reicht es schon völlig aus, einer bestehenden Seite eine andere Hintergrundfarbe zu geben, um sie in völlig anderem Licht darzustellen.
Unter Linux stellt das Programm Gimp einen fast unerschöpflichen Funktionsumfang zur Erstellung von Web-Grafiken zur Verfügung. Im Menü "Xtns" unter "Script-Fu" gibt es eine große Auswahl an Buttons, Trennlinien, Bullets und Logos, die sich direkt aus Gimp heraus erzeugen lassen. Aber auch bereits bestehende Bilder lassen sich mit Gimp für den Einsatz auf Webseiten aufwerten. So kann mit dem "Video"-Filter das Bild eine gewisse Struktur erhalten, oder es wird mit dem Schatten-Skript ein Schlagschatten unterhalb des Bildes erzeugt.
Ist ein Bild erst einmal erstellt oder importiert beginnt die Detailarbeit. Man sollte immer daran denken, daß Downloadzeit teuer ist. Deswegen müssen die Bilder so wenig Speicherplatz wie möglich verbrauchen. Eine erste Maßnahme ist das Reduzieren der verwendeten Farben, das wegen dem im Web gebräuchlichen GIF-Format sowieso nötig ist.
Das einfache Reduzieren auf 256 Farben bringt allerdings noch nicht den maximalen Erfolg: zum einen können Betrachter mit einem 8-Bit-Display Probleme bekommen, wenn mehrere Bilder im Browser dargestellt werden, die jeweils eine eigene 256-Farben Palette mitbringen, zum anderen kann an Speicherplatz durch weitere Farbreduzierung noch eine Menge heraugeholt werden. Im Allgemeinen kann man bei 16 Farben anfangen und sich langsam hocharbeiten, bis das Bild optisch noch eine gute Qualität hat. Hier muß experimentiert werden, um das optimale Gleichgewicht zwischen Qualität und Größe zu erreichen. In Gimp befindet sich das Menü zum Herunterrechnen von Farben unter "Image-Indexed" im Kontextmenü.
Wie wirkungsvoll ein solches Vorgehen ist. zeigt ein einfaches Beispiel: Ein Button, der mit Gimp aus dem "Beveled Pattern" erzeugt wurde, läßt sich ohne sichtbaren Qualitätsverlust auf 16 Farben herunterrechnen und verliert dabei nahezu 2/3 an Größe: für die 256-Farben Version 9245 Byte, für die mit 16 Farben nur 3234 Byte.
Eine weitere Technik, die Webgrafiken besser aussehen läßt, ist das sogenannte Antialiasing. Dabei werden Harte Kanten durch Farbabstufungen geglättet. Ein Nachteil ist natürlich ein höherer Verbrauch an Farben, den man allerdings hier in Kauf nehmen sollte, da der optische Gewinn sehr groß ist. Beim Erstellen von Grafikelementen mit Antialiasing sollte darauf geachtet werden, daß der Untergrund, auf dem eine Grafik erstellt werden soll, zumindest Farbtonmäßig der späteren Hintergrundfarbe der Webseite entspricht. Dadurch wird ein "Ghosting", häßliche Ränder um das Bild, verhindert.
Soll auf der fertigen Seite ein Hintergrundbild verwendet werden, dann sollten die Webgrafiken, die nicht solide sind (z.B. Schriften oder Icons) mit einem transparenten Hintergrund ausgerüstet werden. Gimp stellt auch hierfür einen Mechanismus zur Verfügung, der bereits beim Erstellen eines neuen Bildes erlaubt, einen transparenten Hintergrund vorzugeben. Möchte man ein Bild außerhalb von Gimp transparent machen, kann z.B. das verbreitete Programm giftrans verwendet werden.
Ist das Bild fertig, sollte man sich für ein Dateiformat entscheiden. Üblicherweise werden von modernen Browsern GIF, JPEG, oder PNG akzeptiert, wobei JPEG und PNG eine deutlich höhere Kompression bei mehr Farben erlauben. Trotzdem ist GIF immer noch der Standard und kann garantiert von jedem Browser angezeigt werden.
Leider hat auch der Composer einige Schwächen: so hat er Probleme, wenn die Bilder, die in eine Seite aufgenommen werden sollen, nicht im gleichen Verzeichnis wie die Seite selbst liegen oder aber die Seite sieht besonders von den Abständen zwischen Elementen im Editor anders aus als später im Browser.
Diese Probleme können allerdings genauso wie etwaige unsinnige, weil redundante, Tags durch manuelles Nachbearbeiten der Seite beseitigt werden. Ansonsten besitzt der Composer alles, was das Webmasterherz begehrt: Hintergrundgestaltung, Textstile und sogar Tabellen lassen sich bequem editieren.
Sollen in einer Seite Tables verwendet werden, dann ist der Composer sogar ein nahezu unumgängliches Hilfsmittel. Tabellen lassen sich nur sehr schwer "von Hand" beschreiben, sind aber in modernen Webseiten eine fast obligatorische Institution. Mit ihnen ist es nicht nur auf einfache Weise möglich, Texte z.B. zweispaltig zu formatieren, sondern auch Seiten in ihrer Ausdehnung festzulegen, damit das Verändern der Größe des Browserfensters keine schwerwiegenden Auswirkungen auf das Layout hat.
"Cascading Style Sheets" sind eine weitere interessante Möglichkeit, Einfluß auf die Textformatierung zu nehmen. Leider weist die Implementierung von CSS in Netscape noch Lücken auf, die aber hoffentlich in Kürze geschlossen werden. Weiter möchte ich hier auf Style Sheets nicht eingehen, da dieses Thema den Umfang dieses Artikels sprengen würde.