Die Website Checkliste

Diese Checkliste ist aus jahrelanger Praxis entstanden und kann von allen genutzt werden, die mit Websites zu tun haben.

Was geschieht mit Textüberlauf

Häufig werden Elemente von Gestaltern mit Blindtext erstellt, was ja durchaus sinnvoll ist. Denn in den seltensten Fällen ist der Text auch schon bei der Erstellung der Gestaltung fix und fertig. Es ist sehr ärgerlich, wenn der Grafiker mühevoll versucht einen sinnvollen Text einzusetzen, dieser Text aber – aus welchem Grund auch immer – nicht ganz korrekt ist. Es kann ja sein, dass der Grafiker die sachlichen Zusammenhänge nicht vollständig kennt, in der Terminologie nicht vollkommen bewandert ist oder was auch immer. Dann wird bei der Erstellung übersehen, dass noch ein nicht redigierter Text im Layout steht und die Seite wird veröffentlicht. Es kann, muss natürlich nicht, böse Folgen haben. Also: Blindtext ist sinnvoll. Damit steht aber auch der Textumfang nicht exakt fest.

Tipp
Nutzen Sie als Gestalter die fast unendliche Größe eines Bildschirms. Anders als bei einer Gestaltung auf Papier, ist man bei einer Gestaltung für den Bildschirm nicht an eine fixe Größe gebunden. Dass Inhalte nur durch scrollen erreichbar sind, ist für den Benutzer kein Hindernis.

Nun gibt es im Webdesign öfters Elemente, die aufeinander Bezug nehmen oder voneinander abhängen. Beispiel: zwei Bilder stehen nebeneinander. Jedes Bild hat eine Unterschrift. Die eine Unterschrift ist lang, die andere Unterschrift ist kurz. Solche Fälle müssen in der Gestaltung Berücksichtigung finden.

Anderes Beispiel … Auf der Team Seite werden Mitarbeiter mit Namen vorgestellt. Der Gestalter arbeitet mit Max Mustermann, einem sehr berühmten Mitarbeiter in jeder Firma. Es gibt aber auch kurze Namen. Sagen wir mal Wu Li oder Ada Mai. Es gibt aber auch lange Namen wie Prof. Dr. Maria-Christina Leuthäuser-Schnarrenberger. Solche Fälle müssen im Layout berücksichtigt werden.

Anderes Beispiel … Der Gestalter hat bereits den endgültigen Text vorliegen. Hinterher wird die Seite in verschiedene Sprachen übersetzt; die Textlänge ändert sich zwangsläufig.

Die Liste lässt sich beliebig fortsetzen. Zum Beispiel für Menüpunkte. Da gestaltet der Gestalter den Menüpunkt mit der Aufschrift “Info”. Der Kunde will aber nachträglich den Menüpunkt in “Informationen für unsere Kunden” umbenannt haben.

Reihenfolge von Elementen

Früher oder später stellt sich die Aufgabe, dass eine Website responsive programmiert werden soll. Bei einer responsive Umsetzung eines Designs ist zu berücksichtigen, dass sich Elemente in der einen oder anderen Weise zueinander verhalten und voneinander abhängig sind. Dies ist bereits bei der Gestaltung für den Desktop zu berücksichtigen, weshalb heute auch von einigen Gestaltern nach dem “mobile first” Ansatz vorgegangen wird. Dies bedeutet, dass zunächst die mobile Version gestaltet wird und sich darauf die Desktop Version aufbaut. Beiden Ansätzen ist gemeinsam, dass idealerweise keine Elemente doppelt ausgegeben werden und einmal in der einen und einmal in der anderen Version unsichtbar gemacht werden.

Ich will dies an einem Beispiel skizzieren. In einem Layout für den Desktop steht ein Bild rechts vom Text und wird vom Text umflossen. Dabei steht das Bild im Quelltext vor dem Text. In der Mobilversion soll das Bild aber unter dem Text stehen. In diesem Falle wird das Bild entwender zweimal ausgegeben oder das Element wird per Javascript verschoben. Auch wenn solche Konstruktionen möglich sind, so tragen sie nicht gerade zu einem sauberen Aufbau des Quellcodes bei.

Webfonts

Webfonts werden heute von allen gängigen Browsern unterstützt und der breiten Nutzung von individuellen Schriften steht nichts entgegen. Webfonts tragen zu einem individuellen Erscheinungsbild einer Seite bei und es ist sogar möglich spezielle Hausschriften für die Verwendung im Web zu lizensieren und einzusetzen. Es gibt aber dennoch gute Gründe vorsichtig mit Webfonts umzugehen. Viele Schriften haben nur eine mittelmäßige Qualität und sehen am Bildschirm nicht sehr professionell aus. Auf unterschiedlichen Browsern und Betriebssystemen fällt das Ergebnis zuweilen ernüchternd aus.