Responsives Design
Das Design des LINKEN CMS ist responsiv: Websites im LINKEN CMS werden je nach Ausgabegerät unterschiedlich angezeigt. Mit Ausgabegerät sind Smartphones, Tablets, Laptops oder Notebooks und Desktop Computer gemeint: vom Smartphone zum Desktop Computer werden die Viewports — die Bildschirme — immer größer. Auf einem Smartphone ist deutlich weniger Platz als auf dem großen Monitor eines Desktop Computers. Es ist unmöglich für jede denkbare Bildschirmgröße zu optimieren, denn jede Gerätekategorie ist selbst nur ein Sammelbegriff. Es gibt unzählige Smartphones, Tablets, Laptops mit noch mehr verschiedenen Bildschirmgrößen- und Auflösungsvarianten.
Viewports
Im Webdesign und Layout wird deshalb abstrahiert und auf eine überschaubare Anzahl von Viewports reduziert. Das Frontend des LINKEN CMS basiert auf dem Frontend Toolkit Bootstrap 5, das sechs verschiedene Viewports definiert:
| Viewportname | Viewport- bzw. Bildschirmbreite |
|---|---|
| Smartphone (Extra Small) | < 576px |
| Kleines Tablet (Small) | ≥ 576px |
| Tablet (Medium) | ≥ 768px |
| Desktop (Large) | ≥ 992px |
| Desktop groß (Extra large) | ≥ 1200px |
| Desktop sehr groß (Extra extra large) | ≥ 1400px |
Abweichungen von diesen Viewportgrößen in der Realität sind nicht zu vermeiden. Tablets lassen sich z.B. vom Portrait- in das Querformat drehen. Selbst ein iPad-Mini ist in Bezug auf die Auflösung im Querformat mit 1024px schon im Bereich Desktop.
Welche Auswirkungen haben die Viewportgrößen?
Abweichungen in der Anzeige von Elementen auf unterschiedlichen Viewports treten an vielen verschiedenen Stellen auf. Darauf gehen wir in den Abschnitten der Dokumentation ein, die diesen Elementen gewidmet sind. Nachfolgend deshalb nur zwei Beispiele.
Seitenlayouts
Im LINKEN CMS stehen zwei Seitenlayouts zu Verfügung. Auf Viewports ≥ 768px werden Haupt- und Randspalte des Zweispaltigen Layouts nebeneinander angezeigt:
| Hauptspalte | Randspalte |
Auf kleinen Viewports, z.B. Smartphones, steht sehr wenig Bildschirmfläche zur Verfügung. Dort wäre es nicht sinnvoll, beide Spalten nebeneinander auszugeben. Die Inhalte der Randspalte rutschen deshalb unter die Hauptspalte:
| Hauptspalte |
| Randspalte |
Inhaltselemente des Typs „Karte horizontal“
In diesem Inhaltselement können Text und ein Bild nebeinander ausgegeben werden. Auf einem Smartphonebildschirm steht so wenig Platz zur Verfügung, dass Bild und Text nebeneinander nicht gut aussehen: das Bild wird sehr klein, die Spalte für den Text sehr schmal. Auf Viewports < 768px wird das Bild deshalb oberhalb des Textes ausgegeben.
Simulation von Ausgabegeräten
Möchten Sie testen, wie Ihre Seite auf unterschiedlich großen Bildschirmen aussieht, müssen Sie diese verschiedenen Geräte nicht zur Hand haben. Die meisten Browser unterstützen eine Vorschau für verschiedene Bildschirmgrößen bzw. Geräte. Dabei sind üblicherweise einige iPhone- , iPad- oder Samsung Galaxy Varianten vordefiniert.
Modul „Anzeigen“
Im Backend Ihres LINKEN CMS können Sie im Modul Anzeigen verschiedene Endgeräte simulieren.
Chrome
In macOS öffnet die Tastenkombination Cmd + Alt + I zunächst die Entwicklerwerkzeuge. Druck auf Cmd + Umschalt + M aktiviert dort die Simulation verschiedener Endgeräte.
Firefox
Die Tastenkombination Strg + Umschalt + M auf Windows-Systemen bzw. Cmd + Alt + M in macOS öffnet einen Modus, in dem Sie Ihre Seite für die Bildschirmgrößen verschiedener Endgeräte testen können.
Safari
In Safari müssen Sie zuerst das Menü Entwickler aktivieren. Öffnen Sie dazu die Safari-Einstellungen, rufen Sie den Reiter Erweitert auf und aktivieren Sie die Option Menü „Entwickler“ in der Menüleiste anzeigen. Jetzt können Sie mit der Tastenkombination Ctrl + Cmd + R auf macOS jederzeit den Modus Responsive Design aktivieren.