Responsive Design, Webapp und flexible Breite im Vergleich

An mobile Design für Websiten kommt heutzutage niemand mehr vorbei. Welche Methode ist die beste?

Geschätzte Lesezeit: 5 Minuten

Die Webapp

Eine App ist Software, die speziell für ein bestimmtes mobiles Betriebssystem geschrieben wird. Die Desktopapp wird fest auf dem Mobiltelefon installiert, man kann sie jederzeit per Knopfdruck aufrufen und meistens online, manchmal aber auch offline benützen. Eine Webapp im Gegensatz dazu ist ein Programm, das sich automatisch lädt, wenn ein bestimmtes Mobilgerät auf eine Website zugreift. Ob sie aufgerufen wird oder nicht, ist abhängig davon, ob die App für das Betriebssystem des Geräts programmiert wurde, das die Anfrage stellt. Die meisten sind für das iPhone und/oder Android vorbereitet. Windows Systeme hingegen oder auch unternehmenseigene Plattformen wie Nokia bekommen derzeit meistens noch die Standardansicht der Website angezeigt. Vorteil: Man kann, völlig unabhängig von der Website, komplexe Systeme entwerfen, die sich das gesamte Betriebssystem eines Smartphones zunutze machen (beispielsweise für Navigation) und als Miniaturprogramm automatisch über die Website zugänglich machen. Nachteil: Man ist abhängig von diesen Betriebssystemen, die Webapp ist nur von Smartphones aus aufrufbar. Normale Browser ignorieren die Apps. Größenvariationen, bei denen sich auch die Proportionen der Elemente oder ihre Anordnungen ändern, sind meistens nicht vorgesehen.
Fazit: Die Webapp macht sehr viel Sinn, wenn man sehr komplexe Inhalte reduzieren möchte oder wenn man beispielsweise Buchungssysteme oder Navigationskarten mit Zieldestinationen mit Anbindung an eine Desktopapp braucht (z. B. Newsreader oder Mailprogramme). Sie ist jedoch für weniger komplexe Hompepages, die primär nichtinteraktive Daten präsentieren, zu aufwendig und auch zu unflexibel.

Flexible Breite

Üblicherweise sind Websites statisch angelegt. Sie haben fest definierte Pixelbreiten, in denen sich alle Elemente der Website durch eindeutig vorgegebene Größen und Abstände an ihrem individuellen Platz befinden. Dabei sind sie links und rechts an den Rändern der vordefinierten Breite ausgerichtet und an der Oberkante des Browsers. Nach unten hin sind sie offen gehalten. Man kann diese Ausrichtung flexibel gestalten, und sie in Prozentwerten an Browserrändern ausgerichtet vornehmen, ohne eine feste Pixelbreite für die Seite anzugeben. Je nachdem, wie groß der Browser ist, driften die Elemente der Website auseinander oder stehen sehr eng zusammen. Sie können sich auf Wunsch überlappen oder sich prozentuell vergrößern und verkleinern. Sie können, bei guter Proportionierung, die richtigen Größenverhältnisse immer aufeinander abstimmen. Das kann interessant sein. Für Onlinekunstwerke gibt es eine Reihe von Spielmöglichkeiten. Vorteil: Die Elemente schieben sich bei schmalen Browsern zusammen, man muss nicht mehr horizontal hin- und herscrollen, um alles sehen zu können. Bei großen Browsern ordnen sie sich über die gesamte Monitorfläche an, es entstehen keine unschönen Leerzonen. Nachteil: Das Endresultat ist schwer vorhersehbar. Texte können ineinandergeschoben werden uns unleserlich werden, Bilder können sich unerwünscht überlappen, wenn nicht intelligent über Prozentangaben Proportionen definiert wurden.

Fazit: Für manche künstlerischen Anwendungen oder Seiten mit großen Bildern aber dafür reduziertem Textinhalt kann das ideal sein. Für die durchschnittliche Unternehmensseite oder insbesondere für komplexere Layouts ist aber davon abzuraten.

Responsive Design

Beim Responsive Webdesign, oft auch als adaptive Design interpretiert, verbindet man die Vorteile der Webapp mit den Vorteilen von statischem und fluidem Design. Es ist das Beste aus allen Welten. Das responsive Design beruht auf Medienabfragen, die alle Gestaltungselemente je nach Ausgabegröße in Pixeln so anordnen, wie man es vorab festlegt. Vor jedem Aufruf wird gefragt: Browser, wie groß bist du? Beim Responsive Design verändern sich die Größenverhältnisse fließend, beim Adaptive Design springen die Größen je nach Display- oder Browserbreite in vorab vorbereitete statische Gerüste. Je nachdem, wie viele Rasterspalten der Browser einliest, wird ein festes oder flexibles Design aufgerufen. Dynamisch ordnen sich alle Elemente der Website daran an. Man kann man beliebig viele Variationsmöglichkeiten gestalten.
Bei Zugriffen von Smartphones ordnet man die Elemente statisch gut proportioniert übereinander an, bei Tablets verschiebt man ihre Anordnung nebeneinander, beispielsweise mit zwei Textspalten anstatt von einer, bei mittelgroßen Browsern kann man vier oder mehr Spalten definieren, bei großen sechs oder zehn, je nach Inhalt. Auf diese Weise kann man sein Design jederzeit um neue Dimensionen erweitern. Man kann auch Scripte mit einarbeiten, die den Funktionen einer Webapp sehr nahe kommen, beispielsweise um Menüs zusammenklappbar zu gestalten oder Mapsysteme einzubinden, die betriebssystemunabhängig sind. Vorteil: Man hat eine Website, die auf allen Geräten – so wie vorab designt – ideal dargestellt wird. Das System ist, wenn gut vorbereitet, nachhaltig erweiter- und ausbaubar. Nachteil: Man hat keinen Zugriff auf betriebssystemeigene Zusammenhänge, so wie bei Webapps und kann die Navigationsstruktur der Hauptseite nur leicht durch das Ausblenden von Elementen variieren.

Fazit: Responsives Design ist für alle Anwendungen und alle Betriebssysteme hervorragend geeignet, vorausgesetzt die Navigationsstruktur der Website muss beim Aufruf durch Smartphones nicht stark verändert werden. Bei sehr komplexen Seiten, die deutlich reduzierte Inhalte für kleine Mobilgeräte anbieten und ganz andere Interaktionssysteme aufrufen als auf der Hauptseite, ist es nicht anpassungsfähig genug.

In jedem Fall ist individuell zu überlegen, welche Variante am meisten Sinn macht. Es sind natürlich Kombinationen möglich, beispielsweise flexible Breite plus Webapp. Webapp plus gleichzeitiger statischer Variante mit Auswahl auf der Startseite. Responsives Design mit Downloadangebot einer Desktopapp für täglichen Zugriff vom Smartphone aus. Und auch beim Responsive Design ist die Einführung der flexiblen Breite möglich. Im Endeffekt ist nur eine Sache wichtig: Dass das, was man als Publisher seinen UserInnen mitteilen möchte, attraktiv und gut überschaubar zugänglich gemacht wird. Dass die Interaktionsmöglichkeiten, die man anbietet, funktional sind aber gleichzeitig intuitiv/emotional verständlich gestaltet werden.

Teilen Sie Ihre Meinung mit