Die Standard-Themes in Liferay geben einen guten Einblick, welche Möglichkeiten ein Responsive Design für die Nutzung auf mobilen Endgeräten bietet. Aufbauend darauf kann man bereits mit wenig CSS und etwas Kreativität wirkungsvoll eigene Designs umsetzen. Doch in der Praxis zeigt sich häufig sehr schnell, dass der Anspruch an ein Corporate Design mehr als bloße Änderungen der Farbgebung umfasst. Und genau an dieser Stelle kann Liferay Punkten: Denn Möglichkeiten für das Aufbauen von Strukturen ist durch die Portalsoftware in vielerlei Hinsicht gegeben.
Um zu veranschaulichen was man bei einer Themeentwicklung für mobile Endgeräte beachten sollte, wird der folgende Artikel die einzelnen Aspekte im Layout und Designprozess beleuchten – die Bilder zeigen hierbei unser Communardo-Liferay-Theme aus einem Demo-Showcase.
Warum „Responsive“?
Mit einem eigenen Theme soll der Inhalt der Webseite benutzerfreundlich abgebildet werden. Je komplexer aber die Struktur der Informationen ist, desto wichtiger ist es den Aufbau übersichtlich zu gestalten. Die Aufgabe muss sein, einen schnellen Zugang zu den gewünschten Inhalten auf den verschiedenen Gerätegrößen zur Zufriedenheit zu gewährleisten und Frustmomente zu verhindern.
Da man selten unter Kontrolle hat mit welchen Endgeräten sich ein Nutzer die Website ansieht und die Entwicklung von mobilen Apps oft eine aufwändige Angelegenheit ist, bietet sich ein Responsive Webdesign an.
Um einen Eindruck davon zu bekommen, zeigt unser Beispiel im Portal eine Hauptnavigation, welche über ein Dashboard die verschiedenen Unterseiten der Bereiche zeigt. Die Unterseiten werden im Bereich links untereinander dargestellt.
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 angepasst wird, sind diese nicht automatisch „Responsive“ – hier muss die nutzerfreundlichen Darstellung für andere Bildschirmgrößen in der Entwicklung berücksichtigt werden. Ebenso sind nicht zwingend alle Portlets auf einem mobilen Gerät zu gebrauchen und sollten daher angepasst werden.
1 Priorisierung der Informationen
Zunächst stellt sich die Frage, welche Informationen die Wichtigsten sind – im Kontext einer mobilen Entwicklung bedeutet das: Welche Elemente der Seite müssen auch bei einer reduzierten Darstellung zwingend sichtbar sein und welche können verdeckt bzw. in tieferen Menüstrukturen untergebracht werden.
Hier kann man bei den Navigationspunkten anfangen und überlegen, was dem Nutzer beim mobilen Arbeiten/Lesen tatsächlich hilft. In diesem Zuge kommt dann z.B. die Frage auf, ob die Bearbeitung der Seite auf einen kleinen Bildschirm überhaupt notwendig ist und somit vielleicht eher nicht primär zusehen sein sollte. Oder in welcher Reihenfolge Portlets angezeigt werden sollen: Die Anwendungsszenarien mobiler Anwender haben oft einen anderen Fokus. Konkret bedeutet das, aktuelle Informationen zur Ressourcenauslastung oder dem Projektstatus gehen vielleicht über das Umplanung von Ressourcen oder das Verfassen von langen Meetingprotokollen. Diese Aufgaben wird der Nutzer vielleicht lieber im Büro am Desktop-PC oder am Abend mit dem Netbook erledigen. An dieser Stelle kommt dann die Stärke des Konzeptes zum Tragen: Der Nutzer hat unterschiedliche Endgeräte, mit denen er teilweise unterschiedliche Aufgaben erledigt, die Informationen und Aktionen bietet ein Portal.
2 Breakpoints richtig setzen
Nachdem geklärt ist, welche Information angezeigt werden sollen ist nun das Wie entscheidend – und damit wären wir beim Layout. Liferay bietet hier bereits vorgefertigte Spaltenlayouts, alternativ kann man sich unabhängig davon ein eigenes Schema für die Anordnung der Elemente überlegen. Wichtig für die Mobilität ist jedoch eine andere Frage:
Ist es sinnvoll ein Layout mit 2 Spalten auf einem mobilen Gerät aufrechtzuerhalten oder wäre es besser, diese untereinander anzuordnen?
Sogenannte „Breakpoints“ oder im Deutschen „Bruchstellen“, definieren bei welchen Bildschirmgrößen bestimmte Änderungen im Layout angestoßen werden. Die Breakpoints sollten zum Beispiel angepasst werden, wenn im Theme eine eigene linke Navigation existiert, welche horizontal platziert ist und den Platz weiter reduziert.
3 Simplify your Interface
Hat man nun die wichtigen Informationen und auch das Layout festgelegt, bleibt in der Regel nur die Umsetzung… oder …?
Jein, denn im Prinzip hängt dies vom grafischen Design ab. Auch bei angepasstem Layout und der Wegnahme von Informationen kann es optisch wenig gefällig wirken, wenn die Anwendung nur wie eine verkleinerte Version des Desktops aussieht. Man sollte auch berücksichtigen, dass die meisten Nutzer von mobilen Apps inzwischen gewisse Symbole gewöhnt sind, wie z.B. die drei waagerechten Striche für ein Einstellungs-Menü.
Sollen die Strukturen und deren Elemente bestehen bleiben oder lieber ersetzt werden?
Es gibt immer eine Vielzahl an Optionen, um eine Struktur für andere Bildschirmgrößen letztendlich darzustellen. So kann zum Beispiel bei einfachen Navigationsstrukturen die Schrift durch Grafiken ersetzt werden oder aber die Position sowie Form komplett geändert werden. Jede Option hat natürlich ihre Vor- und Nachteile. Prinzipiell sollte man „sprechende“ Grafiken nehmen oder Symbole, die bereits bekannt sind (wie z.B. das oben genannte Menü). Im Übrigen kann man dies auch durchaus bei der Gestaltung von Desktop-Designs anwenden – frei nach dem Motto „weniger ist mehr“.
Fazit
Die Gestaltung eines Responsive Interfaces ist mehr als nur die Umsetzung eines mobilen CI/CD. Liferay Portal bietet an dieser Stelle durch den modulartigen Aufbau und einem guten CSS-Fundament, eine perfekte Ausgangsposition für die erfolgreiche Umsetzung jeglicher Designs.
