Im heutigen Artikel werden wir über das responsive oder reaktionsfähige Design der Dashboards sprechen. Responsives Design bezieht sich auf ein Layout, bei dem die Dashboard-Elemente je nach verwendetem Gerät ihre Position und ihr Aussehen ändern können. Anders gesagt, beim Ansehen des Dashboards auf einem mobilen Gerät können die Komponenten in einem anderen Layout, in einer anderen Größe oder möglicherweise sogar fehlen, im Vergleich zu ihrer Darstellung auf einem Computer, Laptop oder Projektor.
Warum responsives Design wichtig ist
Standardmäßig werden die Dashboards auf dem gesamten Ansichtsbereich skaliert, und ihre Elemente werden proportional angepasst. Dies funktioniert sowohl bei einer Vergrößerung als auch bei einer Verkleinerung der Bildschirmgröße. Ein auf einem Computer entworfenes Dashboard kann jedoch auf einem mobilen Gerät äußerst unpraktisch zu betrachten sein: die Elemente können zu klein und schwer lesbar werden, und Diagramme können zum Beispiel so stark komprimiert werden, dass sie unkenntlich sind. Dies verringert die Klarheit der Informationen und kann zu Fehlinterpretationen der Daten führen.
Deshalb ist der responsive (oder „mobile“) Modus erforderlich, da er sicherstellt, dass Dashboards auf verschiedenen Geräten benutzerfreundlich, klar und lesbar bleiben. Beachten Sie!
Reaktionsfähige Design wird nur funktioniert, wenn das Parameter Inhalt ausrichten (Content Alignment) auf Nach X strecken (Stretch X) oder Nach XY strecken (Stretch XY) eingestellt ist. Bei solchen Werten wir Zentrum (Center), Links (Left) oder Rechts (Right) wird das responsive Design nicht übernommen werden, weil der Inhalt nicht skaliert und in fixierter Größe genauso wie im Design-Modus angezeigt wird.
Deshalb ist der responsive (oder „mobile“) Modus erforderlich, da er sicherstellt, dass Dashboards auf verschiedenen Geräten benutzerfreundlich, klar und lesbar bleiben. Beachten Sie!
Reaktionsfähige Design wird nur funktioniert, wenn das Parameter Inhalt ausrichten (Content Alignment) auf Nach X strecken (Stretch X) oder Nach XY strecken (Stretch XY) eingestellt ist. Bei solchen Werten wir Zentrum (Center), Links (Left) oder Rechts (Right) wird das responsive Design nicht übernommen werden, weil der Inhalt nicht skaliert und in fixierter Größe genauso wie im Design-Modus angezeigt wird.
Wie kann man die mobile Version eines Dashboards hinzufügen
- Öffnen Sie ein existeirtes Dashboard oder erstellen Sie ein neues im Berichtsdesigner.
- Gehen Sie zur Registerkarte „Seite“ und aktivieren Sie den mobilen Modus, indem Sie auf die entsprechende Schaltfläche klicken.
- Die mobile Version des Dashboards wird angezeigt, und im Komponentenmenü sehen Sie alle Elemente aus der Desktop-Version.
Bevor Sie die mobile Version konfigurieren, ist es wichtig zu verstehen, was man ändern kann und was nicht:
Man kann:
- Die Größe des mobilen Dashboards ändern;
- Nur die erforderlichen Komponenten hinzufügen;
- Die Größe und Reihenfolge der Elemente anpassen;
- Die Titel der Elemente ein- oder ausblenden.
Man kann nicht:
- Die Einstellungen des Elementes ändern (z.B., Datenfeld- oder Vsiualisierungstyp), weil diese Änderungen auch die Desktop-Version beeinträchtigen können;
- Den Stil des Elementes ändern, weil die Stile zu allen Versionen angewandt werden.
Die Erstellung einer mobilen Version beinhaltet das Ziehen der erforderlichen Komponenten auf das mobile Dashboard, das Anpassen ihrer Größen und die Organisation ihres Layouts.
Wie funktioniert die Responsivität?
Nach dee Einstellung und dem Speichern der mobilen Version stellt sich oft die Frage: Wann wird sie tatsächlich angezeigt?Die Antwort ist einfach: Dies wird durch die Eigenschaft Gerätebreite (Device width) gesteuert, die nur im mobilen Modus verfügbar ist.
- Wenn die Bildschirmbreite kleiner oder gleich dem angegebenen Wert ist, wird die mobile Version angezeigt.
- Wenn die Bildschirmbreite größer ist, wird stattdessen die Desktop-Version angezeigt.
Der Wert der Gerätebreite wird in Pixeln festgelegt. Dadurch können Sie die Anzeige des Dashboards für bestimmte Gerätetypen wie Smartphones oder Tablets anpassen.
Mehrere mobile Versionen eines Dashboards
Manchmal müssen Sie verschiedene mobile Versionen erstellen, eine für ein Telefon und eine andere für ein Tablet.
Da ein einzelnes Dashboard nur eine mobile und eine Desktop-Version haben kann, ist die beste Lösung, mehrere Dashboards innerhalb derselben Vorlage zu verwenden.
Beispiel:
Da ein einzelnes Dashboard nur eine mobile und eine Desktop-Version haben kann, ist die beste Lösung, mehrere Dashboards innerhalb derselben Vorlage zu verwenden.
Beispiel:
- Sie haben ein Dashboard mit einer mobilen Version, die für Telefone optimiert ist, wobei die Gerätebreite auf 520 Pixel eingestellt ist.
- Erstellen Sie eine Kopie dieses Dashboards, indem Sie den Befehl Duplikat (Duplicate) aus dem Kontextmenü im Dashboard-Header im Berichtsdesigner verwenden.
- Stellen Sie in der Kopie die Gerätebreite für die mobile Version auf 800 Pixel ein. Passen Sie bei Bedarf das Layout und die Komponentenliste an.
Jetzt enthält die Vorlage zwei Dashboards, und jedes Dashboard hat seine eigene mobile Version. Im Viewer werden sie als separate Registerkarten angezeigt, und der Benutzer kann je nach Gerät die entsprechende auswählen.
Das ist im Wesentlichen alles, was Sie über responsives Dashboard-Design wissen müssen. Responsives Design macht Dashboards auf allen Geräten wirklich vielseitig und benutzerfreundlich. Es trägt dazu bei, die Lesbarkeit und Klarheit der Informationen zu bewahren, unabhängig von der Bildschirmgröße.
Für eine visuellere Erklärung, wie man responsives Dashboards erstellt, haben wir mehrere thematisierte Videos vorbereitet.