Responsiv oder adaptiv - welches ist das optimale Design für meine Business-Intelligence-Applikation?

Bei der Ausgestaltung browserbasierter Business Intelligence Applikationen stehen verschiedene Methoden und Ansätze zur Wahl. Mit sogenannten Media Queries lassen sich die Vielzahl von Displaygrößen der einzelnen mobilen Endgeräte im Hoch- wie auch Querformat optimieren. In diesem Artikel werden die wesentlichen Merkmale von „responsiv“ und „adaptiv“ erläutert, die Vor- und Nachteile beschrieben und kleine Entscheidungshilfen gegeben.

Welches ist das optimale Design für meine Business Intelligence Applikation? Vor dieser Frage stehen derzeit sicherlich viele Business Intelligence Anbieter – schließlich haben bereits einige BI-Applikationen mit benutzerfreundlichen Oberflächen Standards gesetzt. Auch und gerade wenn bei der Umsetzung Agenturen bzw. externe Web-Entwickler zurate gezogen werden, sollte man sich im Vorfeld mit der technischen Realisierung und der Frage auseinander setzen, welche Möglichkeiten zur Verfügung stehen. Unabhängig ob die Umsetzung intern stattfindet oder extern beauftragt wird – nur wer sich im Vorfeld mit technischen Unterschieden und Feinheiten vertraut gemacht hat, kann seine Vorstellungen klar definieren. Neben allgemeinen Faktoren wie Aufwand, Zeit und Kosten ist beispielsweise ein wichtiges Differenzierungsmerkmal, ob es sich um „responsives“ oder „adaptives“ Design handelt. Diese Festlegung kann für die Weiterentwicklung der Webseite bzw. Applikation weitreichende Konsequenzen haben.

Das responsive Design dient der flexiblen (fluid) Gestaltung von Web-Applikationen, wobei der zur Verfügung stehende Platz der vorliegenden Displaygröße immer optimal ausgenutzt wird. Beim adaptiven Design wird eine starre (fixed) Gestaltung für die verschiedenen Bildschirmgrößen verwendet. Über sogenannte Media Queries wird bei beiden Designs die Zuordnung eines Stylesheets zu einem Medium abgefragt.

Was ist unter den Begriffen „responsiv“ und „adaptiv“ zu verstehen? In Bezug auf die Entwicklung von Web-Applikationen geht es dabei um die Umsetzung von variablen Benutzeroberflächen für unterschiedliche Endgeräte:

Responsives Design = flexibles Layout + flexible Inhalte + Media Queries
Adaptives Design = starres Layout + fixe Inhalte + Media Queries

Das responsive Design orientiert sich vorzugsweise an der perfekten Informationsaufbereitung der Web-Applikation und den zu 100% flexiblen Layouts, weniger an den Abmessungen von unterschiedlichen Endgeräten bzw. Bildschirmgrößen. Sobald die grafische Oberfläche einen Umbruch verlangt, damit die Informationen bestmöglich für den Benutzer dargestellt werden können, verändert sich beispielsweise die Navigationsleiste und wird als Drop Down-Menü dargestellt. Da sowohl Inhalt als auch Layout für das World Wide Web komplett flexibel gestaltet sein müssen, gestaltet sich die technische Realisierung beim responsiven Design deutlich anspruchsvoller als beim adaptiven Design. Dabei sind nicht lange Texte das Problem, sondern vielmehr Bilder, Videos, Navigation und auch Tabellen, die in der Lage sein müssen, unterschiedliche Größen der Formate zu bewältigen. Vorteile: Die aufbereiteten Informationen werden auf jedem Gerät optimal abgebildet, der zu übermittelnde Inhalt steht immer im Vordergrund und wenn neue Bildschirmgrößen auf den Markt kommen, werden diese bereits berücksichtigt. Als Nachteile sind die zeitliche Umsetzung, der enorme Aufwand für die komplexe Gestaltung, die Anpassung und Darstellung der unterschiedlichen Inhalte und Elemente zu erwähnen. Damit sich die dynamischen Verhaltensweisen der Inhalte besser verstehen, analysieren und optimieren lassen, wird in solchen Projekten oft mit Prototypen gearbeitet.

Beim adaptiven Design werden hingegen definierte Bildschirmauflösungen (Formate) für die verschiedenen Applikationstypen entwickelt, also z.B. eine Auflösung für PCs, eine für Tablets und eine für Smartphones. Diese festgelegten Formate orientieren sich entweder an aktuell gängigen Standardgrößen oder aber auch an bestimmten Geräten wie dem beliebten Smartphone-Klassiker von Apple. Bei den vordefinierten Formaten ist eine gewisse Umsicht gefragt, damit der auf Geräten vorhandene Platz auch ausgenutzt und die passende Benutzeroberfläche für das Endgerät via Media Queries geladen wird. Die Vorteile des adaptiven Designs liegen in der schnellen und zeitsparenden Umsetzung, da die Inhalte lediglich an die vordefinierten Formate angepasst werden und die technische Realisierung im Vergleich zum responsiven Design unkompliziert abläuft. Da es nur für bestimmte Geräte/Formate optimiert wird, kommt es beim adaptiven Design dafür bei Geräten mit abweichenden Bildschirmauflösungen häufig zu Fehldarstellungen.

Aufgrund der unterschiedlichen Merkmale von „responsiv“ und „adaptiv“ ist es ratsam, sich bereits vor der Entwicklung von BI-Applikationen genau zu informieren und gut zu überlegen, welche technische Realisierung für die entsprechende Anwendung in Frage kommt. Auch wenn es ein Mehr an Aufwand, Zeit und Kosten bedeutet, ist grundsätzlich auch eine Kombinationslösung möglich, bei der verschiedene Applikationen für unterschiedliche Endgeräte zur Verfügung gestellt werden, wie zum Beispiel bei einer solchen Konstellation:

Responsives Design = Webseite oder z.B. Reporting-Applikation
Adaptives Design = AdministrationsCockpit ausschließlich für iPad

Tim Erben

Head of Digital Marketing

pmOne AG

Tim Erben, Head of Digital Marketing ist seit mehr als 9 Jahren für die pmOne im Bereich Corporate und Online-Marketing tätig. Zuvor war er mehrere Jahre für verschiedene Unternehmen im Bereich Business Intelligence, Performance Management und Enterprise Content Management aktiv. Schwerpunktmäßig beschäftigt sich Tim Erben mit Themen wie Corporate-/Online-Marketing Strategien, Modern Marketing: Content, Automation and Analytics to Drive Growth sowie Technical SEO.

https://www.pmone.com •  Blog-Beiträge von diesem Autor