Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
0800 1 255 255

Responsive Design in Liferay 6.2 - Gestaltung eigener Themes für verschiedene Gerätegrößen

Die Standard-Themes in Liferay geben einen guten Einblick, wel­che Möglichkeiten ein Responsive Design für die Nutzung auf mobi­len Endgeräten bie­tet. Aufbauend dar­auf kann man bereits mit wenig CSS und etwas Kreativität wir­kungs­voll eigene Designs umset­zen. Doch in der Praxis zeigt sich häu­fig sehr schnell, dass der Anspruch an ein Corporate Design mehr als bloße Änderungen der Farbgebung umfasst. Und genau an die­ser Stelle kann Liferay Punkten: Denn Möglichkeiten für das Aufbauen von Strukturen ist durch die Portalsoftware in vie­ler­lei Hinsicht gegeben.

Um zu ver­an­schau­li­chen was man bei einer Themeentwicklung für mobile Endgeräte beach­ten sollte, wird der fol­gende Artikel die ein­zel­nen Aspekte im Layout und Designprozess beleuch­ten – die Bilder zei­gen hier­bei unser Communardo-Liferay-Theme aus einem Demo-Showcase.

Warum „Responsive“?

Mit einem eige­nen Theme soll der Inhalt der Webseite benut­zer­freund­lich abge­bil­det wer­den. Je kom­ple­xer aber die Struktur der Informationen ist, desto wich­ti­ger ist es den Aufbau über­sicht­lich zu gestal­ten. Die Aufgabe muss sein, einen schnel­len Zugang zu den gewünsch­ten Inhalten auf den ver­schie­de­nen Gerätegrößen zur Zufriedenheit zu gewähr­leis­ten und Frustmomente zu verhindern.

Da man sel­ten unter Kontrolle hat mit wel­chen Endgeräten sich ein Nutzer die Website ansieht und die Entwicklung von mobi­len Apps oft eine auf­wän­dige Angelegenheit ist, bie­tet sich ein Responsive Webdesign an.

Um einen Eindruck davon zu bekom­men, zeigt unser Beispiel im Portal eine Hauptnavigation, wel­che über ein Dashboard die ver­schie­de­nen Unterseiten der Bereiche zeigt. Die Unterseiten wer­den im Bereich links unter­ein­an­der dargestellt.

Desktop-Ansicht der Communardo Liferay Anwendung
Desktop-Ansicht

 

Mobile Ansicht der Communardo Liferay Anwendung
Mobile Ansicht

 

Was ist bei einer Anpassung auf einem mobilen Gerät zu beachten?

Liferay selbst bringt schon durch das Standard-Theme und das Framework Alloy UI Werkzeuge zur Seitengestaltung mit. Wenn jedoch das Portal durch eigene Navigationen und Strukturen ange­passt wird, sind diese nicht auto­ma­tisch „Responsive“ – hier muss die nut­zer­freund­li­chen Darstellung für andere Bildschirmgrößen in der Entwicklung berück­sich­tigt wer­den. Ebenso sind nicht zwin­gend alle Portlets auf einem mobi­len Gerät zu gebrau­chen und soll­ten daher ange­passt werden.

1 Priorisierung der Informationen

Zunächst stellt sich die Frage, wel­che Informationen die Wichtigsten sind – im Kontext einer mobi­len Entwicklung bedeu­tet das: Welche Elemente der Seite müs­sen auch bei einer redu­zier­ten Darstellung zwin­gend sicht­bar sein und wel­che kön­nen ver­deckt bzw. in tie­fe­ren Menüstrukturen unter­ge­bracht werden.

Hier kann man bei den Navigationspunkten anfan­gen und über­le­gen, was dem Nutzer beim mobi­len Arbeiten/Lesen tat­säch­lich hilft. In die­sem Zuge kommt dann z.B. die Frage auf, ob die Bearbeitung der Seite auf einen klei­nen Bildschirm über­haupt not­wen­dig ist und somit viel­leicht eher nicht pri­mär zuse­hen sein sollte. Oder in wel­cher Reihenfolge Portlets ange­zeigt wer­den sol­len: Die Anwendungsszenarien mobi­ler Anwender haben oft einen ande­ren Fokus. Konkret bedeu­tet das, aktu­elle Informationen zur Ressourcenauslastung oder dem Projektstatus gehen viel­leicht über das Umplanung von Ressourcen oder das Verfassen von lan­gen Meetingprotokollen. Diese Aufgaben wird der Nutzer viel­leicht lie­ber im Büro am Desktop-PC oder am Abend mit dem Netbook erle­di­gen. An die­ser Stelle kommt dann die Stärke des Konzeptes zum Tragen: Der Nutzer hat unter­schied­li­che Endgeräte, mit denen er teil­weise unter­schied­li­che Aufgaben erle­digt, die Informationen und Aktionen bie­tet ein Portal.

2 Breakpoints richtig setzen

Nachdem geklärt ist, wel­che Information ange­zeigt wer­den sol­len ist nun das Wie ent­schei­dend – und damit wären wir beim Layout. Liferay bie­tet hier bereits vor­ge­fer­tigte Spaltenlayouts, alter­na­tiv kann man sich unab­hän­gig davon ein eige­nes Schema für die Anordnung der Elemente über­le­gen. Wichtig für die Mobilität ist jedoch eine andere Frage:

Ist es sinn­voll ein Layout mit 2 Spalten auf einem mobi­len Gerät auf­recht­zu­er­hal­ten oder wäre es bes­ser, diese unter­ein­an­der anzuordnen?

Sogenannte „Breakpoints“ oder im Deutschen „Bruchstellen“, defi­nie­ren bei wel­chen Bildschirmgrößen bestimmte Änderungen im Layout ange­sto­ßen wer­den. Die Breakpoints soll­ten zum Beispiel ange­passt wer­den, wenn im Theme eine eigene linke Navigation exis­tiert, wel­che hori­zon­tal plat­ziert ist und den Platz wei­ter reduziert.

3 Simplify your Interface

Hat man nun die wich­ti­gen Informationen und auch das Layout fest­ge­legt, bleibt in der Regel nur die Umsetzung… oder …?

Jein, denn im Prinzip hängt dies vom gra­fi­schen Design ab. Auch bei ange­pass­tem Layout und der Wegnahme von Informationen kann es optisch wenig gefäl­lig wir­ken, wenn die Anwendung nur wie eine ver­klei­nerte Version des Desktops aus­sieht. Man sollte auch berück­sich­ti­gen, dass die meis­ten Nutzer von mobi­len Apps inzwi­schen gewisse Symbole gewöhnt sind, wie z.B. die drei waa­ge­rech­ten Striche für ein Einstellungs-Menü.

Menü der mobilen Ansicht
Menü der mobi­len Ansicht

Sollen die Strukturen und deren Elemente bestehen blei­ben oder lie­ber ersetzt werden?

Es gibt immer eine Vielzahl an Optionen, um eine Struktur für andere Bildschirmgrößen letzt­end­lich dar­zu­stel­len. So kann zum Beispiel bei ein­fa­chen Navigationsstrukturen die Schrift durch Grafiken ersetzt wer­den oder aber die Position sowie Form kom­plett geän­dert wer­den. Jede Option hat natür­lich ihre Vor- und Nachteile. Prinzipiell sollte man „spre­chende“ Grafiken neh­men oder Symbole, die bereits bekannt sind (wie z.B. das oben genannte Menü). Im Übrigen kann man dies auch durch­aus bei der Gestaltung von Desktop-Designs anwen­den – frei nach dem Motto „weni­ger ist mehr“.

Fazit

Die Gestaltung eines Responsive Interfaces ist mehr als nur die Umsetzung eines mobi­len CI/CD. Liferay Portal bie­tet an die­ser Stelle durch den modu­l­ar­ti­gen Aufbau und einem guten CSS-Fundament, eine per­fekte Ausgangsposition für die erfolg­rei­che Umsetzung jeg­li­cher Designs.

28. Juli 2014

Pin It on Pinterest