Designer vergessen die Gestaltung 2


Bei der Entwicklung eines Seitendesign für Websites müssen immer wieder die gleiche Strukturen von einen Webdesigner vordefiniert werden. Dabei legt er nicht nur auszuwählende Schriftart und Schriftgröße fest, sondern kümmert sich auch um die Farbgebung. Oft werden aber viele Dinge, die auf in einem HTML-Dokument vorkommen, schlicht weg vergessen.

Oft habe ich in den letzten Jahren erlebt, dass Designer vergessen sich Gedanken über die Gestaltung von Formularen, Tabellen oder aber auch von Listen innerhalb des Inhaltsbereiches zu machen. Sie gestalten immer sehr schöne Websites mit tollen Layoutbildern und Dekorationsobjekten. Machen tolle grafische Aufteilungen. Vergessen aber zu definieren wo sich der Seitentitel befindet und wie er aussehen soll. Sie stellen sich auch selten die Frage wie in der 3. oder 4. Ebene der Hauptnavigation die Menüpunkte gestaltet werden sollen. Ganz zu schweigen von der Definition wie bei einem Rollover die Links aussehen sollen.


Diese kleine Dokumentation soll ein Bewusstsein für die restlichen, genauso wichtigen Elemente einer Website schaffen.

Mögliche Inhalte eines Dokumentes

Auf Websites findet man immer wieder ein und die selben Arten Inhalte zu strukturieren. Hier die häufigsten:

  • einfacher Text mit Bildern
  • Zitate
  • Tabellen
  • Listen
  • Formulare
Einfache Texte

Am häufigsten wird wohl der einfache Text als Transportmittel für Inhalte genutzt. Gerade Suchmaschinen finden in einem guten Text viele Informationen, die für gute Platzierung wichtig sind. Dabei sollte man sich bei der Strukturierung des Textes auf einfache, nicht zu lange Absätze beschränken. Diese Absätze sind dann sinnvoller Weise mit Überschriften gegliedert. Falls es wichtig sein sollte innerhalb eines solchen Textes Informationen hervorzuheben, dann kann dieses durch die Auszeichnung <strong> für kräftig und <em> für einfühlsam getan werden.

Neben diesen Auszeichnungen können innerhalb des Textes natürlich auch noch Querverweise zu weiterführenden Informationen innerhalb und außerhalb der eigenen Website gesetzt werden.

Vermeiden sollte man das Unterstreichen von Textpassagen, denn im Internet sehen viele Menschen unterstrichenen Text als Verweise an und deshalb wird es zu Verwirrung kommen können.

Text mit Bildern

Immer wenn der einfache, geschriebene Text nicht ausreicht um den Inhalt wiederzugeben, könnte man versuchen das durch aussagekräftige Bilder zu unterstützen. Dabei ist aber zu beachten, dass nicht jedes Ausgabegerät Bilder auch anzeigen kann. Weswegen jedes Bild wiederum eine alternative Beschreibung des Bildinhaltes braucht. Dass heißt das jeder <img>-Tag mit einem alt-Attribute ergänzt werden sollte. Hierbei sollte darauf geachtet werden, dass nicht nur der Bildinhalt mit einem kurzen Kommentarwort beschrieben wird, sondern man sollte eher eine tatsächliche Bildbeschreibung hinterlassen, so das jeder, also auch diejenigen die das Bild nicht sehen können, den Bildinhalt versteht.

Zusätzlich finde ich es gerade bei Zeichnungen sehr gut, wenn das Bild eine Bildunterschrift bekommt, wo genau erklärt wird, was diese Zeichnung darstellt. Ich verwende dabei immer eine <div>-Tag der das Bild und einen kleinen Absatz umschließt. Alternativ kann man auch über das title-Attribute eine Bildunterschrift einbinden.

  1. <div class="image">
  2. <img src="pfad/zum/bild.gif" alt="Hier befindet sich die Bildbeschreibung." title="Bildunterschrift" />
  3. <p>Abb. 1: Die Bildunterschrift</p>
  4. </div>
Zitate

Immer wieder werden innerhalb von Texten andere Texte zitiert. Um diese Zitate auch korrekt auszuzeichnen, gibt es 2 Auszeichungstags. Um ein Zitat innerhalb eines Fließtextes zu benutzen, kann man den <q>-Tag einsetzen. Sollte aber das Zitate über mehrere Zeilen oder gar einen Absatz umfassen dann ist der <blockquote>-Tag besser.

  1. <blockquote src="http://quelle.url">
  2. <p>Das eigentliche Zitat</p>
  3. </blockquote>

Neben den einfachen Benutzen dieser Tags sollte auch immer die Quelle des Zitats genannt werden. Die Angabe, woher man dieses Zitat hat, kann in einem src-Attribute angeben werden. Auch kann man innerhalb eines <blockquote>-Tage den <cite>-Tag benutzen um genauer den Autor bzw. die Quelle des Zitats zu definieren.

CSS bietet hier einige Möglichkeiten an das eigentliche Zitat mit dazugehörigen Anführungszeichen zu erweitern. Mit den Pseudoklasse :before und :after kann man den Quellcode erweitern. Ein Beispiel:

  1. blockquote p:before {
  2. content: open-quote;
  3. }
  4. blockquote p:after {
  5. content: close-quote;
  6. }

In diesem Beispiel wird vor dem Zitatsabsatz das öffende Anführungszeichen und danach das schließende Anführungszeichen hinzugefügt.

Tabellen

Es gibt Situationen in denen eine tabellarische Darstellung besser ist als jeder ausgeschriebene Text. Dabei vergessen aber viele die vielen Möglichkeiten die Tabellen bieten. Es wäre zu viel hier alles aufzuzählen. Oft wird aber das summary-Attribut vergessen. In diesem kann manbei einer sehr komplexen Tabelle eine Beschreibung hinterlegen, die eine Zusammenfassung bzw. Erklärung der Tabelle beinhaltet.

Auch werden die <thead>, <tbody> und <tfood>-Tags meines Erachtens zu wenig genutzt, obwohl sie doch eine Fülle an Möglichkeiten bieten. Zum Beispiel kann man mit CSS den Bodybereich der Tabelle scrollbar machen, was gerade bei langen Tabellen sehr nützlich ist. Auch sollen die Browser beim Ausdruck von langen Tabellen den Kopf- und den Fußbereich auch jeden ausgedruckte Seite mit anzeigen, um die Übersicht der Spalten zu verbessern. Denkbar wären auch 2 scrollbare Bodybereiche für Vergleiche.

Tabellen bieten somit eine große Fülle an gestalterischen Freiraum an, was aber meistens von Designer vergessen wird.

Dabei ist aber zu achten, dass der <tfood>-Tag immer vor dem <tbody>-Tag steht.

Listen

Listen werden viel häufiger eiungesetzt als man es wohl vermutet. Mittlerweile gilt es wohl als bekannt, dass Menüs eine Auslistung von Verlinkungen ist. Dabei unterscheide ich zwischen der Inhaltsnavigation, was aus Sicht der Linearisierung eine geordnetet Liste sein sollte und der Servicenavigation, die z.B. die Sprachauswahl oder den Link zur Hauptseite beinhalten könnte.

Aberr was ist mit einem Glossar für die Begriffserklärung. Fast jede Seite enthält Fachwörter, gerade Produktseiten. Ist das nicht auch eine Liste. Hier würde ich eine Definitionsliste bevorzugen, da man da wunderbar das Fachwort mit der Definition erklären kann. Oder die Hileseite, die meistens eine FAQ-Liste in die Website integriert. Auch hier ist die Frage der zu definierente Term und die Definition die Antwort.

Designer vergessen sehr häufig die Gestaltung solcher Elemente.

Formulare

Fast jede Website biete in irgendeiner Form Formulare an. In den meisten Fällen dienen diese Formulare dazu Informationen vom Betrachter der Website zu erhalten. Die Strukturierung und die Gestaltung von Formularen hängt ganz stark von die angeforderten Informationen ab. Bei einem einfachen Kontaktformular reicht es meist, dass die Angaben des Benutzer in einzeilige oder mehrzeilige Eingabefelder eingetragen werden.

Man sollte bei der Gestaltung darauf achten, dass die Eingabefelder einen einheitlichen Stil folgen. Gerade der <textarea>-Tag wird, anders als der <input>– oder der <select>-Tag, in den meisten Browsern mit einer nicht proportionalen Schrift dargestellt. Das sollte man angleichen.

Weiterhin sollte man jedes Formelement mit einem <label>-Tag kombinieren, so dass der Browser die Zusammengehörigkeit von Beschriftung und Eingabeelement erkennt. Nebenbei entsteht dadurch auch eine bessere Benutzerfreudlichkeit, denn wenn man dann auf die Beschriftung klickt aktiviert sich automatisch das Eingabeelement.

Falls man kompliziertere Formulare haben sollte, kann man mit dem <fieldset>-Tag und einer Beschriftung mit dem <legend>-Tag einzelne Formelemente gruppieren. So kann man das komplexe Formular ein wenig übersichtlicher Gestalten. Es ist sogar denkbar, dass per JavaScript die einzelnen Fieldsets zu einer Art Mappe mit Registerkarten gefalter werden.

Fazit

Nicht nur die Standardelemente einer Website, wie das Grundlayout, die Navigation oder der Kopf einer Website muss ein Designer gestalten, sondern auch der Inhalt sollte Ziel seiner Bemühungen sein. Oft wird die Gestaltung einer Website nur auf die wichtigsten Punkte beschränkt und vergessen, dass es dem Benutzer ja um die Inhalte geht warum er die Website besucht. Und genau deshalb sollte der Inhalt auch mit in Mittelpunkt der Gestaltung sein.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

2 Gedanken zu “Designer vergessen die Gestaltung