Responsive Webdesign mit Weblication® CMS

26.07.2012

Mit Hilfe von Responsive Webdesign stellen Sie über Weblication® dieselbe Web-Präsenz je nach Bildschirmauflösung des aufrufenden Endgerätes anders, auf die jeweilige Bildschirmbreite optimiert, dar.

Damit erhalten Sie mit einer Präsenz eine optimierte Darstellung für Smartphones, iPads, Tablets, Netbooks, Notebooks sowie hochauflösende Bildschirme. Weblication® Projekte ab Version 7 sind bereits für Responsive Webdesign vorbereitet. So sparen Agenturen bei der Umsetzung viel Zeit.

Der Artikel zeigt beispielhaft die Darstellung in verschiedenen Bildschirmauflösungen.

So stellen Sie Responsive Webdesign ein

Klicken Sie im Adminpanel auf Projektkonfiguration und scrollen Sie in der Maske bis zum Punkt Responsive Webdesign. Durch die Einstellung "Ja" aktivieren Sie das bereits im Standard implementierte Responsive Webdesign.

Über CSS legen Sie danach die für die jeweiligen Breiten spezifischen Designs fest.

Responsiv Webdesign in Konfiguration aktivieren
Responsiv Webdesign in Konfiguration aktivieren

Beispiel Darstellung mit 3 Bildschirmauflösungen im direkten Vergleich

Dieselbe Web-Präsenz wird je nach Bildschirmauflösung des aufrufenden Endgerätes anders, auf die jeweilige Bildschirmbreite optimiert, dargestellt.

Beispiel Responsiv Webdesign: 3 Auflösungen im direkten Vergleich
Beispiel Responsiv Webdesign: 3 Auflösungen im direkten Vergleich

Beispiel Darstellung große Bildschirmauflösung

Bei großer Auflösung werden in der linken Spalte die Unternavigation und in der rechten Spalte weitere Informationen dargestellt.

Beispiel Responsiv Webdesign: Große Auflösung
Beispiel Responsiv Webdesign: Große Auflösung

Beispiel Darstellung mittlere Bildschirmauflösung

Bei mittlerer Auflösung bricht in diesem Beispiel die rechte Spalte an das Ende der Inhaltsseite um.

Beispiel Responsiv Webdesign: Große Auflösung
Beispiel Responsiv Webdesign: Große Auflösung

Beispiel Darstellung kleine Bildschirmauflösung

Bei kleiner Auflösung wird in diesem Beispiel die Unternavigation statt in einer linken Spalte unterhalb der Hauptnavigation dargestellt. Weiterin wird die Metanavigation über der Haupnavigation positioniert.

Die Darstellung der jeweiligen Stufen von Bildschirmauflösungen läßt sich über CSS selbstverständlich beliebig beeinflussen.

Beispiel Responsiv Webdesign: Große Auflösung
Beispiel Responsiv Webdesign: Große Auflösung