Wer bislang Inhalte auf einer Kurs- oder Kategorienseite nebeneinander in Spalten darstellen wollte, kam um die Benutzung von Layouttabellen nicht herum. Allerdings können diese Tabellen auf mobilen Endgeräten nicht gut dargestellt werden, und Nutzer sind gezwungen, auf ihrem kleinen Display horizontal zu scrollen. Benutzerfreundlicher ist es, wenn sich auch die in ILIAS eingestellten Inhalte an die jeweilige Bildschirmbreite anpassen. Wie Sie in ILIAS 5.0 ein Mehrspaltenlayout umsetzen, das sich responsiv verhält und keine Layouttabelle nutzt, wird im heutigen Beitrag beschrieben.

In unserem Beispiel setzen wir ein fünfspaltiges Layout in einem Standard-ILIAS um. Die Spalten sollen später Logos bzw. Icons enthalten, die bei ausreichender Breite nebeneinander darstellt werden. Verringert der Benutzer die Bildschirmbreite, bricht ILIAS die Icons bei definierten Breiten automatisch um – bis alle Spalten bei einer Ansicht auf einem mobilen Endgerät untereinander platziert werden, siehe Screenshot rechts.

Hinweis: Die Startseite von ilias.de verwendet ein vierspaltiges Layout. Hier können Sie das responsive Verhalten schnell selbst ausprobieren, in dem Sie das Browserfenster einfach mal verkleinern.

Es empfiehlt sich, das Mehrspaltenlayout mit Hilfe des Seitenelements „Block“ umzusetzen. So können die Spalten sowohl Bilder als auch Texte enthalten. Da Sie diese Blöcke wahrscheinlich nur für Kategorien-, Kurs- oder Gruppenseiten nutzen, sollte ein eigenständiger Content Style angelegt und verwendet werden.

Alle Änderungen am Content Style nehmen Sie in  Administration » Layout : Content-Styles vor. Sie benötigen also entsprechende Rechte auf Ihrer ILIAS-Installation.

Erster Schritt: Definieren von Media Queries im Content Style

Damit sich Seiteninhalte überhaupt responsiv verhalten, müssen für den verwendeten Content Style sogenannte „Media Queries“ definiert werden. Diese Regeln bestimmen, ab welcher Bildschirmbreite ILIAS welche CSS-Angaben für die Darstellung des Seitencontents verwendet. Die Definition dieser Regeln erfolgt im Reiter Media Queries des entsprechenden Content Styles.

Der Pixel-Wert des letztgenannten Media Queries ist auch der Wert, bei dem ILIAS automatisch in die Ansicht für Mobilgeräte wechselt und beispielsweise die Inhalte der rechten Spalte der Kursansicht unterhalt der Content-Spalte anzeigt. Die Werte der darüber liegenden Queries ergeben sich aus der Forderung einer mindestens 100px breiten Spalte. Durch das Anlegen der Media Queries erscheint jetzt auf dem Bearbeitungsformular einer Styleklasse zusätzlich ein Auswahlmenü für den entsprechenden Media Query. Diese sind mit @media gekennzeichnet.

Zweiter Schritt: Neue Styleklassen für responsive Spalten

Im Content-Style, der von der entsprechenden Kategorie- oder Kursseite verwendet wird, müssen außerdem zwei neue Styleklassen vom Typ „Block“ angelegt werden (die nachfolgend verwendeten Style-Namen können auch anders gewählt werden):

1. ResponsivContainerFluidAlle5 : Dieser Block ist der Container, der nachher die fünf Spalten enthält. Es müssen nur Angaben für den Media Query (@media) „Default“ vorgenommen werden. Tragen Sie am Ende des Formulars unter „Weitere CSS-Regeln“ folgende „Zusatzparameter“ ein:

   • width: 100%
   • float: left
   • padding: 0
   • margin: 0
2. ResponsivElement1Spalte : Dieser Block wird für die einzelne Spalte verwendet. Hier müssen pro Media Query andere Werte eingetragen werden. Nur so zeigt ILIAS bei geringerer Bildschirmbreite automatisch weniger Spalten an.

   • @media: Standard : Tragen Sie unter „Weitere CSS-Regeln“ folgende „Zusatzparameter“ ein, um standardmäßig ein Fünf-Spalten-Layout anzuzeigen:
     • width: calc(20%)
     • float: left
     • padding: 0
     • margin: 0
   • @media: ...(max-width: 1067px) : Macht aus fünf Spalten ein Vier-Spalten-Layout.
     • width: calc(25%)
   • @media: ...(max-width: 967px) : Erzeugt ein Drei-Spalten-Layout.
     • width: calc(33.3%)

   • @media: ...(max-width: 867px) : Zeigt nur noch zwei Spalten nebeneinander an.
     • width: calc(50%)
   • @media: ...(max-width: 767px) : Stellt den Seiteninhalt für mobile Endgeräte in einer einzigen Spalte dar.
     • width: calc(100%)

Letzter Schritt: Gestaltung des Spaltenlayouts mit ILIAS-Seiteneditor

Nach der Definition der benötigten Stylesheet-Angaben kann nun mit dem ILIAS-Seiteneditor eine Seite mit responsivem Spaltenlayout erstellt werden.

Das war es auch schon. Das responsive Spaltenlayout ist umgesetzt. Lassen Sie sich nicht davon irritieren, dass das Layout im Bearbeitungsmodus des ILIAS-Seiteneditors etwas treppenartig aussieht:

Wenn Sie die Blöcke probeweise bereits mit einem Text oder einem Bild befüllt haben, können Sie den Effekt der Stylesheets schnell selbst überprüfen. Alle Spalten sind sauber nebeneinander positioniert:

Um die Responsivität zu überprüfen, verkleinern Sie jetzt einfach schrittweise die Breite des Browserfensters. Sobald eine bestimmte Breite unterschritten wird, springt der Inhalt der letzten Spalte rechts in die zweite Zeile. Der nachfolgende Screenshot zeigt das obige Fünf-Spalten-Layout, wenn der Media Query @media: ...(max-width: 967px) zur Anwendung kommt und zwei der fünf Spalten in eine zweite Reihe verschoben werden:

Weitere Hinweise

Die Angaben für das Fünfspaltenlayout können relativ einfach angepasst werden, um ein Dreispalten- oder Vierspaltenlayout zu realisieren. Es würden dann entsprechend weniger Media Queries definiert und andere Breiten gewählt werden.

Sollen die Spalten vor allem Text enthalten, empfiehlt sich auch eine grössere Minimalbreite und entsprechend größere Abstände bei der Angabe der Maximalbreite in den Media Queries. Die im Beispiel verwendeten 100 Pixel haben sich an der Breite der verwendeten Icons orientiert.

Auch die Präsentation von Text- oder Bildinhalten über zwei Spalten hinweg ist möglich. Dazu bedarf es nur eines weiteren Block-Stylesheets (z.B. mit Namen ResponsivElement2Spalten). Je nach Media Query definieren Sie für dieseb Block dann immer Breite von zwei Spalten. Im Fall einer Drei-Spalten-Ansicht mit dem Media Query @media: ...(max-width: 967px) müsste für den Block über zwei Spalten width: calc(66.6%) angegeben werden.