Es gibt verschiedene Methoden, eine Website für alle Bildschirme zu konfigurieren. Hierbei spielen Faktoren wie Kosten, Dauer der Erstellung, verfügbare personelle Ressourcen und Infrastruktur sowie die Anforderungen Ihrer Kunden eine Rolle.
Für welche Konfiguration Sie sich auch entscheiden: Wir empfehlen, grundsätzlich alle Websites auf derselben Domain zu betreiben, zum Beispiel ihrebeispielurl.de. Insbesondere sollten Sie, wenn Ihre Desktopwebsite auf ihrebeispielurl.de gehostet wird, Ihre mobile Website nicht unter einer anderen Domain wie andereurl.de/ihrebeispielurl bereitstellen.
Mit einer einheitlichen Domain fördern Sie zudem den Wiedererkennungswert Ihrer Marke. Betrachten wir nun unter Berücksichtigung dieses Prinzips die drei grundlegenden Methoden zum Erstellen einer für Mobilgeräte optimierten Website: Responsive Webdesign, die dynamische Bereitstellung und eine separate mobile Website.
Responsive Webdesign
Responsive Webdesign, kurz RWD, ist ein modernes Designverfahren, bei dem für alle Plattformen dieselbe HTML-Codebasis verwendet wird. Alle Geräte lesen hierbei denselben Code unter derselben URL. Die Inhalte werden mithilfe vordefinierter Breakpoints und flexibler Raster automatisch an die Größe des jeweiligen Bildschirms angepasst.
RWD setzt eine sorgfältige Planung voraus. Die Kosten können zunächst relativ hoch sein. Wenn die gerätespezifische Strategie jedoch einmal festgelegt ist, werden für die Wartung normalerweise deutlich weniger Ressourcen benötigt.
Vorteile:
- Eine URL für alle Inhalte: Durch die Verwendung einer einzigen URL für die einzelnen Inhalte können Nutzer leichter damit interagieren, sie mit anderen teilen oder darauf verlinken. Zudem können Suchmaschinen den Content leichter erkennen und indexieren.
- Konsistente Nutzererfahrung: Die Präsentation aller Inhalte wird angepasst, ohne die Nutzung gerätespezifischer Funktionen einzuschränken.
- Flexible Ausrichtung der Darstellung: Der Nutzer kann zwischen Hochformat und Querformat wählen.
- Keine Weiterleitungen: Die Ladezeit verkürzt sich und die Leistung wird erhöht.
Nachteile:
- Setzt eine sorgfältige Planung voraus: Da der gesamte HTML-Code gemeinsam genutzt wird, ist eine sorgfältige Planung unerlässlich, um auf jedem Gerät und für jeden Nutzer eine wirklich angepasste und durchgängig positive Nutzererfahrung mit optimaler Leistung zu erzielen.
- Häufige Fehler:
Überflüssige Daten: Zwingen Sie mobile Nutzer nicht dazu, Bilder in Originalgröße herunterzuladen, die eigentlich für große Bildschirme und schnelle Übertragungsgeschwindigkeiten bestimmt sind. Verringern Sie die Anzahl der HTTP-Anfragen und minimieren Sie CSS und JavaScript. Laden Sie sichtbare Inhalte zuerst und stellen Sie andere Inhalte zurück.
Geeignet für:
Unternehmen, denen eine konsistente Nutzererfahrung besonders wichtig ist und bei denen ein Webteam die gesamte Planung für alle Geräte übernimmt. (Dieser Ansatz wird beispielsweise auf Starbucks.co.uk, PCworld.co.uk und TescoBank.com verfolgt.) RWD lässt sich an neu hinzukommende Geräte anpassen. Dank der einheitlichen URL können Artikel verlinkt und geteilt werden, ohne dass Verwirrung entsteht oder Weiterleitungen erforderlich sind.
Dynamische Bereitstellung:
Bei dieser Methode erkennt der Webserver den vom Besucher verwendeten Gerätetyp und präsentiert daraufhin eine angepasste Seite mit einem speziellen Layout für das betreffende Gerät. Angepasste Seiten können für jeden Gerätetyp erstellt werden, von Mobiltelefonen und Tablets bis hin zu Smart-TVs.
Vorteile:
- Angepasste Nutzererfahrung: Inhalte und Layout werden eigens für das vom Nutzer verwendete Gerät erstellt.
- Einfache Änderungen: Inhalte und Layout können an die Bildschirmgröße angepasst werden, ohne die anderen Versionen bearbeiten zu müssen.
- Kurze Ladezeiten: Ihr Webteam kann den jeweiligen Inhalt im Hinblick auf eine kurze Ladezeit für das betreffende Gerät optimieren.
- Einheitliche URL: Wie beim Responsive Webdesign bleibt auch bei der dynamischen Bereitstellung die URL für alle Nutzer gleich.
Nachteile:
- Mehrere Versionen von Inhalten: Bei mehreren angepassten Seiten sind auch dieselben Inhalte immer mehrfach vorhanden. Ohne ein ausgereiftes CMS kann es sehr aufwendig sein, alle gerätespezifischen Seiten auf demselben Stand zu halten.
Häufige Fehler:
- Fehlerhafte Geräteerkennung: Damit alle möglichen Geräte erkannt werden, müssen auf den Servern Skripts ausgeführt werden. Dies verhindert Probleme, zum Beispiel, dass der Server eine für Mobilgeräte optimierte Website an Tabletnutzer sendet. Ihr Webmaster muss das Verzeichnis aktuell halten und einen reibungslosen Betrieb sicherstellen, um Fehler bei der Erkennung oder eine Unterbrechung des Service zu vermeiden. Ein weiteres häufiges Problem besteht darin, dass der Server von einer bestimmten Geräteausrichtung ausgeht, normalerweise dem Hochformat, der Nutzer das Gerät jedoch quer hält.
- Wechselnde Nutzererfahrung: Nutzer finden es möglicherweise irritierend, wenn Sie mehrere Websites mit stark abweichenden Layouts betreiben. Zwar ist es wichtig, die Darstellung an jede Bildschirmgröße anzupassen, jedoch sollte Ihre Marke in allen Formaten wiedererkennbar sein.
Geeignet für:
Änderungen an ihrer Website vornehmen und die Darstellung meist nur für ein Gerät anpassen müssen – etwa nur bei ihrer mobilen Website. Ein kompetentes IT-Team bzw. ein Dienstleister ist unverzichtbar, um die verschiedenen, möglicherweise komplexen Sätze von erforderlichem Websitecode zu verwalten.
Separate mobile Website:
Als dritte Option können Sie einfach eine mobile Website erstellen, die von der Desktopwebsite völlig unabhängig ist. Mobile Besucher werden vom System erkannt und an Ihre für Mobilgeräte optimierte Website – häufig auf einer Subdomain wie m.ihrebeispielurl.de – weitergeleitet. Die separate mobile Website sehen nur Nutzer von Mobilgeräten. Nutzern von Tablets, internetfähigen Fernsehern oder sonstigen Geräten wird weiterhin die ursprüngliche Desktopwebsite gezeigt.
Vorteile:
- Angepasste Nutzererfahrung: Wenn Sie eine separate mobile Website erstellen, die nur für mobile Nutzer konzipiert ist, sind Sie am flexibelsten.
- Einfache Änderungen: Änderungen am Inhalt oder Design bleiben auf die mobile Version der Website beschränkt und haben keine Auswirkungen auf andere Geräte.
Nachteile:
- Mehrere URLs: Für die gemeinsame Nutzung einer Webseite sind sorgfältig geplante Weiterleitungen und Verknüpfungen zwischen der mobilen und der nicht mobilen Website erforderlich. Weiterleitungen verursachen zudem längere Seitenladezeiten.
- Mehrere Versionen von Inhalten: Aufgrund der zwei separaten Sätze von Inhalten wird das Datenmanagement komplexer.
Häufige Fehler:
- Fehlerhafte Weiterleitungen: Wenn ein mobiler Nutzer auf eine untergeordnete Desktopseite gelangt, muss sichergestellt werden, dass er nicht auf die allgemeine Startseite der mobilen Website weitergeleitet wird. Ebenso wichtig: Vermeiden Sie den Smartphone-spezifischen Fehler, dass der Nutzer von einer URL der Desktopwebsite auf eine nicht vorhandene mobile URL weitergeleitet wird.
- Fehlende Annotations: Wechselseitige ("bidirektionale") Annotations erleichtern Googlebot das Erkennen Ihrer Inhalte und tragen dazu bei, dass unsere Algorithmen die Beziehungen zwischen Ihren Desktopseiten und Ihren mobilen Seiten erkennen und richtig verarbeiten.
- Inkonsistente Nutzererfahrung: Nutzer, die Ihre Smartphonewebsite besuchen, sollten erkennen können, dass es sich um dasselbe Unternehmen wie auf der entsprechenden Desktopwebsite handelt. Dadurch vermeiden Sie Irritationen und negative Nutzererfahrungen.
Geeignet für:
Unternehmen, die ihre mobile Website aus einem bestimmten Grund unabhängig verwalten müssen. Manche Unternehmen möchten beispielsweise für die mobile Website einen anderen Anbieter einsetzen oder wünschen sich eine mobile Struktur, die mit RWD nicht realisierbar ist. Da die Einrichtung relativ einfach und im Allgemeinen auch recht kostengünstig ist, kann eine separate mobile Website für kleine Unternehmen – die weniger hohe Ansprüche an eine Website stellen – die richtige Lösung sein.