Mobile Seiten: Vor- und Nachteile im Überblick

Nachrichten, soziale Netzwerke oder Reiseauskünfte - viele Internetdienste lassen sich auf Smartphones auf zwei Arten nutzen: über optimierte mobile Seiten oder über Apps. Obwohl der Funktionsumfang oft ähnlich ist, gibt es wesentliche Unterschiede und Gründe für diese Zweiteilung. Dieser Artikel beleuchtet die Vor- und Nachteile mobiler Seiten im Vergleich zu Apps und anderen Webseitenlösungen.

Apps vs. Mobile Seiten: Ein Vergleich

Vorteile von Apps

Apps bieten einige Vorteile gegenüber mobilen Webseiten:

• Bessere Geräteanpassung und Bedienkomfort: Apps sind oft besser auf die Geräte angepasst und somit komfortabler in der Bedienung. Sie werden speziell für Smartphones, Tablets und ihre Betriebssysteme geschrieben. Sie sind optimiert für Touchscreens und unterstützen daher meist Gestensteuerung.
• Zusatzfunktionen: Einige Shopping-Apps bieten die Möglichkeit, mit der Kamera des Smartphones Barcodes von Produkten zu scannen, wodurch das Produkt direkt auf dem Bildschirm landet.
• Push-Funktion: Am häufigsten wird die Push-Funktion genutzt. Mobile Webseiten können so etwas nur sehr eingeschränkt, beispielsweise indem sie anzeigen, dass es etwas Neues auf der Seite gibt.
• Lokale Datenspeicherung: Apps speichern Daten direkt auf dem Gerät. Das bringt gegenüber Webseiten einen Geschwindigkeitsvorteil, da nicht alle Daten über die Netzverbindung geladen werden müssen. Es schont auch das gebuchte monatliche Datenvolumen.
• Offline-Modus: Einige Apps bieten einen Offline-Modus an. Benötigte Daten werden heruntergeladen, wenn eine WLAN-Verbindung besteht. Besonders bei Navigations-Apps ist das praktisch, da der ständige Download von Kartenmaterial wegfällt. Und man findet auch bei schlechtem Empfang ans Ziel.

Nachteile von Apps

Diese Vorteile der App bergen aber auch Schattenseiten:

• Datenschutzbedenken: Viele Apps wollen nicht nur Zugriff auf Kamera und Sensoren, sondern auch auf persönliche Daten. Dabei ist oft nicht ersichtlich, wie die Daten genutzt werden. „Oft ist der Zugriff auf die eigenen Daten von der Funktion der App unabhängig. Die Daten dienen dann nur dem Hersteller zur Auswertung. Dabei ist Missbrauch nicht ausgeschlossen“, warnt Sebastian Wacowski vom Institut für Internet-Sicherheit.
• Schadsoftware-Risiko: Apps können Schadsoftware auf das Smartphone bringen - hauptsächlich ein Problem von Android. Das gilt etwa, wenn man die Installationsdateien am offiziellen Appstore vorbei lädt oder Betrügern aufsitzt, die trickreich zum Download manipulierter Dateien drängen. Durch die Nutzung von Apps aus den offiziellen Appstores reduziert man dieses Risiko. Dort durchlaufen die Programme vor der Veröffentlichung eine Prüfung auf Schadsoftware - bei Google hauptsächlich maschinell, bei Apple gründlicher.
• Speicherplatzbedarf: Apps werden als Download direkt auf dem Handy gespeichert und nehmen somit Speicherplatz mit. Laufen sie unbemerkt im Hintergrund oder tauschen Daten mit dem Internet aus, kostet das Akkuleistung.
• Pflegeaufwand: Apps sind pflegeaufwändiger: Erscheint ein Update des Betriebssystems muss überprüft und getestet werden, ob die App noch wie gewünscht funktioniert.
• Kosten: Gerade für hochwertige Apps, die nicht einfach nach Baukastensystem entstanden sind, werden gerechtfertigt hohe Preise fällig.
• Kompatibilitätsprobleme: Jedes Betriebssystem hat eigene Anforderungen, daher braucht man verschiedenen App-Versionen, um verschiedenen Nutzergruppen zu erreichen. Jede Version muss fortlaufend gepflegt und aktualisiert werden. Nutzer müssen über neue Versionen informiert werden. Sie brauchen dann einen Anreiz, sie tatsächlich herunterzuladen und zu installieren.

Vorteile von Mobile Seiten

• Bessere Kontrolle über Daten: Die Alternative für bessere Kontrolle über die eigenen Daten sind dann die mobiloptimierten Webseiten. Der Verzicht auf die App kann aber den Umfang der abgegriffenen persönlichen Informationen reduzieren.
• Keine Installation notwendig: Es ist kein Download erforderlich, die Daten landen im Zwischenspeicher und können vollständig entfernt werden.
• Plattformunabhängigkeit: Es spielt keine Rolle, welches Endgerät oder Betriebssystem der Nutzer verwendet.
• Weiterleitung über Suchmaschinen: Webseitenbetreiber profitieren von der Weiterleitung über Suchmaschinen auf ihre Seite. Eine native App kann nicht direkt über das Web angesteuert werden.
• Geringere Entwicklungskosten: Die Entwicklungskosten sind im Vergleich zur App geringer.
• Weniger Speicherplatzbedarf: Eine mobile Ansicht spart Speicherplatz, da keine Installation benötigt wird.

Nachteile von Mobile Seiten

• Sicherheitsrisiken: „Das Surfen im Internet über Webbrowser birgt mehr Risiken als die Nutzung von Apps“, erklärt Wacowski. Will man also lieber den Browser nutzen und trotzdem auf der sicheren Seite sein, sollte am besten eine Virenschutz-App zum Einsatz kommen.
• Eingeschränkte Funktionen: Mobile Webseiten können Zusatzfunktionen, wie sie Apps bieten, nur sehr eingeschränkt nutzen.
• Abhängigkeit von der Internetverbindung: Eine Webseite, auch als mobile Ansicht, wird immer eine Internet-Verbindung benötigen. Sie ist ohne mobiles Internet nicht erreichbar.
• Geringere Benutzerfreundlichkeit: Sie sind in der mobile Nutzung nicht so komfortabel wie eine App. Da die UX darauf ausgelegt ist, auf allen möglichen Geräten zu funktionieren, ist sie für keines der Geräte perfekt optimiert. Anders gesagt: Die Interaktion mit deinem Content wird oft nicht so benutzerfreundlich sein, wie auf einer nativen App.

Mobile Seiten im Detail

Es gibt vier grundsätzliche Möglichkeiten, eine Webseite für mobile Endgeräte anzupassen:

1. Responsive Design

• Funktionsweise: Die Webseite wird in einem HTML- bzw. CSS-Code geschrieben, der sich automatisch an die Bildschirmgröße des Endgerätes anpasst.
• Vorteile: Google empfiehlt diese Lösung, aufgrund der relativ geringen Kosten wird sie auch breitflächig eingesetzt. Responsive Design ist denkbar einfach zu implementieren. Beim responsive Design pflegt man nur ein Design und deckt damit jede nur denkbare Bildschirmgröße ab. Besonders auf der Zeit- und Kosten-Seite stellt sich das im späteren Pflegeaufwand als großer Vorteil dar. Entsprechend leichter ist es im Nachgang auch, die Seiten auszuwerten.
• Nachteile: Bei großen, komplexen Webseiten kann Responsive Design Fehler in der Darstellung verursachen. Gerade bei Webseiten mit großen, hochauflösenden Bildern oder viel Text, kann Responsive Design zu Problemen führen. Auch verstehen alte Browser die Befehle für die Darstellung nicht immer. Wenig Möglichkeiten bei Tabellen und mehrspaltigen Inhalten: Tabellen mit vielen Spalten oder mehrspaltige Texte fallen in kleineren Ansichten einem gnadenlosen "Stapelverhalten" zum Opfer. Die Folge: Ein heilloses Durcheinander und - wie der Programmierer sagt - zerschossene Layouts. Längere Ladezeiten: Beim mobilen Aufruf wird in der Regel dasselbe geladen wie bei der Desktopversion. Nervige Wisch-Monster: Je umfangreicher die Seite, desto mehr muss gewischt werden, bis der gewünschte Content ins Blickfeld rutscht. Aufwendige Programmierung: Klar, der Entwickler muss sich so richtig reinhängen, damit die Optik am Ende überall stimmt. Er schraubt deshalb kräftig am CSS-Code.

2. Dynamic Serving

• Funktionsweise: Dabei werden zwei (oder mehr) verschiedene Versionen der Webseite auf dem Server gespeichert.
• Vorteile: Für komplexe Webseiten einfach zu implementieren.
• Nachteile: Die Identifizierung des Nutzergerätes ist relativ fehleranfällig.

3. Separate Mobile Webseite

• Funktionsweise: Eine eigene Webseite für mobile Endgeräte kann dann sinnvoll sein, wenn die Desktopversion und die Mobileversion der Seite unterschiedliche Zielsetzungen haben. Eine solche Seite wird mit einem „m.“ anstatt eines „www“ am Anfang oder ein „.mobi“ am Ende gekennzeichnet.
• Vorteile: Besonders für komplexe Webseiten eignet sich diese Form wohl am ehesten.
• Nachteile: Es gibt die Gefahr von Duplicate Content, die aber mit dem richtigen(!) Einsatz von Canonical-Tags gebannt werden kann. Für viele Unternehmen eine elegante Lösung, wenn sie auf das Unternehmensprofil passt.

4. Native App

• Funktionsweise: Eine mobile App wird speziell für ein Betriebssystem entwickelt. Normalerweise sind es komplett eigenständige Templates oder auch eigene Installationen von Shopsystemen.
• Vorteile: Ist eine App einmal installiert, lässt sich der Verhalten der Nutzer sehr genau tracken. Eine App ist dann sinnvoll, wenn die betroffene Webseite Buchungen, Preisvergleiche oder Kommunikation mit anderen Nutzern anbietet. Apps spielen ihre Stärke dann aus, wenn es um besondere Nutzererfahrung geht: Z.B. Mit der App von H&M ist es möglich sich über Pushbenachrichtigungen über Angebote informieren zu lassen oder Barcodes von Produkten im Store zu scannen um online dazu weitere Informationen zu erhalten.
• Nachteile: Apps haben auch den Nachteil, dass sie pflegeaufwändiger sind: Erscheint ein Update des Betriebssystems muss überprüft und getestet werden, ob die App noch wie gewünscht funktioniert. Ein Problem für Apps sind häufig die unterschiedlichen Betriebssysteme: Will ein Online-Shop möglichst viele Kunden erreichen muss er mindestens eine App für Apples iOS und Googles Android anbieten.

Mobile First Ansatz

Mit dem Aufkommen des Internets lag der Fokus ursprünglich auf Desktop-Bildschirmen. Dies änderte sich mit dem exponentiellen Wachstum der Nutzung mobiler Geräte in den 2010er Jahren. Der Mobile-First-Ansatz entstand als Antwort auf diese veränderten Nutzergewohnheiten. Mobile Endgeräte haben oft eine geringere Rechenleistung, kleinere Bildschirme und langsamere Netzwerke im Vergleich zu Desktop-Computern. Da mobile Geräte in der Regel über weniger Rechenleistung und langsamere Internetverbindungen verfügen, ist die Optimierung der Performance ein zentraler Bestandteil des Mobile-First-Ansatzes.

Lesen Sie auch: Epilepsie-Überwachung: Mobile Aufzeichnung

Schlüsselelemente des Mobile-First-Designs

• Optimierung für Touch-Eingaben: Mobile Geräte werden hauptsächlich über Touchscreens bedient, daher müssen Schaltflächen groß genug und leicht zugänglich sein.
• Progressive Enhancement: Für größere Bildschirme und leistungsfähigere Geräte werden dann zusätzliche Funktionen und Gestaltungselemente schrittweise hinzugefügt.
• Fokus auf Benutzererfahrung: Durch den Fokus auf mobile Endgeräte wird eine Benutzererfahrung geschaffen, die auf die Bedürfnisse und Einschränkungen mobiler Nutzer zugeschnitten ist.
• Zukunftssicherheit: Da der Trend zur mobilen Nutzung weiterhin zunimmt, bietet der Mobile-First-Ansatz eine zukunftssichere Strategie.

Herausforderungen des Mobile-First-Ansatzes

• Konzentration auf das Wesentliche: Einer der größten Herausforderungen beim Mobile-First-Ansatz ist die Notwendigkeit, sich auf das Wesentliche zu konzentrieren.
• Content-Hierarchie: Das Erstellen einer effektiven Content-Hierarchie für Mobile First erfordert ein tiefes Verständnis der Nutzerbedürfnisse. Inhalte müssen so strukturiert werden, dass sie leicht zugänglich sind und die Benutzer nicht überfordern.

Mobile First und SEO

Mit der zunehmenden Dominanz mobiler Endgeräte hat auch Google seinen Fokus deutlich auf mobile Nutzererfahrungen ausgerichtet. Der Begriff „Mobile First“ ist längst nicht mehr nur eine Designstrategie, sondern ein entscheidender Faktor für die Suchmaschinenoptimierung (SEO). Die Einführung des Mobile-First Indexing hat weitreichende Auswirkungen auf SEO-Strategien.

SEO-Strategien für Mobile First

• Responsives Design: Ein responsives Design stellt sicher, dass Ihre Inhalte auf allen Geräten - vom Smartphone bis zum Desktop - optimal dargestellt werden.
• Mobile-freundliche Inhalte erstellen: Inhalte sollten so gestaltet sein, dass sie auf mobilen Geräten leicht lesbar und navigierbar sind.

Der Übergang zu Mobile-First Indexing zeigt deutlich, dass Mobile First und SEO heute untrennbar miteinander verbunden sind. Eine erfolgreiche SEO-Strategie muss zwingend auf die Optimierung für mobile Geräte setzen.

Häufige Fehler bei mobilen Seiten und wie man sie vermeidet

Das mobile Web ist für Entwickler gleichermaßen mit Herausforderungen und Chancen verbunden. Das Ziel muss daher lauten, die Usability zu verbessern und die Webseiten für die steigende Anzahl internetfähiger Mobile-Devices zu optimieren.

1. Fehlerquelle: Wahl der Konfigurationsvariante

Der erste und grundlegendste Fehler kann schon bei der Wahl der Konfigurationsvariante passieren. Eine der elegantesten Lösungen ist sicherlich das Responsive Design. Ein weiterer Vorteil: Sie legen den Fokus nicht auf einzelne Geräte oder Betriebssysteme, sondern passen sich automatisch der Bildschirmgröße an. Und: Mit welcher Darstellungsvariante können Sie diesen Besuchern das bestmögliche Erlebnis bieten? Das gilt insbesondere für die komplexere aber aus SEO- und Usability-Gesichtspunkten zu bevorzugende Variante eines responsiven Designs: Denn eine spätere Umstellung auf diese Variante ist in vielen Fällen sehr aufwendig und der Relaunch zudem sehr kostenintensiv. Darüber hinaus ist zu beachten, dass ein responsives Design nicht immer und nicht für jedes Projekt gleichermaßen geeignet ist: Sehr komplexe Seiten, für die große Datenmengen geladen werden müssen, können beispielsweise auf mobilen Geräten mit schlechter Verbindung und schwächerer Hardware deutlich langsamer ausgeführt werden.

2. Fehlerquelle: User Interface (GUI)

Da die Bedienung auf mobilen Endgeräten in der Regel über Touchscreens abläuft, können schlechte GUI-Entscheidungen zu einer erheblichen Beeinträchtigung führen.

Lesen Sie auch: Spongebob und die kindliche Psyche: Eine Analyse

• Kein Darstellungsbereich definiert: Damit eine Seite mobil korrekt dargestellt wird, ist es essenziell, dass Sie einen Darstellungsbereich definieren. Tun Sie dies nicht, wird automatisch auch auf kleineren Bildschirmen die standardmäßige Desktop-Bildschirmbreite verwendet. Die Lösung dieses Problems: Tragen Sie im Head-Bereich Ihres Dokuments einen Viewport-Meta-Tag ein, der dem mobilen Browser Abmessung und Skalierung der Seite mitteilt. Google empfiehlt dafür folgende Zeile: <meta name=viewport content="width=device-width, initial-scale=1">
• Zu kleine Schrift: Für Ihre User ist es frustrierend, wenn sie die Texte auf Ihrer Seite nicht oder nur mit Mühe lesen können. Damit die Schrift auf jedem Gerät gut lesbar ist, sollten Sie relative Schriftgrößen verwenden, die sich mit CSS skalieren lassen. Als Basisschriftgröße empfiehlt Google 16 CSS-Pixel. Die übrigen Größen skalieren Sie relativ zur Basisgröße.
• Ungünstige Anordnung der Bedienelemente: Als absolute Webdesign-Todsünde ist an dieser Stelle die zu enge Anordnung von Links und Buttons zu nennen. Die Fingerspitze eines Erwachsenen ist naturgemäß breiter als ein Standard-Mauszeiger bei Desktop-Rechnern: Durchschnittlich sind es 10 mm. Daher müssen klickbare Elemente auf mobil-optimierten Seiten mit ausreichendem Abstand zueinander platziert werden und über eine angemessene Größe verfügen. Für Schaltflächen empfiehlt Google eine Mindestbreite von 7 mm bzw. 48 CSS-Pixeln.
• Mouseover-Effekte: Was auf dem Desktop-Rechner besonders praktisch ist, kann auf dem Smartphone der Horror sein: Mouseover-Effekte - etwa bei ausfahrbaren Dropdown-Menüs - sind für eine mobil optimierte Seite ein absolutes No-Go. Daher sollten Sie die Pseudoklasse :hover nicht für Ihre mobile Seite benutzen. Stattdessen sind übersichtliche Menüs, die sich per Tipp-Geste öffnen lassen, die bessere Variante.
• Umständliche oder versteckte Suchfunktion: Dementsprechend sollte eine mobil-optimierte Seite über eine intelligente und leicht auffindbare Suchfunktion verfügen. Sie sollte zentral auf der Startseite und mit einem Blick zu finden sein. Suchanfragen sollten zudem per Auto-Complete-Funktion vervollständigt werden, um Nutzern das mühselige Bedienen einer Touchscreen-Tastatur zu erleichtern.

3. Fehlerquelle: Performance

Beim Internetsurfen ist kaum etwas so ärgerlich, wie wartend auf eine leere Seite und den Ladebalken des Browsers starren zu müssen. Ladezeiten gelten daher als regelrechte „Conversion-Killer“. Im Mobile Web kommen erschwerend noch potenzielle Verbindungsabbrüche hinzu.

Häufige Fehler hinsichtlich der Performance sind:

• Unkomprimierte Bilder und/oder zu große Bildformate
• Zu viele Bilder und andere Multimedia-Elemente
• Unsauberer HTML- und CSS-Code
• Zu viel JavaScript
• Unkomprimierter Quellcode
• Zu viele HTTP-Anfragen
• Redirects
• Fehlendes Browser-Caching
• Langsame Server

Die meisten dieser Fehler lassen sich mit einigen Eingriffen beheben: Nutzen Sie dafür beispielsweise das Google-Tool PageSpeed Insights. Anschließend können Sie gezielte Maßnahmen treffen:

• Bilder komprimieren: Als Dateiformate empfehlen sich: JPEG, GIF und PNG. Alternativ können Sie auch auf pures CSS, Iconfonts oder SVG anstelle von Bildern setzen.
• Code von HTML, CSS und JavaScript entschlacken und komprimieren.
• Caching nutzen, um Webserver zu entlasten: Durch das lokale Speichern häufiger genutzter Dateien kann die Ladezeit für wiederkehrende Benutzer erheblich verbessert werden.
• Anzahl der http-Requests durch Bündelung der Ressourcen reduzieren.
• Performance des Content-Management-Systems (CMS) verbessern.
• Content Delivery Network (CDN) sinnvoll.
• Accelerated Mobile Pages (AMP) können für eine bessere Performance sorgen.

4. Fehlerquelle: Zu große Interstitials und penetrante Werbebanner

Kostenlose Web-Angebote sind auf Werbung zur Finanzierung von Inhalten, Pflege und Wartung angewiesen. Diese sollte allerdings dezent und nicht aufdringlich sein, um die User-Experience nicht zu gefährden. Interstitials sehen Nutzer in schlecht umgesetzten Fällen noch vor dem eigentlichen Content. In noch schlechteren Beispielen ist es zudem überaus mühsam, das kleine und versteckte „X“ zum Schließen zu finden.

5. Fehlerquelle: Einschränkungen in der robots.txt

Der Googlebot sollte - wie ein normaler Nutzer auch - Zugriff auf alle CSS-, JavaScript- und Bilddateien haben. Werden stattdessen Einschränkungen in der robots.txt definiert, können unter Umständen wichtige Inhalte nicht gerendert werden, was in letzter Konsequenz auch ein schlechteres Ranking zur Folge hat.

Lesen Sie auch: Gelbe Seiten: Ihr Neurologe

6. Fehlerquelle: Funktionale Unterschiede auf der mobilen Seite

Dazu zählen vor allem falsche Weiterleitungen und 404-Fehler, die nur bei mobilen Seiten, nicht aber Desktopnutzern angezeigt werden. In Anbetracht der Nutzerzahlen des mobilen Webs wäre es verheerend, eine spezifische mobile Seite zu erstellen, diese gegenüber der Desktop-Version zu vernachlässigen und nur „abgespeckten“ Content anzubieten. Daher sollte eine mobile Seite über alle wichtigen Inhalte und Funktionen verfügen, die auch auf der Desktopseite zu finden sind.

Problemfall: Adobe Flash

Nicht minder frustrierend ist es, wenn die Inhalte zwar angezeigt werden, aber mit der mobilen Seite nicht kompatibel sind. Das ist häufig bei Flash-Videos der Fall, die von den wenigsten mobilen Endgeräten unterstützt werden.

tags: #mobile #seiten #nerven