iLUB Blog
Responsive Spalten – Schlaue Darstellung mit dem Spaltenlayout
[y.seiler4] - 20. Aug 2018, 09:13
Wer bisher Inhalte – sei es im ILIAS-Kurs, im Lernmodul oder auch im Wiki – nebeneinander platzieren wollte, hat sich mit erweiterten Tabellen ausgeholfen. Diese hatten aber das Problem, dass auf kleinen Bildschirmen (z.B. Smartphones), die Inhalte nebeneinander blieben und man seitlich scrollen musste. Das muss nun nicht mehr sein.
Seit ILIAS 5.3 (Update im Juli 2018) können über den ILIAS-Seiteneditor sogenannte «Responsive Spalten» hinzugefügt werden. Tabellen können nun endlich für Tabellen genutzt werden und «Spaltenlayout» für Spalten.
Nachfolgend wird erklärt, wie dieses neue Element funktioniert und wie Sie ein 2-, 3- oder 4-Spaltenlayout einrichten können.
Seit ILIAS 5.3 (Update im Juli 2018) können über den ILIAS-Seiteneditor sogenannte «Responsive Spalten» hinzugefügt werden. Tabellen können nun endlich für Tabellen genutzt werden und «Spaltenlayout» für Spalten.
Nachfolgend wird erklärt, wie dieses neue Element funktioniert und wie Sie ein 2-, 3- oder 4-Spaltenlayout einrichten können.
Der Vorteil
Das Spalten-Element hilft dabei, Seiteninhalte in Spalten zu strukturieren. So können beispielsweise zwei Elemente auf grossen Bildschirmen parallel nebeneinander dargestellt werden. Schaut man sich dieselbe Seite auf einem Smartphone an, werden die Inhalte untereinander angeordnet. So bleibt der Inhalt auch auf kleinen Bildschirmen logisch strukturiert und gut ersichtlich.
So geht es
Schritt 1: Spaltenlayout hinzufügen
- Öffnen Sie den ILIAS-Seiteneditor (z.B. im Lernmodul oder im Kurs > Seite gestalten).
- Fügen Sie einen neuen Inhalt hinzu und wählen Sie Spaltenlayout einfügen.
Schritt 2: Spaltenbreite definieren
- Geben Sie die Anzahl Spalten an (z.B. 2).
- Wählen Sie die Spaltenbreite für kleine, mittlere, grosse und sehr grosse Bildschirmgrössen aus (siehe Erklärung unten).
- Klicken Sie auf Speichern.
Erklärung
Ihnen stehen bei der Spaltenbreite vier Bildschirmgrössen zur Auswahl. Als Regel kann man sich die Grössen wie folgt merken:
- Klein = Smartphones
- Medium = Tablet
- Gross = Laptop und kleinere Bildschirme
- Sehr gross = Grosse Bildschirme
Die Arbeit mit 12er-Einheiten
Eine Zeile ist unterteilt in 12 Elemente. D.h. geht eine Spalte über die gesamte Zeile, so nutzt sie 12/12-Elemente (= 100% der Seitenbreite). Spalten können mehrere 1/12-Einheiten einer Zeile in Anspruch nehmen. Die Anzahl Einheiten hängt zusammen mit der Spaltenbreite und der Anzahl Spalten.
z.B.
Sollen 2 Spalten gleich breit sein, nutzen beide 6/12-Einheiten:
Sie wollen, dass für ganz grosse bis mittlere Bildschirme jeweils zwei Spalten ersichtlich sind, d.h. die Einheiten für "medium", "gross" und "sehr gross" haben alle dieselbe Grösse:
Für einen "kleinen" Bildschirm reicht der Platz nicht aus, dass 2 Spalten nebeneinander dargestellt werden (die Inhalte wären zu gedrängt). Daher macht es Sinn, für "klein" die Spalten auf 1 Spalte zu beschränken (sie füllt also die gesamte Seitenbreite aus und benötigt daher alle 12-Einheiten):
z.B.
Sollen 2 Spalten gleich breit sein, nutzen beide 6/12-Einheiten:
6/12 + 6/12 = 12/12Sie wollen, dass für ganz grosse bis mittlere Bildschirme jeweils zwei Spalten ersichtlich sind, d.h. die Einheiten für "medium", "gross" und "sehr gross" haben alle dieselbe Grösse:
6/12 (= 50% der Seitenbreite)Für einen "kleinen" Bildschirm reicht der Platz nicht aus, dass 2 Spalten nebeneinander dargestellt werden (die Inhalte wären zu gedrängt). Daher macht es Sinn, für "klein" die Spalten auf 1 Spalte zu beschränken (sie füllt also die gesamte Seitenbreite aus und benötigt daher alle 12-Einheiten):
12/12 (= 100% der Seitenbreite)2 Spalten
Anzahl Spalten | Klein (Small) | Medium | Gross (large) | Sehr gross (Extra Large) |
2 | ||||
(A) | 12/12 | 6/12 | 6/12 | 6/12 |
(B) | 12/12 | 6/12 | 6/12 | 6/12 |
Klein (Small): Spalte (A) braucht die gesamte Seitenbreite für sich (12/12 = 100%). Spalte (B) ebenfalls, daher werden sie untereinander dargestellt.
Gross (Large): Spalte (A) braucht die Hälfte der Seitenbreite (6/12 = 50%). Spalte (B) benötigt ebenfalls die Hälfte, daher werden sie zusammen nebeneinander dargestellt (50% + 50% = 100%).
Gross (Large): Spalte (A) braucht die Hälfte der Seitenbreite (6/12 = 50%). Spalte (B) benötigt ebenfalls die Hälfte, daher werden sie zusammen nebeneinander dargestellt (50% + 50% = 100%).
Desktop
Mobile3 Spalten
Anzahl Spalten | Klein (Small) | Medium | Gross (large) | Sehr gross (Extra Large) |
3 | ||||
(A) | 12/12 | 12/12 | 4/12 | 4/12 |
(B) | 12/12 | 12/12 | 4/12 | 4/12 |
(C) | 12/12 | 12/12 | 4/12 | 4/12 |
Klein (Small): Spalte (A) braucht die gesamte Seitenbreite für sich (12/12 = 100%). Spalten (B) und (C) ebenfalls, daher werden sie untereinander dargestellt.
Gross (Large): Spalte (A) braucht ein Drittel der Seitenbreite (4/12 = 33.3%). Spalten (B) und (C) benötigen ebenfalls ein Viertel. Insgesamt ergibt sich darauf wieder ein Ganzes (12/12) daher werden sie zusammen nebeneinander dargestellt (33.3% + 33.3% + 33.3% = 100%).
Gross (Large): Spalte (A) braucht ein Drittel der Seitenbreite (4/12 = 33.3%). Spalten (B) und (C) benötigen ebenfalls ein Viertel. Insgesamt ergibt sich darauf wieder ein Ganzes (12/12) daher werden sie zusammen nebeneinander dargestellt (33.3% + 33.3% + 33.3% = 100%).
Desktop
Mobile4 Spalten
Anzahl Spalten | Klein (Small) | Medium | Gross (large) | Sehr gross (Extra Large) |
4 | ||||
(A) | 12/12 | 6/12 | 3/12 | 3/12 |
(B) | 12/12 | 6/12 | 3/12 | 3/12 |
(C) | 12/12 | 6/12 | 3/12 | 3/12 |
(D) | 12/12 | 6/12 | 3/12 | 3/12 |
Klein (Small): Spalte (A) braucht die gesamte Seitenbreite für sich (12/12 = 100%). Spalten (B), (C) und (D) ebenfalls, daher werden sie untereinander dargestellt.
Medium: Spalte (A) braucht die Hälfte der Seitenbreite (6/12 = 50%). D.h. daneben hat noch einmal eine Spalte Platz. Spalten (B), (C) und (D) benötigen ebenfalls jeweils die Hälfte der Seitenbreite, somit werden Spalten (A) und (B) (50% + 50% = 100%) sowie (C) und (D) (50% + 50% = 100%) nebeneinander dargestellt. Zwischen (B) und (C) gibt es einen Umbruch, d.h. die Spalten (C) und (D) werden auf einer nächsten Zeile dargestellt.
Gross (Large): Spalte (A) braucht ein Viertel der Seitenbreite (3/12 = 25%). Spalten (B), (C) und (D) benötigen ebenfalls je ein Viertel. Da dadurch vier Spalten nebeneinander Platz finden, können alle Spalten nebeneinander dargestellt werden (25% + 25% + 25% + 25% = 100%).
Medium: Spalte (A) braucht die Hälfte der Seitenbreite (6/12 = 50%). D.h. daneben hat noch einmal eine Spalte Platz. Spalten (B), (C) und (D) benötigen ebenfalls jeweils die Hälfte der Seitenbreite, somit werden Spalten (A) und (B) (50% + 50% = 100%) sowie (C) und (D) (50% + 50% = 100%) nebeneinander dargestellt. Zwischen (B) und (C) gibt es einen Umbruch, d.h. die Spalten (C) und (D) werden auf einer nächsten Zeile dargestellt.
Gross (Large): Spalte (A) braucht ein Viertel der Seitenbreite (3/12 = 25%). Spalten (B), (C) und (D) benötigen ebenfalls je ein Viertel. Da dadurch vier Spalten nebeneinander Platz finden, können alle Spalten nebeneinander dargestellt werden (25% + 25% + 25% + 25% = 100%).
Desktop
Tablet
MobileUngleiche Verteilung
Anzahl Spalten | Klein (Small) | Medium | Gross (large) | Sehr gross (Extra Large) |
3 | ||||
(A) | 12/12 | 6/12 | 8/12 | 8/12 |
(B) | 12/12 | 3/12 | 2/12 | 2/12 |
(C) | 12/12 | 3/12 | 2/12 | 2/12 |
Klein (Small): Spalte (A) braucht die gesamte Seitenbreite für sich (12/12 = 100%). Spalten (B), (C) und (D) ebenfalls, daher werden sie untereinander dargestellt.
Medium: Spalte (A) braucht die Hälfte der Seitenbreite (6/12 = 50%). D.h. daneben haben noch mehr Spalten Platz. Spalten (B) und (C) sollen kleiner sein als die Spalte (A), sie erhalten daher den restlichen Platz auf sich aufgeteilt (2* 3/12 = 2 * 25% = 50%). Alle drei Spalten zusammen benötigen die komplette Seitenbreite (50% + 50% = 100%).
Gross (Large): Spalte (A) braucht zwei Drittel der Seitenbreite (8/12 = 66.6%). Spalten (B) und (C) teilen sich den Rest (2/12 = 16.6%). Alle zusammen benötigen die gesamte Seitenbreite und haben nebeneinander Platz (66.6% + 16.6% + 16.6% = 100%).
Medium: Spalte (A) braucht die Hälfte der Seitenbreite (6/12 = 50%). D.h. daneben haben noch mehr Spalten Platz. Spalten (B) und (C) sollen kleiner sein als die Spalte (A), sie erhalten daher den restlichen Platz auf sich aufgeteilt (2* 3/12 = 2 * 25% = 50%). Alle drei Spalten zusammen benötigen die komplette Seitenbreite (50% + 50% = 100%).
Gross (Large): Spalte (A) braucht zwei Drittel der Seitenbreite (8/12 = 66.6%). Spalten (B) und (C) teilen sich den Rest (2/12 = 16.6%). Alle zusammen benötigen die gesamte Seitenbreite und haben nebeneinander Platz (66.6% + 16.6% + 16.6% = 100%).
Schritt 3: Inhalte hinzufügen
- Gehen Sie zurück zur Seite.
- Sie sehen nun die eingefügten Spalten. Klicken Sie auf einen Balken mit +, um ein neues Inhalts-Element hinzuzufügen (z.B. Text).
- Füllen Sie die Spalten nach Belieben.
Schritt 4: Ergebnis überprüfen
- Gehen Sie Zurück zur Ansicht.
- Prüfen Sie die Darstellung auf verschiedenen Bildschirmgrössen. Sie können auch die Seitenbreite Ihres Browser-Fensters schmaler bzw. breiter machen, um die Auswirkungen direkt sehen zu können.
Ansicht grosse Bildschirme: Überschrift und Aufzählung sind nebeneinander kombiniert mit einer Bildergalerie (Akkordeon Karussell).Ansicht schmale Bildschirme: Überschrift und Aufzählung sind untereinander kombiniert mit einer Bildergalerie (Akkordeon Karussell).Möchten Sie es austesten?
In unseren Einsatzszenarien können Sie die vier vorgestellten Varianten ansehen und das Verhalten ausprobieren.