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:

Viewportnamen und zugehörige Bildschirmbreiten
ViewportnameViewport- 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:

Zweispaltiges Seitenlayout auf großen Viewports
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:

Zweispaltiges Seitenlayout auf kleinen Viewports
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.