Der Seitenlayout allgemein

(Wie soll die Seite generell aussehen?)

Das Grundlayout der Seite

Infos: https://openbook.rheinwerk-verlag.de/webdesign/08_005.html
Jonas Hellwig von "Kulturbanause": https://kulturbanause.de/blog/die-layout-typen-einer-website-fixed-fluid-elastic/
Webdesign-Layouttyp: https://de.wikipedia.org/wiki/Webdesign-Layouttyp https://de.wikipedia.org/wiki/Webdesign-Layouttyp

Das Übliche oder etwas sexier?

Wenn man im Internet nach Webseitenlayout sucht wird man von Treffern erschlagen. Tante Google meint: "Ungefähr 1.520.000.000 Ergebnisse in (0,52 Sekunden)" gefunden! Was dann kommt können Sie sich vieleicht denken...

Trotzdem hat sich im Laufe der Webentwicklung ein Layout als "Dauerbrenner" heraus kristallisiert. Das hat auch mit vielen Studien zu tun, die sich mit Informationsarchitektur sowie der menschlichen Wahrnehmung beschäftigt haben.

Ich möchte nochmal in Erinnerung rufen:
In der Regel suche ich eine bestimmte Information!

Demoseite: Das HTML Grundgerüst

Hier unsere Demoseite im Quelltext:

Demoseite: Die wichtigsten Kästchen markiert

Im folgenden Beispiel wurden die wichtigsten HTML-Elemente mit border markiert.
Den Kästchen wurden auch etwas padding und margin verpasst. Die CSS-Datei dazu finden Sie hier: demoseite-16-grund-layout.css

An dieser Stelle müssen wir uns jetzt leider den Layout-Systemen zuwenden.
Nämlich Flex und Grid.