Aufbau und Typografie einer Webseite | Webmasterparadies.de

Das Erscheinungsbild einer Webseite bzw. der Eindruck, den der Besucher von der Seite erhält, hängt stark davon ab, wie sie optisch und inhaltlich aufgebaut ist. Damit sind jedoch nicht nur schöne Grafiken gemeint. Vielmehr geht es darum, wie die Webseite aufgebaut ist. Wie sind die Elemente aneinander geordnet? Welche Schriftarten werden benutzt? Wie sind Zwischenräume und Auszeichnungen aufgebaut? Wo wurden die Bilder und Grafiken platziert?
Damit Ihre Webseite auf den Besucher nicht zu chaotisch wirkt, haben wir für Sie einige Beispiele zusammengestellt, mit der Ihre Webseite ein wenig "aufgeräumter" aussehen wird.
 

Das Layout einer Webseite kann sehr unterschiedlich sein. Wenn man es ganz grob nimmt, besteht Webmasterparadies.de aus einem vierspaltigen Layout (insgesamt gibt es jedoch 44 Layout-Elemente, die aber nicht alle genutzt werden): Navigationsleiste am linken Rand, Kopfzeile mit Logo und Suche am oberen Rand, Werbung am rechten Rand und die Fußzeile am unteren Rand des Bildschirms. Jedoch gibt es auch immer noch Webseiten, die auf ein einspaltiges Layout setzen. Um Ihnen das etwas zu verdeutlichen, gibt es hier zwei Beispiele:
 

Wie Sie sicher direkt sehen können, ist das einspaltige Layout natürlich sehr unübersichtlich und hinterlässt keinen guten Eindruck.

Die Lesbarkeit einer Webseite ist ebenso wichtig wie Layout und Inhalte. Denn was bringen die besten Inhalte, wenn die Lesbarkeit so mieserabel ist, dass man sich sehr anstrengen muss, wenn man den Text überhaupt aufnehmen will? Um eine gute Lesbarkeit der Webseite zu erreichen, kann man die folgenden Punkte als Leitfaden zu Rate ziehen.

Während in Printmedien schriftarten mit Serifen (z.B. Times New Roman) besser zu lesen sind, haben sich für Bildschirminhalte eher serifenlose Schriftarten (z.B. Arial, Verdana) als optimal herausgestellt. Per CSS könnten Sie sogar verschiedene Schriftarten für verschiedene Medien definieren. So können Sie eine optimale Lesbarkeit Ihrer Schriftarten sowohl online als auch ausgedruckt erreichen.
Bitte beachten Sie jedoch, dass nur die Schriftarten am Bildschirm des Besuchers dargestellt werden, die auch auf dessen System installiert sind. Abhilfe schafft hier der CSS3-Standard, der ein Web-Fonts-Modul mit sich bringt. Leider unterstützen bis dato die wenigsten Browser diesen Standard.

Die Schriftgröße sollte nicht zu klein gewählt werden. Für den Bildschirm optimal sind Schriftgrößen zwischen 10 und 12 Punkt. Dies gilt für den Fließtext. Überschriften können (und sollten) natürlich größer sein, Fußnoten hingegen kleiner. Die optimale Schriftgröße hingegen ist variabel. So lässt sich mittels der Einheit em das Schriftbild flexibel einstellen. 1em entspricht dabei der Voreinstellung im Webbrowser.

Wie man seinen Text optimal formatiert, hängt natürlich auch insbesondere vom Design der Webseite ab. Wichtig jedoch ist, dass Text nicht unbedingt nur in Großbuchstaben verfasst werden sollte. Dies wirkt auf Dauer sehr monoton. Die Lesbarkeit sinkt deutlich. Genau so wenig ist es sinnvoll, lange Textpassagen fett, kursiv oder gar unterstrichen zu formatieren. Diese Formate sollten ausschließlich dazu verwendet werden, um auf wirklich wichtige Teile innerhalb eines Textes aufmerksam zu machen. Werden diese Formate zu oft benutzt, werden die wichtigen Informationen schnell übersehen.

Natürlich gibt es auch die Möglichkeit, die Texte am Bildschirm entsprechend auszurichten. Ob Sie dabei nun auf links- oder rechtsbündigen Text setzen, oder auf Blocktext bleibt natürlich Ihne überlassen. Beachten Sie jedoch, dass linksbündiger Text und Blocktext die Standard-Varianten sind. Rechtsbündiger Text ist eher selten anzutreffen. Vermeiden sollten Sie jedoch viel zentrierten Text. Dies wirkt oftmals amateurhaft und verschlechtert auch die Lesbarkeit. Zentrierter Text sollte wichtigen Stellen, Zitaten und ähnlichen Texten vorbehalten sein. Eben da, wo es auch angebracht ist. Fließtext zu zentrieren macht keinen Sinn.