Responsive Webdesign mit Weblication CMS
07. Mai 2012
Um Ihre Webseite mit Hilfe von Responsive Webdesign für unterschiedliche Bildschirme einfach zu optimieren, haben wir in der aktuellen BASE bereits eine vorgefertigte Lösung integriert, die über die Projektkonfiguration aktiviert werden kann.
Neben einer bereits enthaltenen, speziell für Smartphones optimierten mobilen Version, enthält die BASE ab sofort auch Responsive Webdesign Funktionen, die dazu dienen, die Darstellung für unterschiedliche Bildschirmauflösungen zu optimieren.
Mit Hilfe sogenannter Media-Queries können Sie so exakt bestimmen, wie die Seite bei welcher Auflösung angezeigt werden soll. Nehmen wir beispielsweise ein iPad. Dort können Sie z.B. festlegen, dass die rechte Seiteleiste im Querformat rechts neben und im Hochformat unter dem Inhaltsbereich angezeigt wird.
Responsive Webdesign und mobile Vesion
Während die Mobile Version speziell für Smartphones optimiert ist und nur bei kleinen Auflösungen vorteilhaft ist, deckt eine über Responsive Webdesign optimierte Seite einen sehr weiten Bereich optimal ab.
Sie können also entweder die mobile Version mit der klassischen Version kombinieren oder aber zusätzlich noch eine Responsive Webdesign Variante anbieten. Der Aufwand für die Nutzung von Responsive Webdesign ist so gering, da dies ausschließlich über CSS-Media-Queries umgesetzt wird, dass es sich auf jeden Fall anbietet, diese Technik einzusetzen, falls es zwischen der mobilen Version und der klassischen Darstellung eine Lücke gibt. Ob dies der Fall ist, hängt vom Layout der jeweiligen Webseite ab.
Je nach Layout sind also folgende Kombinationen möglich:
- Nur klassische Darstellung
- Klassische Darstellung und mobile Version
- Klassische Darstellung und Responsive Webdesign
- Klassische Darstellung, Responsive Webdesign und mobile Version
Die Umsetzung in der BASE
Die in der BASE enthaltene Responsive Webdesign Umsetzung enthält die wichtigsten Grundfunktionen für die differenzierte Darstellung Ihrer Webseite. Alle Media-Queries, welch die CSS Regeln definieren werden in einer einzelnen CSS-Datei definiert. Diese kann auf Wunsch auch minimiert und zusammengefügt werden, um den Zugriff zu beschleunigen.
Unterhalb einer bestimmten Breite wird der rechte Bereich nach dem Inhaltsbereich angezeigt. Wird die Breite noch geringer, so schiebt sich die linke Navigation über den Inhalt und der Kopfbereich wird optimiert dargestellt.
Neben der eigentlichen Seitenstruktur werden Elemente, wie z.B. Bilder, dynamisch in der Größe angepasst. Ein Bild, das die ganze Spaltenbreite einnimmt, wird beim Skalieren ebenfalls verkleinert, ohne es nochmals nachzuladen.
Mehrspaltige Inhalts-Container werden ab einer definierten Mindestbreite automatisch untereinander dargestellt.
Die in der BASE bereits enthaltenen Voreinstellungen können Sie über den integrierten CSS-Editor beliebig anpassen. Die Datei finden Sie im CSS-Verzeichnis unter dem Namen responsive.css. Sie wird dann eingebunden, wenn Sie Responsive Webdesign in der Konfiguration aktiviert haben.