Layout
Das Layout beschreibt die Gestaltung und Anordnung von Inhalten auf einer Website. Es legt fest, wo Texte, Bilder, Navigationselemente oder Buttons platziert werden und wie sie zueinander in Beziehung stehen. Ziel eines guten Layouts ist es, Ordnung und Übersicht zu schaffen, damit der Nutzer Informationen schnell erfassen und leicht verstehen kann.
Ein gelungenes Layout lenkt den Blick des Betrachters gezielt auf die wichtigen Elemente. Es bestimmt den Rhythmus und die visuelle Struktur einer Seite und trägt wesentlich dazu bei, wie professionell und klar eine Website wirkt. Dabei spielen Abstände, Grössenverhältnisse, Ausrichtung und Gewichtung eine zentrale Rolle.
Aufbau einer typischen Website (Responsive Design)
Eine moderne Website ist in wiederkehrende Layout-Bereiche gegliedert. Diese Bereiche strukturieren den Inhalt und sorgen für Orientierung beim Lesen und Navigieren. Damit die Website auf allen Geräten gut aussieht, wird sie im sogenannten Responsive Design gestaltet.
Responsive Design bedeutet, dass sich das Layout einer Website automatisch an die Bildschirmgrösse des jeweiligen Geräts anpasst. Ob auf einem grossen Monitor, einem Tablet oder einem Smartphone – Inhalte bleiben immer gut lesbar und leicht bedienbar. Durch Responsive Design bleibt die Website funktional, übersichtlich und ästhetisch, unabhängig davon, welches Gerät verwendet wird. Dazu werden flexible Layouts, skalierbare Bilder und anpassbare Schriftgrössen verwendet.
Die wichtigsten Grössen, auf die Webdesigner achten, sind:
Desktop
- Screengrösse (ca. ab 1024 px)
- Breites Layout mit mehreren Spalten, grossem Header und oft zusätzlicher Sidebar.
Tablet
- Screengrösse (ca. 768–1023 px)
- Angepasstes Layout, meist mit zwei Spalten oder reduzierten Navigationselementen.
Smartphone
- Screengrösse (bis ca. 767 px)
- Einspaltiges Layout, vereinfachte Navigation (z. B. Hamburger-Menü), grössere Buttons und kompakter Textfluss.
Header oder Kopfbereich
Der Header befindet sich ganz oben auf jeder Seite.
Er bleibt oft beim Scrollen sichtbar (Sticky Header) und sorgt für Orientierung.
Typische Inhalte im Header:
- Logo oder Seitentitel
- Hauptnavigation (Menü mit Links zu anderen Seiten)
- Suchfeld oder Sprachwahl
- Login- oder Kontakt-Link
Im Responsive Design:
Auf grossen Bildschirmen wird das komplette Menü gezeigt, auf kleinen Geräten oft als aufklappbares Hamburger-Menü.
Hero-Bereich oder Titelbereich
Direkt unter dem Header befindet sich der Hero-Bereich – ein grosser, auffälliger Bereich, der den ersten Eindruck prägt.
Direkt unter dem Header befindet sich der Hero-Bereich – ein grosser, auffälliger Bereich, der den ersten Eindruck prägt.
Typische Inhalte im Hero-Bereich:
- Titel oder Hauptüberschrift
- Untertitel oder Slogan
- Hintergrundbild oder Video
- Call-to-Action-Button (z. B. „Mehr erfahren“, „Kontakt aufnehmen“)
Im Responsive Design:
Das Hero-Bild wird automatisch verkleinert oder anders zugeschnitten, damit es auch auf kleinen Displays gut aussieht.
Main Content oder Hauptinhalt
Der Main Content enthält alle wichtigen Informationen einer Website. Er kann in Abschnitte (Sections) gegliedert sein.
Typische Inhalte im Main Content:
- Texte und Überschriften
- Bilder und Galerien
- Videos und Animationen
- Tabellen oder Infoboxen
- Formulare (z. B. Kontaktformular)
- Download-Links oder Projektbeschreibungen
Im Responsive Design:
Mehrspaltige Layouts (z. B. Text neben Bild) werden auf kleineren Geräten untereinander dargestellt, um die Lesbarkeit zu sichern.
Sidebar oder Seidenliste (optional)
Eine Sidebar wird häufig bei Blogs oder Informationsseiten verwendet. Sie enthält zusätzliche oder ergänzende Inhalte.
Typische Inhalte in der Sidebar:
- Schnelllinks oder Untermenüs
- Aktuelle Beiträge oder News
- Kontaktinformationen
- Social-Media-Icons
- Kalender oder kleine Widgets (z. B. Wetter, Uhrzeit)
Im Responsive Design:
Die Sidebar wird auf kleineren Geräten meist unter dem Hauptinhalt angezeigt oder ganz ausgeblendet.
Footer oder Fussbereich
Der Footer steht am unteren Ende jeder Seite und bildet den Abschluss. Er wiederholt oft wichtige Navigationspunkte und enthält rechtliche Informationen.
Typische Inhalte im Footer:
- Impressum und Datenschutzerklärung
- Kontaktangaben (E-Mail, Telefonnummer, Adresse)
- Social-Media-Links
- Copyright-Hinweis oder Jahr
- Newsletter-Anmeldung
- Navigations-Links
Im Responsive Design:
Die Inhalte werden untereinander angeordnet, damit sie auch auf schmalen Displays gut lesbar bleiben.
