© Excellent backgrounds/Shutterstock.com
Java Magazin
Responsive Design mit Liferay

Make it flow!

Zusätzlich zu den Kernfunktionalitäten eines Portals ist eine der Stärken von Liferay ein ausgereiftes Content-Management-System (CMS). Ergonomische Erreichbarkeit des Inhalts, als „Responsive Design“ bekannt, spielt auch bei Enterprise-Portalen generell eine immer wichtigere Rolle. Viele Unternehmen gestalten deshalb ihre Webauftritte komplett neu, um diese Anforderungen erfüllen zu können. Dabei lässt sich das aktuelle Design oft mit einigen wenigen Tricks fit für diese neue Herausforderung machen. Welche Möglichkeiten bietet Liferay hierfür? Wie sieht ein Responsive Design aus? Dieser Beitrag befasst sich mit Responsive-Design-Konzepten in Liferay Themes und konzentriert sich bewusst auf die Methoden, die Liferay selbst anbietet und die sich besonders einfach in bereits existierende Themes und Layouts einbauen lassen.

Michail Mazo


Es gibt verschiedene Wege, ein Liferay Theme „responsive“ zu realisieren. Man kann das ganze Theme mithilfe eines der bekannten Frameworks wie Twitter Bootstrap gestalten [1]. Ein solches Theme findet sich beispielsweise im Liferay Marketplace [2], und seit Liferay 6.2 ist das Default Theme bereits mit Bootstrap gebaut [3]. Dies ist sehr hilfreich, wenn man ein neues Theme entwickelt, das Default Theme einfach als Ausgangspunkt für das eigene Theme verwendet und damit gleich von Anfang an „responsive“ ist. Alternativ kann man direkt CSS Media Queries verwenden. Weitere Varianten findet man z. B. auf der Liferay-Themes-Ressourcen-Seite [4].

Responsive und adaptives Design

Aber was genau bedeutet Responsive Design? Hier werden oft zwei Designansätze verwechselt und sogar vermischt. Man unterscheidet zwischen reaktionsfähigen (responsiven) und anpassungsfähigen (adaptiven) Design­konzepten. Reaktionsfähige Seiten passen den Inhalt an die Bildschirmgröße stufenlos, also „fließend“, an. Anpassungsfähige Seiten definieren dagegen fixe Stufen in Bildschirmdimensionen und liefern entsprechende Layouts dieser Stufe. Christoph Zillgens definiert in seinem Buch „Responsive Webdesign“ [5] eine enge Verwandtschaft zwischen beiden Designmethoden: „Responsive Layouts sind demnach eine spezielle Form anpassungsfähiger Layouts, sozusagen eine weiterentwickelte Untergruppe“ (Seite 14).

Typisches Beispiel für ein Responsive Design

Allgemein gilt: Bei jeder Bildschirmgröße soll der Inhalt gut lesbar und bedienbar sein. Was bedeutet das konkret für die typischen Bereiche einer Seite, wie Header, Navigation, Inhalt und Footer? Der Header muss in der Breite und Höhe skaliert werden. Das Headerbild (Banner) muss entsprechend verkleinert werden. Man kann das Bannerbild skalieren, abschneiden oder durch andere Bilder ersetzen.

Die Navigation ist wohl das wichtigste Element der Webseite. Die Vielzahl der Möglichkeiten und die unterschiedlichen Anforderungen und Implementierungen macht alles etwas komplizierter. Insbesondere die beliebte Mouse-over-Bedienung ist problematisch. Eine Navigation mit Mouse-over-Event lässt sich auf Touchgeräten nur sehr schwer bedienen. Nach Möglichkeit sollte man darauf verzichten bzw. diese durch Klickbedienung ergänzen. Bei der Umsetzung einer responsiven Navigation haben sich verschiedene Optionen etabliert. Die wohl am meisten verbreitete Variante ist ein Toggle-Menü, bei dem die Navigationselemente unter einen Toggle-Button versteckt sind [6]. Eine ...

Java Magazin
Responsive Design mit Liferay

Make it flow!

Zusätzlich zu den Kernfunktionalitäten eines Portals ist eine der Stärken von Liferay ein ausgereiftes Content-Management-System (CMS). Ergonomische Erreichbarkeit des Inhalts, als „Responsive Design“ bekannt, spielt auch bei Enterprise-Portalen generell eine immer wichtigere Rolle. Viele Unternehmen gestalten deshalb ihre Webauftritte komplett neu, um diese Anforderungen erfüllen zu können. Dabei lässt sich das aktuelle Design oft mit einigen wenigen Tricks fit für diese neue Herausforderung machen. Welche Möglichkeiten bietet Liferay hierfür? Wie sieht ein Responsive Design aus? Dieser Beitrag befasst sich mit Responsive-Design-Konzepten in Liferay Themes und konzentriert sich bewusst auf die Methoden, die Liferay selbst anbietet und die sich besonders einfach in bereits existierende Themes und Layouts einbauen lassen.

Michail Mazo


Es gibt verschiedene Wege, ein Liferay Theme „responsive“ zu realisieren. Man kann das ganze Theme mithilfe eines der bekannten Frameworks wie Twitter Bootstrap gestalten [1]. Ein solches Theme findet sich beispielsweise im Liferay Marketplace [2], und seit Liferay 6.2 ist das Default Theme bereits mit Bootstrap gebaut [3]. Dies ist sehr hilfreich, wenn man ein neues Theme entwickelt, das Default Theme einfach als Ausgangspunkt für das eigene Theme verwendet und damit gleich von Anfang an „responsive“ ist. Alternativ kann man direkt CSS Media Queries verwenden. Weitere Varianten findet man z. B. auf der Liferay-Themes-Ressourcen-Seite [4].

Responsive und adaptives Design

Aber was genau bedeutet Responsive Design? Hier werden oft zwei Designansätze verwechselt und sogar vermischt. Man unterscheidet zwischen reaktionsfähigen (responsiven) und anpassungsfähigen (adaptiven) Design­konzepten. Reaktionsfähige Seiten passen den Inhalt an die Bildschirmgröße stufenlos, also „fließend“, an. Anpassungsfähige Seiten definieren dagegen fixe Stufen in Bildschirmdimensionen und liefern entsprechende Layouts dieser Stufe. Christoph Zillgens definiert in seinem Buch „Responsive Webdesign“ [5] eine enge Verwandtschaft zwischen beiden Designmethoden: „Responsive Layouts sind demnach eine spezielle Form anpassungsfähiger Layouts, sozusagen eine weiterentwickelte Untergruppe“ (Seite 14).

Typisches Beispiel für ein Responsive Design

Allgemein gilt: Bei jeder Bildschirmgröße soll der Inhalt gut lesbar und bedienbar sein. Was bedeutet das konkret für die typischen Bereiche einer Seite, wie Header, Navigation, Inhalt und Footer? Der Header muss in der Breite und Höhe skaliert werden. Das Headerbild (Banner) muss entsprechend verkleinert werden. Man kann das Bannerbild skalieren, abschneiden oder durch andere Bilder ersetzen.

Die Navigation ist wohl das wichtigste Element der Webseite. Die Vielzahl der Möglichkeiten und die unterschiedlichen Anforderungen und Implementierungen macht alles etwas komplizierter. Insbesondere die beliebte Mouse-over-Bedienung ist problematisch. Eine Navigation mit Mouse-over-Event lässt sich auf Touchgeräten nur sehr schwer bedienen. Nach Möglichkeit sollte man darauf verzichten bzw. diese durch Klickbedienung ergänzen. Bei der Umsetzung einer responsiven Navigation haben sich verschiedene Optionen etabliert. Die wohl am meisten verbreitete Variante ist ein Toggle-Menü, bei dem die Navigationselemente unter einen Toggle-Button versteckt sind [6]. Eine ...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang