ClaretPortal wird mobil (Teil 2) - Fokus: jQuery Mobile Grid & Collapsible Set
Im ersten Teil dieser Blog-Serie [1] bin ich auf die allgemeine Funktionsweise von Web-Applikationen und ClaretPortal mit Portlets eingegangen. Ich habe dabei aufgezeigt, wie die Informationen einzelner Portlets über jQuery Mobile mit ListViews übersichtlich mobil dargestellt werden können.
In diesem zweiten Teil der Blog-Serie möchte ich zeigen, dass auch die Darstellung einer komplexen Seite mit viel Informationen für ein mobiles Gerät übersichtlich aufbereitet werden kann.
jQuery Mobile UI-Elemente zur Strukturierung
jQuery Mobile bringt einige einfache UI-Elemente mit, mit denen eine Seite übersichtlich strukturiert werden kann. Besonders nützlich sind neben der ListView die Elemente Grid [2] und Collapsible Set [3].
Ein Grid stellt dabei eine vertikale Aufteilung der Seite da - man spricht von Spalten. Je nach Grid-Typ stehen zwei bis fünf Spalten zur Verfügung. Ein Grid wird demnach also dann verwendet, wenn Inhalt in gewisser Weise auf dem Screen angeordnet werden soll. jQuery Mobile übernimmt dabei die automatische Größenanpassung des Grids je nach Bildschirmgröße bzw. Hoch- oder Querformat des mobilen Geräts.
Das Collapsible Set stellt ein Akkordeon dar. Der Benutzer sieht bei einem Akkordeon also jeweils die Überschrift der Themen - bei Klick auf ein entsprechendes Thema werden die Details darunter aufgeklappt. Ein Collapsible Set ist also immer dann zu verwenden, wenn gewisse Themenblöcke auf der Seite präsent sein sollen ohne gleich alle Details zu zeigen. Es bietet zudem eine harmonischere Navigation als Links, da der Benutzer auch nach einem Klick auf das Akkordeon weiterhin auf der selben Seite und im gleichen Kontext bleibt.
Die Verwendung am Beispiel
In diesem Abschnitt möchte ich gerne zeigen, wie eine komplexe Portalseite mit den soeben beschriebenen UI-Elementen für ein mobiles Gerät optimiert werden kann. Das folgende Bild zeigt die Übersicht einer Studie in ClaretPortal auf dem Desktop:
Die für den Benutzer am wichtigsten Funktionalitäten sind der Zugriff auf alle Studiendetails, die im großen Bereich des Bildschirms dargestellt werden. Dabei sind die Kerninformationen sofort sichtbar, weitere Informationen kann der Benutzer über Akkordeons oder Tabs anwählen. Ebenfalls sehr wichtig sind die zu einer Studie vorhandenen Dokumente, welche nach Kategorien sortiert sind.
Die folgenden Bilder zeigen die mit jQuery Mobile erstellte Version auf einem Nexus 7.
Wie das obige Bild zeigt, sind auch in der mobilen Darstellung alle wichtigen Informationen zu sehen. Die Kerninformationen sind im Header und im - initial aufgeklappten - Akkorden "Details" zu sehen. Alle weiteren Informationen können über die weiteren Akkordeons aufgerufen werden.
Wie im folgenden Bild zu sehen ist, können auch die vorhandenen Dokumente schön und übersichtlich in Kategorien sortiert dargestellt werden. Das Icon an der Kategorie verdeutlicht dabei die Zuordnung, das Icon des Dateityps gibt dem Benutzer das Gefühl einer gewohnten Umgebung.
Da die meisten mobilen Geräte mittlerweile auch die Möglichkeit bieten, Office-Dokumente zu öffnen, muss der Benutzer in diesem Fall kaum mit Einbußen leben. Auch die von Unternehmen immer öfter genutzte App Good for Enterprise [4] unterstützt Office-Dokumente. In diesem Beispiel wird das Word-Dokument des Management Summary auf dem Nexus 7 angezeigt:
Wie funktioniert das?
Der obere Bereich der mobilen Darstellung enthält eine Überschrift und ein dreispaltiges Grid:
<h3 class="summary-study-title">${study.title}</h3>
<div class="ui-grid-b">
<div class="ui-block-a">
<strong>Brand</strong>
</div>
<div class="ui-block-b">
<strong>Indication</strong>
</div>
<div class="ui-block-c">
<strong>Molecule</strong>
</div>
</div>
Dabei gibt die Klasse ui-grid-b an, dass ein dreispaltiges Grid verwendet werden soll.
Die Akkordeons sind über ein Collapsible Set gelöst. Hier ein Auszug:
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-theme="b">
<h3>Details</h3>
<!-- Content of set -->
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Study Key Information</h3>
<!-- Content of set -->
</div>
</div>
Wichtige Elemente dabei sind:
- data-role="collapsible-set": Gibt an, dass ein Akkordeon-Container beginnt
- data-role="collapsible": Definiert ein einzelnes Akkordeon
- data-collapsed: Gibt an, welcher Akkordeon-Bereich zu Beginn geöffnet sein soll
- Das erste Element (h3) in einem Akkordeon definiert die Überschrift, der Inhalt folgt im Anschluss über normales HTML bzw. weitere UI-Elemente von jQuery Mobile
Ausblick
Im nächsten Teil werde ich auf die anderen Bereiche von ClaretPortal in diesem Anwendungsgebiet eingehen und zeigen, wie Pagination oder "Endless Scroll" auf mobilen Geräten gelöst werden kann.