Responsive-Webdesign im Vergleich zu einer Web-App

Der Unterschied zwischen einer Web-App und dem Responsive-Webdesign liegt hauptsächlich darin, dass dem Seitenbesucher Inhalte einer Internetseite unterschiedlich aufbereitet angezeigt werden. Nachfolgend möchten wir Ihnen ein paar weitergehende Informationen zu den beiden unterschiedlichen Webdesign-Varianten geben. Als technische Grundlage für das Responsive-Webdesign dient HTML5 und CSS3.

Internetseite im Responsive-Webdesign

Ist eine Internetseite im Responsive-Design erstellt, dann passt sie sich beim Verkleinern der Bildschirmgröße automatisch an. Dadurch ist es egal, ob eine Internetseite auf einem Desktop-PC, Notebook, Tablet oder Smartphone geöffnet wird. Damit diese dynamische Seitenanpassung stattfindet, gibt es innerhalb des CSS-Codes entsprechende Media-Querie-Einträge, die diese Anpassung im Hintergrund automatisch übernehmen. Diese Veränderungspunkte orientieren sich in der Regel an den am häufigsten vorkommenden mobilen Bildschirmauflösungen, um so eine möglichst gute Anzeigequalität auf vielen mobilen Geräten zu erreichen. In der Regel reagiert ein Responsive-Design so, dass die Seiteninhalte blockweise untereinander dargestellt werden, um das horizontale Scrollen auf Smartphones und Tablets zu unterbinden. Zusätzlich wird in den meisten Fällen bzw. bei modernen WordPress-Themes das Menü in der mobilen Ansicht durch ein Klappmenü ersetzt, um den geringen Platz auf dem Display eines Smartphones möglichst optimal zu nutzen.

Bei WordPress-Premium-Themes kann es zudem vorkommen, dass die Widgets aus der Sidebar in ein Off-Canvas-Layout umgewandelt werden. In solch einem Fall, also beim Off-Canvas-Layout, werden die Widgets nicht in Blöcken unter dem eigentlichen Seiteninhalt verschoben, sondern werden auf Befehl über den Seiteninhalt seitlich eingeblendet. Das ist zum Beispiel hier beim Tatami-Theme vom Elmastudio sehr schön zusehen.

Besonders beliebt ist der blockweise Versatz der Seiteninhalte bei Content-Management-Systemen wie zum Beispiel WordPress. Beim CMS WordPress ist es inzwischen so, dass praktisch alle neuen Themes im Responsive-Webdesign erstellt sind und sich die Seitenansicht so auf Smartphones und Tablets automatisch anpasst. Wie gut diese Anpassung auf einem mobilen Endgerät funktioniert, ist abhängig von der Qualität des installierten WordPress-Themes. Ob es sich lohnt eine ältere WordPress-Installation die nicht über das Responsive-Design verfügt anzupassen, muss von Fall zu Fall entschieden werden, da der manuelle Aufwand einer Anpassung - abhängig vom Theme - nicht unerheblich sein kann. In manchen Fällen ist dann ein kompletter Wechsel auf ein neues Responsive-WordPress-Theme wirtschaftlich gesehen die bessere Entscheidung.

Jenseits des blockweisen Versatzes der Seiteninhalte, gibt es natürlich noch einige weitere Optimierungsmöglichkeiten für das flexible Verhalten einer Internetseite. So kann man zum Beispiel für die unterschiedlichen Bildschirmauflösungen auch die passenden Bildformate per CSS einbinden. Damit kann man die Ladezeit einer Webseite zum Teil deutlich reduzieren. Gerade für die Darstellung der Webseite auf einem Smartphone, benötigt man keine Bilder mit einer riesigen Auflösung. Neben der Optimierung von Bildern wird in den meisten Fällen per CSS auch dafür gesorgt, das bei kleineren Auflösungen - wie auf einem Smartphone - die Texte in einer etwas kleineren Schriftgröße angezeigt werden.

Vorteil Responsive-Webdesign: Nachteile Responsive-Webdesign:
Responsive-Webdesign mit WordPress aus Roedermark

Internetseite zusätzlich als Web-App

Eine Web-App wird als zusätzliche Lösung neben der normalen Internetseite mittels HTML5 und CSS3 entwickelt. In der Praxis funktioniert eine Web-App dann so, dass beim Aufrufen einer Internetseite von einem mobilen Gerät wie einem Smartphone zwei Dinge möglich sind. Entweder wird der Besucher der Internetseite direkt auf die mobile Web-App weitergeleitet und bekommt von diesem automatischen Wechsel nichts mit. Oder alternativ ist es auch möglich, dem Benutzer beim Besuch der Internetseite zu fragen, ob er die Internetseite im Desktop-Modus oder im Web-App-Modus sehen möchte. Letzteres macht meistens mehr Sinn, da Besucher einer Internetseite gerne die Wahl haben möchten und man sie so auch nicht bevormundet. Aber auch wenn ein Besucher Ihre Internetseite schon vom Desktop aus besucht hat und somit kennt, mag er vielleicht lieber die Desktop-Version auch auf dem Smartphone sehen.

Eine Web-App verschiebt die Inhalte und Informationen nicht wie beim Responsive-Webdesign einfach in Blöcken untereinander, sondern ist eine eigene Entwicklung inklusive eigener Inhalte. Damit kann man auch zum Beispiel die Inhaltsmenge reduzieren oder mit technischen Mitteln am Anfang verbergen, um so den Internetauftritt nicht zu überladen und den mobilen Smartphone-Besucher nicht zu überfordern. Und das Design einer Web-App orientiert sich an dem gängigen Layout von normalen Apps, was wiederum die Bedienung einer Web-App sehr einfach macht.

Wer noch näher am „Look and Feel“ einer richtige App heranreichen möchte mit seiner Web-App-Lösung, kann auch Mittels jQuery Mobile sich eine Web-App erstellen lassen. Bei allen optischen Vorteilen die jQuery Mobile bietet, muss bei so einer Lösung aber immer auch bedacht werden, dass diese Lösung, im Gegensatz zu einer reinen HTML5 und CSS3 Lösung, nur mit eingeschalteter JavaScript-Funktion im Browser funktioniert.

Vorteil einer Web-App: Nachteile einer Web-App:

Fazit

Für viele Unternehmensseiten reicht das normale Responsive-Webdesign völlig aus und bietet dem Seitenbesucher ein gutes Erlebnis. Wer allerdings seinem Seitenbesucher das perfekte Erlebnis liefern möchte, wird um eine Web-App als zusätzliche Lösung nicht herumkommen. Eine Web-App macht auch dann besonders viel Sinn, wenn man täglich aktuelle Inhalte auf seiner Seite bereitstellt, wie es zum Beispiel bei einem Nachrichtenmagazin der Fall ist. Aber auch für gastronomische Betriebe ist eine Web-App eine lohnende Investition, da man dem mobilen Seitenbesucher per Web-App die Inhalte sehr kompakt präsentieren kann. Und durch die einfache und kostengünstige Entwicklung mittels HTML 5 und CSS 3 sind Web-Apps auch auf praktisch allen aktuellen Smartphones nutzbar − ganz im Gegensatz zu einer nativen App, die immer nur auf dem jeweils passenden Betriebssystem genutzt werden kann, weshalb man so für jedes Betriebssystem eine eigene App entwickeln muss.

Wir unterstützen Sie gerne bei der Planung und Entwicklung einer Responsive-Webdesign Internetseite oder einer Web-App.

Wir freuen uns auf Ihre Anfrage!