Open Source e-Learning
  • Login

Functions

Kunkel, Matthias [mkunkel] - 12. Aug 2015, 09:00

Responsives Spaltenlayout mit dem ILIAS-Seiteneditor

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.
Im Beispiel sollen die fünf Spalten eine Minimalbreite von 100px haben. Entsprechend müssen zusätzlich zur ohnehin vorhandenen Regel „Standard“ noch vier weitere Media Queries mit folgenden Angaben angelegt werden:
  • only screen and (max-width: 1067px)
  • only screen and (max-width: 967px)
  • only screen and (max-width: 867px)
  • only screen and (max-width: 767px)
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.
  1. Legen Sie auf der Kurs- oder Kategorieseite zunächst einen neuen Block mit dem Style ResponsivContainerFluidAlle5 an.
  2. Innerhalb dieses Blocks legen Sie nun weitere fünf Blöcke an. Diese bilden jeweils die responsiven Spalten ab und können später mit Inhalt gefüllt werden. Weisen Sie diesen fünf Blöcken jeweils den Style ResponsivElement1Spalte zu.
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.

Functions

User Image: Fabian
Kruse, Fabian [Fabian] - 09. Jan 2018

Hallo sesterhenn, die angesprochene Verbesserung kann in der Beta bereits ausprobiert werden, siehe: http://www.ilias.de/docu/goto_docu_wiki_wpage_4292_1357.html

Die generelle Überarbeitung des Seiteneditors wird hier diskutiert: https://www.ilias.de/docu/goto_docu_wiki_wpage_4555_1357.html
User Image: sesterhenn
Sesterhenn, Fabian [sesterhenn] - 09. Jan 2018

Ich sehe unter 5.3 Beta 4 keine Verbesserung im Seiteneditor. Ist vielleicht 5.4 gemeint :)? Problematisch ist vor allem der Javascript-Modus des Seiteneditors. In dieser Ansicht sind die eingesetzten responsiven Blöcke kaum noch zu erkennen und zu bearbeiten. Den Javascript-Modus sollte man daher deaktivieren. Mit dem reinen Formularmodus geht es wesentlich besser, auch wenn man dort dann sicher den ein oder anderen Klick mehr tun muss.
User Image: Fabian
Kruse, Fabian [Fabian] - 08. Jan 2018

Hallo Slam92, man muss beim Zusammenklicken genau aufpassen, dass man das Layout richtig anlegt (siehe zweiter Screenshot). Dann sollte es in der Präsentation aber passen. Die gute Nachricht ist, dass dieses Layout ab ILIAS 5.3 viel leichter umsetzbar ist. Es ist dann ganz einfach und deutlich übersichtlicher im Seiteneditor anzulegen. Wir werden hierzu noch einen Blogpost mit einem Update veröffentlichen.
User Image: Slam92
[Slam92] - 05. Jan 2018

Hallo :-)
tolle Anleitung :-) Konnte viel dadurch lernen. Eine kleine Herausforderung habe ich noch damit. Im Bearbeiten Modus sehe ich die Blöcke nicht nebeneinander angeordnet sonder alle in- und untereinander. Es wird auch beim betrachten (also auf Seite) genauso komisch angezeigt.
Kann mir wer verraten wie ich so eine schöne Anzeige bekomme wie in diesem Post beim Screenshot "5 Columns Layout im Bearbeitenmodus"? Ich würde das DesignPattern wirklich gerne umsetzen. Ich habe übrigens Ilias Version 5.2.9 :-)

Danke :-)
User Image: mkunkel
Kunkel, Matthias [mkunkel] - 10. Feb 2017

Hallo Max, Danke für die Lorbeeren ;-) und den Feature-Request. Mit 5.2 haben wir ja schon einen Schritt Richtung Skalierung getan, siehe http://www.ilias.de/docu/goto_docu_wiki_wpage_2876_1357.html. Die oben stehende Anleitung sollte dann spätestens mit 5.3 obsolet werden, wenn dieses Feature umgesetzt ist: http://www.ilias.de/docu/goto_docu_wiki_wpage_4292_1357.html. Gruß, Matthias
10. Feb 2017

Vielen Dank! Das war genau was ich gesucht habe. Tolle Funktionalität und super Beschreibung. Als Idee für die Zukunft wäre es jetzt noch wünschenswert, wenn Bilder automatisch skalieren würden. Einen Featurerequest habe ich hierzu erstellt: http://www.ilias.de/docu/goto.php?target=wiki_1357_Allow_images_to_scale_with_browser_width . Viele Grüße! Max
User Image: kiegel
Kiegel, Colin [kiegel] - Last edited on 18. Jan 2017

Übrigens wird das alles ab ILIAS 5.3 viel komfortabler möglich sein -- dank der Finanzierung der Douglas Parfümerie für dieses Feature: http://www.ilias.de/docu/goto_docu_wiki_wpage_4292_1357.html. Umsetzung und Konzeption: Leifos und Qualitus. :-)
User Image: mkellermann
Kellermann, Manfred [mkellermann] - 18. Jan 2017

Besten Dank, super Anleitung!
User Image: TomaszKolonko
Kolonko, Thomas [TomaszKolonko] - Last edited on 06. Nov 2015

Vielen Dank für den Beitrag. Ich habe leider noch ein Problem, dass ich nicht schön lösen kann. Wenn man den Repository Tree zur linken Seite aufklappt, nimmt dieser eine beträchtlich Breite des gesamten Screens in Anspruch. Dieser wird nun dem Seitenlayout nicht abgezogen. Ohne diesen Tree funktionert alles Bestens, sobald dieser da ist, laufen die Bilder des Seitenlayouts wenn die Breite verkürzt wird. Eine Erhöhung des max-width in den mediaquerries löst das Problem aber im ausgeklappten Zustand schlagen die Bilder viel zu früh um. Gibt es eine schönere Lösung für dieses Problem?
User Image: miriamwegener
Wegener, Miriam [miriamwegener] - 11. Sep 2015

Danke für den hilfreichen Blogbeitrag! Das ist wirklich sehr sehr praktisch!!!
User Image: mkunkel
Kunkel, Matthias [mkunkel] - 17. Aug 2015

Peter,thanks for this hint. I have added the missing description for the 1067 media query.
User Image: pellemans
Pellemans, Peter [pellemans] - 17. Aug 2015

This is great! However, it goes from 5 to 3 columns. I think you forgot one media query in ResponsivElement1Spalte class:
@media: ...(max-width: 1067px) : Erzeugt ein Vier-Spalten-Layout.
width: calc(25%)
-Peter
User Image: yvseiler
Seiler, Yvonne [yvseiler] - Last edited on 12. Aug 2015

Ein toller Beitrag!
Vielen Dank für die genaue Schritt-für-Schritt-Anleitung. Ich habe diese sofort selber umgesetzt und es funktioniert bestens. Damit haben wir nun auch auf unserer ILIAS-Installation Bilder im Magazin, die sich auf kleineren Bildschirmen untereinander anordnen lassen. Wer bereits das eine oder andere im Content-Style selber angepasst hat, wird keine Probleme haben (und ich bin sicher, die anderen werden dank der Anleitung ebenfalls schnell ein solches Layout umsetzen können). Ein riesengrosses Merci aus Bern! Liebe Grüsse, Yvonne