Grid-Layout

Einführung

Mithilfe des Grid-Layouts können Elemente einer Webseite visuell spaltenbasiert arrangiert werden. Eine Grid-Layout-Komposition (technisch ausgezeichnet durch die HTML-/CSS-Klasse .row) besteht aus bis zu zwölf Spalten (Columns, HTML-/CSS-Klasse .col). In jeder Spalte können dann beliebig viele (HTML-)Elemente platziert werden.

Wenn viel horizontaler Platz zur Verfügung steht, werden Grid-Layout-Spalten nebeneinander dargestellt, beispielsweise in Desktop-Browsern in bildschirmfüllender Vollansicht. Demgegenüber werden bei wenig horizontalem Platz die Spalten eines Grid-Layouts untereinander arrangiert, beispielsweise auf Smartphones in Hochformat-Ansicht oder in schmalgestellten Desktop-Browser-Fenstern.

Diese Anpassung ermöglicht es, dass ein und dieselbe Webseite auf verschiedensten Bildschirmformaten stets adäquat dargestellt wird und bedient werden kann. Auch erübrigt sich damit die Entwicklung und der Betrieb dedizierter Desktop- und mobiloptimierter Versionen einer Webseite, wie es beispielsweise Wikipedia für Desktop und für Mobilgeräte (noch) macht.

Für die Bestimmung der aktuell zur Verfügung stehenden horizontalen Breite bezieht sich das Grid-Layout nicht auf die Bildschirmweite und auch nicht auf die Weite des beinhaltenden HTML-Container-Elementes. Stattdessen bezieht sie sich auf die Browser-Fensterweite.

Die Übergangsstellen, bei denen das Spalten-Arrangement anpasst wird, nennt man Breakpoints. Im GESIS-Web-Frontend-Framework gibt es fünf definierte Breakpoints, wodurch fünf typische Klassen an Darstellungsbreiten abgedeckt werden.

Dieses adaptive Verhalten ist ein elementares Element in der Umsetzung von Responsive Design im GESIS-Web-Frontend-Framework.

Hervorzuheben ist außerdem, dass sich das Grid-Layout automatisch ohne Seitenneuladen an veränderte Breitenzustände anpasst. Neue Breitenzustände ergeben sich beispielsweise beim Wechsel zwischen Hoch- zu Querformatdarstellung (Smartphones und Tablets) oder beim Anpassen der Browser-Fensterbreite (Desktopumgebungen).

Das Grid-Layout im GESIS-Web-Frontend-Framework nutzt das Grid-System von Bootstrap 5. Daher können neben den auf dieser Seite gezeigten Beispielen auch Grid-Layouts mit anderen Spaltenanzahlen und individuellen Spaltenbreiten umgesetzt werden, um bedarfsgerechten Bedingungen und Anforderungen zu genügen. Bootstrap bietet auf seinen Dokumentationsseiten weitere Informationen und zeigt Konfigurationsmöglichkeiten, beispielsweise zur Spaltenanzahl und -breite.

Das GESIS-Web-Frondend-Framework übernimmt folgende Breakpoints von Bootstrap 5 (mit Beispielen typischer Bildschirmgrößen):

• xs (≥ 0px): alle Smartphones in Hochformat, bei kleineren Smartphones (iPhone 4) auch im Querformat – und breiter
• sm (≥ 576px): Standard-Smartphones im Querformat (iPhone SE, Pixel 4) – und breiter
• md (≥ 768px): größere Smartphones im Querformat (iPhone 12 Pro, Pixel 5), Standard-Tablets im Hochformat (iPads ohne Pro) – und breiter
• lg (≥ 992px): Standard-Tablets im Querformat (iPads ohne Pro), größere Tablets im Hochformat (iPad Pro) – und breiter
• xl (≥ 1200px): Laptop- und Desktop-Bildschirme, größere Tablets im Querformat (iPad Pro) – und breiter

Der Breakpoint xxl (≥ 1400px) wird vorerst nicht übernommen.

Best Practices, Barrierefreiheit und Responsive Design

Grid-Layouts dienen lediglich der

• optionalen,
• an verfügbarer Breite angepassten,
• visuellen Darstellung

von Inhalten.

Demgegenüber existiert eine Vielfalt darin,

• wer (Menschen mit und ohne Behinderungen) oder was (Maschinen wie beispielsweise Webcrawler) auf Inhalte zugreift
• und wie auf diese Inhalte zugegriffen wird (großer, kleiner oder gar kein Bildschirm; Screenreader; Braille-Zeile).

Um dieser Vielfalt der Inhaltserschließung und -interaktion gerecht zu werden, soll der Inhalt einer Webseite stets auch

• linear, eindimensional,
• ohne Notwendigkeit einer visuellen Darstelllung und ohne Bezug auf eine solche

erschlossen werden können.

Falsch eingesetzt erschweren oder verhindern Grid-Layouts, dass Inhalte erschlossen, verstanden und bedient werden können. Solche Probleme fallen bei der technischen Entwicklung und dem Verfassen von Inhalten häufig nicht auf, da sie meistens "sehend, auf großem Bildschirm" erstellt werden. Daher bietet sich folgende Strategie zum korrekten Einsatz eines Grid-Layouts an:

Bei der technischen Umsetzung einer Webseite und dem Verfassen ihres Inhaltes geht man stets von einer rein linearen (also effektiv einspaltigen) Darstellung aus. Die einspaltige Darstellung als kleinster gemeinsamer Nenner wird allen Benutzern und Wiedergabeformen gerecht.
Inhalte können in Grid-Layout-Spalten arrangiert werden, solange stets gewährleistet ist, dass der gesamte Inhalt weiterhin auch in einspaltiger Darstellung verständlich ist.
Durch das Verkleinern der Browser-Fensterbreite oder durch Betrachtung auf einem Smartphone kann und soll überprüft werden, ob der Inhalt weiterhin in linearer, eindimensionaler Darstellung verständlich ist.

Beschreibungen und Verweise, die auf einer räumlichen Darstellung einer Webseite beruhen, müssen vermieden werden: Eine Formulierung wie beispielsweise

"In der linken Spalte finden Sie Informationen zum Standort Mannheim, in der rechten Spalte Informationen zum Standort Köln"

ist nur für einen (sehenden) Bildschirmbenutzer bei ausreichend breitem Browser-Fenster verständlich.
Solche räumlichen Beschreibungen werden spätestens dann unverständlich, sobald die "linke" und "rechte" Spalte auf kleinen Bildschirmen/Fenstern untereinander, also effektiv einspaltig ohne Möglichkeit einer Links-Rechts-Unterscheidung, angezeigt werden; desweiteren ergeben räumliche Beschreibungen für blinde Benutzer grundsätzlich keinen Sinn, da sie Seiteninhalte nichtvisuell erschließen (keine zweidimensionale Bildschirmdarstellung, sondern lineare, eindimensionale Darstellung per Sprachausgabe oder Braille-Zeile).

Statt über visuelle/layout-abhängige Angaben soll die Bedeutung oder Funktion einer Spalte in ihr, durch sie selbst ausgedrückt werden.
Im folgenden Do-Beispiel werden dazu in jeder Spalte einleitende, die jeweilige Spalte beschreibende Überschriften verwendet ("Standort Mannheim", "Standort Köln").
Zusätzlich erlauben Verlinkungen die direkte Navigation zum erwähnten (Spalten)inhalt. Solche Verlinkungen errmöglichen es außerdem, andere, zwischengelagerte und durchaus längere Spalten und Inhalten zu überspringen, was insbesondere der Barrierefreiheit und der Orientierung auf kleinen Bildschirmen zuträglich ist.
Außerdem sei angemerkt, dass erst gar nicht von "Spalten" gesprochen wird – Spalten sind ein reines Layout-Konzept und sollen daher nicht für inhaltliche Beschreibungen oder Referenzierungen genannt oder genutzt werden.

Genereller HTML-Aufbau

Grid-Layout mit gleichmäßigen Spalten

<div class="row [row-Klassen mit Angabe eines Breakpoints und der Anzahl der ab diesem Breakpoint nebeneinander anzuzeigenden Spalten]">
  <div class="col">
    <!-- Elemente der ersten Spalte -->
  </div>
  <div class="col">
    <!-- Elemente der zweiten Spalte -->
  </div>
  <!-- ggf. weitere Spalten -->
</div>

Grid-Layout mit individuellen Spaltenbreiten (siehe Beispiel zweispaltiges Grid-Layout (⅓-⅔-Spalten))

<div class="row">
  <div class="col [col-Klassen mit Angabe eines Breakpoints und der ab diesem Breakpoint von dieser Spalte anzunehmenden zwölf-teiligen Breite">
    <!-- Elemente der ersten Spalte -->
  </div>
  <div class="col [col-Klassen mit Angabe eines Breakpoints und der ab diesem Breakpoint von dieser Spalte anzunehmenden zwölf-teiligen Breite">
    <!-- Elemente der zweiten Spalte -->
  </div>
  <!-- ggf. weitere Spalten -->
</div>

Beispiele

• Breite ≥ sm: Darstellung aller Spalten nebeneinander (entsteht durch row-cols-sm-2 am umschließenden row-Element):

  1	2
  1	2
  1	2

• Breite < sm: Darstellung aller Spalten untereinander (entsteht durch row-cols-1 am umschließenden row-Element):

  1

  1

  1

  Lücke zur visuellen Abtrennung der logischen Spalten (entsteht durch g-gesis-2)

  2

  2

  2

• Unabhängig von Bildschirmbreite immer Darstellung aller Spalten nebeneinander (entsteht durch row-cols-2 am umschließenden row-Element):

  1	2
  1	2

• Breite ≥ lg: Darstellung der Spalten nebeneinander. Spalte 1 nimmt 4 von 12 Teilen ein (⅓) (entsteht durch col-lg-4 an der ersten col-Spalte); Spalte 2 nimmt 8 von 12 Teilen ein (⅔) (entsteht durch col-lg-8 an der zweiten col-Spalte). 1--- 2-------

  1	2
  1	2
  1	2

• Breite < lg: Darstellung der Spalten untereinander: Spalte 1 nimmt 12 von 12 Teilen ein (effektiv einspaltig) (entsteht durch col-12 an der ersten col-Spalte), Spalte 2 nimmt 12 von 12 Teilen ein (effektiv einspaltig) (entsteht durch col-12 an der zweiten col-Spalte)

  1

  1

  1

  Lücke zur visuellen Abtrennung der logischen Spalten (entsteht durch g-gesis-2)

  2

  2

  2

• Breite ≥ md: Darstellung aller Spalten nebeneinander(entsteht durch row-cols-md-3 am umschließenden row-Element):

  1	2	3
  1	2	3
  1	2	3

• Breite < md: Darstellung aller Spalten untereinander (entsteht durch row-cols-1 am umschließenden row-Element):

  1
  1
  1
  Lücke zur visuellen Abtrennung der logischen Spalten (entsteht durch g-gesis-2)
  2
  2
  2
  Lücke zur visuellen Abtrennung der logischen Spalten (entsteht durch g-gesis-2)
  3
  3
  3

• Breite ≥ lg: Darstellung aller Spalten nebeneinander (entsteht durch row-cols-lg-4 am umschließenden row-Element):

  1	2	3	4
  1	2	3	4
  1	2	3	4

• sm ≤ Breite < lg: Darstellung von jeweils zwei Spalten nebeneinander (entsteht durch row-cols-sm-2 am umschließenden row-Element):

  1	2
  1	2
  1	2
  Lücke zur visuellen Abtrennung der logischen Spalten (entsteht durch g-gesis-2)
  3	4
  3	4
  3	4

• Breite < sm: Darstellung aller Spalten untereinander (entsteht durch row-cols-1 am umschließenden row-Element):

  1
  1
  1
  Lücke zur visuellen Abtrennung der logischen Spalten (entsteht durch g-gesis-2)
  2
  2
  2
  Lücke zur visuellen Abtrennung der logischen Spalten (entsteht durch g-gesis-2)
  3
  3
  3
  Lücke zur visuellen Abtrennung der logischen Spalten (entsteht durch g-gesis-2)
  4
  4
  4