Grid Layout ?

[Darry]

Moin.

Ich bin jetzt auf das sogenannte Grid Layout System gestoßen.
Im Vergleich zu herkömmlichen Systemen, wie z.B. 3-Column mit Kopf- und Fußzeile, oder ganz neuen Systemen wie Flexbox Layout scheint es ja gewisse Vorteile zu geben und eine relativ gute Kompatibilität zu haben.

Es wird oft eine Breite von 960 px hergenommen, und auf 12 oder 16 Grids aufgeteilt.
Warum genau 960 Pixel?
Bei einem 1920x1080 px Bildschirm hat man dann ja noch recht große Abstände an den Seiten.

Und könnte man nicht theoretisch auch ein Grid Layout rein mit Prozentwerten machen, mit 10 Spalten a 10 %?

LG

 

[Dormilich]

Warum genau 960 Pixel?

Das hat was mit dem Leseverhalten zu tun. Lange Textzeilen lassen sich schwerer lesen als mittellange (Da ja das Auge vom Zeilenende zum nächsten Zeilenanfang springen muß. Das wird umso schwieriger, je länger die Zeile ist.)

 

[Darry]

Okay, das stimmt.
Den Abstand an den Seiten finde ich aber auch nicht schön.
Die meißten 960px Grid Layouts zentrieren das dann einfach.

Ich könnte an den Seiten aber noch etwas anderes einbauen um sie auszufüllen und dennoch eine gute Lesbarkeit zu erreichen.

 

[Dormilich]

meisten, nicht meißten.

Die meißten 960px Grid Layouts zentrieren das dann einfach.

ist halt die sinnvollste Variante damit umzugehen.

Ich könnte an den Seiten aber noch etwas anderes einbauen um sie auszufüllen und dennoch eine gute Lesbarkeit zu erreichen.

die meisten Grid-Layouts kannst du ja auch über LESS/SASS ändern (mußt dann aber die CSS-Dateien dazu selbst hosten).

Frameworks sind immer ein Kompromiss zwischen Flexibilität und Design.

 

[Darry]

Folgendes hab ich vor:
Die Seite soll, mit der "Deskop First" Vorgehensweise auf eine Bildschirmauflösung von 1024*768 Pixel optimiert werden (EVGA / 720p).

Bei einem Full HD Gerät (1920x1080) soll eine Zusatzspalte angezeigt werden, damit es an den Seiten nicht zu leer wird.
Bei kleineren Bildschirmen (Tablet/Smartphone) soll dann die Navigation als horizontales Menü oben gezeigt werden, und der Block "Aside" soll nach unten direkt über den Footer wandern.
Nun könnte ich das 960px Grid Column Layout hernehmen und noch was für die Full HD Auflösung dazu basteln.
Oder ich könnte ein einfaches floating 5 Column Layout nehmen

Was würde für die Verwendung des 960 px Grid Layouts sprechen?

 

[Dormilich]

Was würde für die Verwendung des 960 px Grid Layouts sprechen?

nichts. dein Wunschlayout läßt sich m.W.n. mit keinem existierenden Grid-Framework bewerkstelligen. also muß du selbst ran (CSS Media Queries sind dein Stichwort)

 

[Darry]

Das dachte ich mir fast.
Wenn ich es selber mache, würde auch mit den Media Queries arbeiten. 1024px Base Layout und dann mit Media Querys nach unten (Mobil) und nach oben (Full HD Bildschirm) erweitern.
Dann aber wahrscheinlich nicht als Grid Layout sondern klassisch mit float.

 

[Dormilich]

auch Grid-Layouts benutzen float als Basis.