Mobile Websites: 3 verschiedene Ansätze, die Sie zu Ihrem Ziel bringen

Was noch vor ein paar Jahren kaum vorstellbar war, ist heutzutage Wirklichkeit. Wurde zu Beginn die Nutzung von Handy & Co. als No-Go in der Öffentlichkeit wahrgenommen,  verbreitet  Zeitungsrascheln nunmehr einen Hauch von Nostalgie. Und der Ansatz „Mobile First“ für die Konzeption von (neuen) Internetauftritten ist nicht mehr als die logische Konsequenz auf den unaufhaltsamen Siegeszug mobiler Endgeräte in unser aller Leben. Grund genug also, sich mit diesem wichtigen Thema grundlegend zu befassen.

viewport

(Bildquelle: Google)

Die verschiedenen Konfigurationen für Mobilgeräte

Bei mobilen Websites unterscheidet Google insgesamt zwischen drei Konfigurationen. Dabei werden alle drei Konfigurationen von Google gleichwertig in der Platzierung in den Suchergebnissen behandelt. Die drei verschiedenen Konfigurationen sind:

  1. Responsive Design: Bei diesem von Google empfohlenen Ansatz wird unabhängig vom verwendeten Gerät derselbe HTML Code bereitgestellt. Ebenso bleibt die URL gleich. Jedoch werden Inhalte je nach Bildschirmgröße anders dargestellt oder ausgeblendet. Dies geschieht über entsprechende Befehle im CSS. So verändert sich bei der Verwendung von Responsive Design zum Beispiel die zweispaltige Darstellung  auf dem Computer in eine einspaltige Darstellung auf dem Smartphone. Dabei werden auf dem Smartphone in der Regel Inhalte aus der Hauptspalte oben und aus den Seitenleisten darunter angezeigt. Bei einer dreispaltigen Darstellung auf dem Computer kommt es durchaus vor, dass nur Inhalte von zwei Spalten im Smartphone angezeigt werden. Dies vor allem vor dem Hintergrund, um Nutzern ein nahezu endloses Scrollen zu ersparen.  Zumal sich in den Seitenleisten oftmals Informationen befinden, die auf allen Unterseiten einer Website identisch sind. Ein Umstand, der auf kleinen Bildschirmen eher nicht zu einem positiven Nutzererlebnis beiträgt.
  2. Dynamische Bereitstellung: Bei dieser Konfiguration greift Google ebenfalls auf die gleiche URL zurück. Jedoch wird an die verschiedenen Geräte ein sich voneinander unterscheidender HTML-  und CSS Code ausgeliefert. Es ist nicht sofort erkennbar, dass die Website einen anderen HTML Code bei Besuchen über mobile Endgeräte verwendet. Über einen sogenannten Vary-HTTP Header erhält der Googlebot einen Hinweis darüber, welches HTML ausgeliefert werden soll. Vary steht für Varianz – je nachdem, mit welchem Browser eine Seite aufgerufen wird, werden andere Inhalte angezeigt. Der Vary-HTTP Header sorgt unter anderem auch dafür, dass Inhalte aus dem Cache, die für den Deskop gedacht sind, nicht an mobile Endgeräte ausgeliefert werden. Außerdem unterstützt der Vary-HTTP Header den Googlebot bei der schnelleren Erkennung der Inhalte, die Sie speziell für mobile Endgeräte bereitstellen. Hinweis: Die Konfiguration als dynamische Bereitstellung ist komplex und gilt als fehleranfällige Technik. Lassen Sie sich im Vorfeld beraten, ob diese Konfiguration überhaupt für Ihr Projekt geeignet ist.
  3. Unterschiedliche URLs: Hier wird unterschiedlicher Code zu unterschiedlichen URLs wie www.beispieldomain.de und m.beispieldomain.de bereitgestellt. Über Weiterleitungen und Vary-HTTP Header sollen Nutzer auf die passenden Inhalte geführt werden. Dies geschieht mit zwei speziellen Tags. Auf der Seite für den Desktop weist der Tag rel=“alternate“ auf die entsprechende mobile Version hin. Auf der mobilen Seite weist der Tag rel=“canonical“ auf die entsprechende Desktop URL hin. Auch diese Konfiguration benötigt tieferes technisches Verständnis und wird heutzutage zunehmend von Responsive Design abgelöst. Dennoch lässt sich gerade bei größeren Auftritten und Plattformen diese Konfiguration feststellen.

Vermeiden Sie „duplicate content“ und so die Verwendung identischer Domains oder Verzeichnisse für herkömmliche und mobile Websites. Anstatt die Darstellung Ihrer Website in Abhängigkeit des anfragenden Endgerätes anders aussehen zu lassen, stellen Sie mobile Inhalte besser unter anderen URLs bereit.

Tipp: Stellen Sie Ihre mobilen Inhalte unter m.domainname.de bereit. Idealerweise strukturieren es so, dass Sie nur eine Stelle pflegen müssen.

facebook-url-mobile

So könnte bei Facebook die Nutzung der mobilen Browserversion auf Grund der zum 30. Januar 2015 eingeführten Datenrichtlinien gar eine Renaissance erleben.  Dies bei Nutzern, die speziell für Facebook einen eigenen Browser verwenden um das Ausspionieren des Surfverhaltens im Internet  – wie es bei Nutzung der Facebook-App der Fall wäre – zu verhindern.

Unsere Empfehlung: Die Umsetzung mit Responsive Design

Der Vorteil von Responsive Design liegt vor allem darin begründet, dass Sie nicht verschiedene Versionen Ihres Internetauftritts verwalten müssen. Und bei der Verwendung von einem CMS kann es sogar sein, dass Sie die Anpassungen selbst und ohne umfangreiche Programmierkenntnisse vornehmen können. Bei Google Developers gibt es dazu im Leitfaden für Mobilgeräte Handlungsoptionen zu verschiedenen CMS wie WordPress, Joomla, Drupal, Magento usw. Die Handlungsoptionen können Sie unter https://developers.google.com/webmasters/mobile-sites/website-software/?hl=de aufrufen.

Hier noch ein paar Tipps für Ihren professionellen Auftritt auf mobilen Endgeräten:

  1. Sorgen Sie dafür, dass alles wichtigen Dateien auch mobil abgerufen werden können und nicht blockiert werden. Dies können Sie in den Webmaster Tools im Abschnitt „Abruf wie durch Google“ prüfen.
  2. Verwenden Sie unter keinen Umständen Flash zur Anzeige von Videos! Das Abspielen von Flash wird im IOS Browser nicht unterstützt.
  3. Sollten Sie verschiedene URLs nutzen, so achten Sie darauf, dass mobile Nutzer nicht nur auf die Startseite geleitet werden, sondern auf die richtigen Unterseiten Ihrer Website.
  4. Prüfen Sie, ob Ihre Besucher sämtliche Handlungen bequem auch auf ihrem Mobilgerät durchführen können. Zum Beispiel: Ist das Kontaktformular so angelegt, dass es einfach zu bedienen ist? Sind wichtige Links als Schaltflächen hinterlegt, damit sie einfacher angetippt werden können? Befinden sich unten am Ende der Seite Hinweise, über die Ihre Besucher zu weiteren Informationen gelangen?

Extratipp: Finden Sie weitere Hinweise in unserem Expertentipp „10 Tipps, wie Sie Ihre Website fit machen für mobile Endgeräte“ http://blog.seitwert.de/10-tipps-wie-sie-ihre-website-fit-machen-fur-mobile-endgerate/

Sollten Sie Hilfe benötigen, um Ihren Internetauftritt für Mobilgeräte fit zu machen, so nehmen Sie gern Kontakt zu uns auf. Gern erörtern wir zusammen mit Ihnen im Gespräch die optimale Lösung für Ihr Projekt und unterstützen Sie bei der Umsetzung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.