Responsive vs Mobile App: Wo sind die Unterschiede?

Soll eine Webseite her, kommen schnell die Schlagworte mobile Webseite bzw. Mobile App und responsive Website in Spiel. Das gilt insbesondere für Unternehmensseiten und Shops. Doch wo die Unterschiede zwischen den verschiedenen Möglichkeiten liegen, ist oft unklar. Auch vermischen sich schnell die Begriffe. So wird Mobile App leicht mit mobiler Website oder mobiler Web-App gleichgesetzt, obwohl es sich eigentlich um ein Synonym für native App handelt.

Wirrwarr: Was sind Mobile App, Webseite oder native App?

Es gibt eine ganze Reihe regelrechter Buzzwords, wenn es um mobile Anwendungen und Webseiten geht. Oft kommt es zu Missverständnissen bei den Fachbegriffen. Wir geben mit den folgenden Abschnitten eine Orientierungshilfe:

Native Apps, Hybrid Apps und Web-Apps

Native Apps sind Windows Mobile, iOS oder Android Anwendungen, die für eine spezielle Plattform entwickelt wurden. Ob eine auf einem Mobilgerät installierte App nativ ist, ist für den Laien oft nicht genau festzustellen. Neben nativen Apps gibt es so genannte Hybrid Apps, die aus einem Basiskern mit nativen Funktionen besteht, auf dem eine Implementierung der Anwendung mit HTML5 + Javascript aufsetzt. Durch die native Basis greift die Anwendung auf Features der Mobilgeräte wie GPS, Speicher oder Kamera zu. Web-Apps sind Webseiten, die auf HTML, CSS und JavaScript basieren. Sie können im Browser von Desktop-Rechner oder mobilem Endgerät ausgeführt werden. Die Inhalte werden bei Web-Apps dynamisch geändert. Dadurch muss nicht immer die komplette Seite neu geladen werden, es werden nur die Teile einer Seite ersetzt, die ersetzt werden müssen. Die nötigen Daten dazu liefert serverseitig eine Schnittstelle – meist eine Restful API. Mit HTML5 können Web-Apps teils auch auf Komponenten der Endgeräte wie die Kamera zugreifen.

Web-App und Webseite

Klassische Webseiten werden über eine URL aufgerufen. Wechselt der Nutzer die Seite, sendet Daten oder fordert welche an, wird dieser auf eine neue URL gelenkt. Bei jedem Seitenwechsel – also bei fast jeder Nutzerinteraktion – muss eine komplette Seite vom Server angefordert, geladen und gerendert werden. Moderne Lösungen erlauben dabei jedoch etwas Flexibilität: Durch CSS3 und JavaScript ist es auch bei Webseiten möglich, interaktiv Elemente zu verändern, so dass nicht für jede kleinste Aktion – wie zum Beispiel das Auffalten eines Menüs - das Laden einer neuen Seite nötig ist. Web-Apps gehen bei der Flexibilität etwas weiter: Bei den Apps wird nicht Seite von Seite vom Server geladen. Initial wird eine Anwendung geladen, die über eine Schnittstelle auf die serverseitige Implementierung zugreift. Werden Daten benötigt, wird nicht eine komplette HTML-Seite übermittelt, sondern nur Roh-Daten. Das Rendering übernimmt die clientseitige Web-App. Meist basieren diese Webanwendungen auf einem JavaScript Framework wie jQuery, mit dem sich der Aufwand bei der Implementierung reduzieren lässt. Das Nachladen der Roh-Daten reduziert Ladezeiten und die Zeit beim Rendering im Browser. Schließlich wird nur ein Bruchteil der Seite geladen, insbesondere statische Elemente wie Navigation, Footer und Header müssen meist nicht nachgeladen werden. Zudem muss der Browser auch nur einen Teil der Seite neu rendern und nicht eine komplette Seite von Grund neu aufbauen.

Responsive Webseite / App

Bei Responsive Webseiten bzw. Apps passt sich das Layout der Displaygröße an. Designer arbeiten dabei mit sogenannten Breakpoints. Mit diesen lassen sich für bestimmte Auflösungen Layoutregeln erstellen. Die Darstellung von einzelnen Elementen wie Bildern, Navigation, Menüs, Schrift und Text (Content) sind möglich. Auch können für bestimmte Darstellungen Elemente ein- oder ausgeblendet werden. Unterstützt werden Entwickler bei der Erstellung von Responsive Webseiten durch Frameworks, die bereits viele Funktionen für Responsive bereitstellen. Technische Basis bilden HTML, CSS und JavaScript.

Mobile Webseite / Web-App

Mobile Webseiten und mobile Web-Apps sind für die Darstellung auf mobilen Endgeräten ausgelegt. Sie ergänzen Desktop-Webseiten. Oft werden Nutzer automatisch durch eine Weiche ihrem Endgerät entsprechend auf Desktop-Webseiten und mobile Webseiten umgeleitet. Es ist möglich, einfache mobile Webseiten oder dynamische mobile Web-Apps zu implementieren. Im Gegensatz zur Desktop-Webseite sind mobile Seiten meist leichtgewichtiger. Datenmengen, Bilder und teils auch andere Inhalte werden reduziert, um den Seitenaufbau auf mobilen Endgeräten und insbesondere die Transferdauer bei der Nutzung von mobilen Internetverbindungen zu optimieren.