Mobile Websites führen im Bewusstsein von uns Marketingmenschen eher ein Schattendasein, vor allem im Vergleich zu Apps. Zu Unrecht, denn mobile Website können fast alles was Apps auch können und manchmal sogar noch etwas mehr.Mobile Websites sind „normale“ Websites, die für die Displaygrößen von mobilen Endgeräten speziell optimiert wurden. Wie bereits im Artikel "Wann brauchen Sie eine App“ ausgeführt wurde, haben mobile Websites im Vergleich zu Apps wichtige Vorteile:
- Sie sind leicht zu updaten (wie eine normale Website),
- plattformunabhängig (da sie über den Smartphone-Browser aufgerufen werden)
- und müssen nicht installiert werden.
Mobile Websites sind eingeschränkt was die Nutzung von Gerätefunktionen des mobilen Endgerätes angeht und in punkto Offline-Fähigkeiten. Auch in Punkto Benutzerfreundlichkeit, bieten Apps momentan noch mehr Spielräume.Es gibt mehrere Spielarten der mobilen Website, die ich hier kurz vorstellen möchte:
Die Einfachste: Website ohne FlashWenn wir Websites entwickeln, hören wir immer öfter den Satz „Machen Sie, dass das auch auf dem iPad läuft!“. Um das zu erreichen, muss man lediglich die Bildschirmauflösung des iPads beachten (1024 x 768 px) und man darf kein Flash verwenden, da die iOs-Geräte dies nicht beherrschen. Fertig ist die denkbar einfachste „mobile Website“.In der Tat werden die Bildschirmauflösungen der mobilen Endgeräte immer größer, so dass normale Websites bereits heute oft gut dargestellt werden. Lästig bleiben aber lange Ladezeiten und das häufig notwendige Zoomen auf Smartphones, um Texte komfortabel lesen zu können. Wer das seinen Usern nicht zumuten möchte, sollte also speziell für mobil optimieren.Die Hülle: Mobile ThemeMobile Themes stülpen einer normalen Website ein auf mobile Endgeräte optimiertes „Stylesheet“ wie eine Hülle über. Das heißt: Die Inhalte der Website bleiben gleich (oder werden etwas abgespeckt), nur die Darstellung ist auf mobilen Endgeräten anders als am normalen Bildschirm.
Gut zu sehen ist das an Nachrichten-Websites wie m.faz.net. Diese bieten die gleichen Inhalte wie ihre „großen Schwestern“ (faz.net), nur in einem besser lesbaren Gewand. Dies ist ein eleganter, weil einfach pflegbarer Ansatz, der allerdings nicht von jedem Content Management System unterstützt wird.
[caption id="attachment_3213" align="aligncenter" width="565"]
Mobile Version von FAZ.net im Vergleich zur normalen Website[/caption]Die Autonome: Mobile VersionWährend Mobile Themes die Inhalte einer normalen Website für mobil optimieren, sind „mobile Versionen“ komplett autonom. Dieser Weg wird oft gewählt, wenn das Content Management System der normalen Website Mobile Themes nicht unterstützt oder die Inhalte der normalen Website für eine Mobilnutzung nicht geeignet sind.Auf unserer Website spiritlink.de sind wir diesen Weg gegangen. Da wir die Website für große Bildschirmauflösungen optimiert haben und viele große Grafiken eingesetzt wurden, haben wir für Smartphones einfach eine autonome, schlanke Version erstellt, die auf’s Wesentliche reduziert ist.Die Flexible: Responsive DesignSowohl beim Mobile Theme als auch bei der Mobile Version muss immer noch eine Entscheidung getroffen werden, nämlich für welche Bildschirmauflösung man optimiert. Diese Frage stellt sich beim Responsive Design (auch „Adaptive Design“ genannt) nicht. Hier ist der komplette Websiteinhalt skalierbar angelegt und passt sich an die Größe der verfügbaren Browserfläche an.Dieser Ansatz erfordert relativ viel konzeptionellen Aufwand (wie arrangieren wir die Inhalte unserer Website wenn wir wenig vs. viel Platz haben) ist aber andererseits die Methode, die den Nutzer am Wenigsten bevormundet. Wer weiß schon, ob der User mit seinem Smartphone (klein), seinem Galaxy Tab (mittel) oder seinem iPad 3 (groß) die Website besucht?Anschauen können Sie sich viele Beispiele unter mediaqueri.es oder auf einer Website, die wir letztes Jahr für Siemens erstellt haben medicalradiation.com. Ziehen Sie mal das Browserfenster breit und schmal…[caption id="attachment_3202" align="aligncenter" width="590"]
Hier drei verschiedene Zustände des medicalradiation.com. Layouts: breit (normale Bildschirmauflösung), mittel (iPad-Breite) und schmal (Smartphone).[/caption]Die Mischung: Web-Apps bzw. Hybride Apps Und schlussendlich gibt es noch die Möglichkeit, eine Brücke zwischen der Website und der App-Welt zu schlagen, in Form von „Web-Apps“ oder „hybriden Apps“. Das sind – einfach formuliert – mobile Websites in Form und Gestalt einer App.Web-Apps werden über den Browser des Mobilgeräts aufgerufen und können dann auf dem „Home-Bildschirm“ als Lesezeichen gespeichert werden. iOs öffnet diese Web-Apps dann im Vollbildmodus. Über bestimmte HTML-Funktionen können diese Web-Apps zwar Ortungsdienste, den Emailclient oder andere Apps wie Google Maps öffnen. Smartphone-Funktionen bleiben aber weiterhin nicht zugänglich. [Update 08.03.2012] Wie ich gestern gelernt habe, können Web Apps mit ein paar Einschränkungen (z.B. limitierte Datenmenge) auch offline benutzt werden (über den HTML 5 Caching Mechanismus).Bei hybriden Apps gehen die Entwickler noch einen Schritt weiter: hier werden mobile Websites in eine App-Hülle gepackt und dann über den App-Store vertrieben. Diese Apps werden also wie normale Apps installiert und haben – dank der App-Hülle – auch vollen Zugriff auf die Smartphone-Funktionalitäten.Die Entwickler dieser Zwitter orientieren sich oft an App-Gestaltungsparadigmen und benutzen Gestaltungselemente, die denen von iOs oder Android zum Verwechseln ähnlich sind, so dass die Usability von Web-Apps und hybriden Apps der von „echten“ (nativen) Apps sehr nahe kommt.Der Vorteil von hybriden Apps ist, dass sie sich relativ einfach Apps für verschiedene Betriebssysteme erstellen lassen, da der Website-Kern immer gleich bleiben kann. Auch Web-Apps sind plattformunabhängig.FazitEs gibt heute nicht das eine Konzept für mobile Websites. Je nach Zielgruppe, Einsatzzweck und technologischen Rahmenbedingungen sollte aus den oben genannten Ansätzen ausgewählt werden. Zudem ist dies ein sehr dynamisches Feld, in dem sich ständig neue Technologien entwickeln.
