Zurück zur Übersicht

Inhalt

Artikel teilen

Beliebte Beiträge

Mobile Optimierung

Responsive Design, dynamische Bereitstellung und unterschiedliche URLs im Überblick

Letzte Woche haben wir bereits darüber berichtet, dass Google den Mobile-Index zum Hauptindex macht: „MOBILE FIRST“ IM GOOGLE-INDEX
Heute soll es darum gehen, welche Möglichkeiten Sie haben, Ihre Seite für Mobilgeräte zu optimieren.

Inhalt

Fakten

  1. 49 Millionen Menschen besitzen in Deutschland ein Smartphone – Tendenz steigend.
  2. Bei Google kommen über 50% der Suchanfragen vom Handy.
  3. In Japan und Großbritannien wird jetzt schon mehr über mobile verkauft, als über den Desktop. In Deutschland finden ca. 37% der Online-Käufe über das Handy statt und natürlich wird mehr mobil gekauft, wenn die Seiten mobile freundlich gestaltet sind.

Fazit: Durch die vermehrte Nutzung von Smartphones bei der Suche, als auch bei den Onlinekäufen, sowie der Tatsache, dass der mobile Index zum Hauptindex wird, hat man als Unternehmen langfristig eigentlich nicht mehr die Wahl, ob man seine Seite für mobile Geräte optimiert oder nicht. Eine Website die nicht für mobile Endgeräte optimiert ist, stellt einen enormen Wettbewerbsnachteil dar.

Wann ist eine Seite mobile friendly?

Da der Bildschirm eines Smartphones viel kleiner ist als bei einem Desktop, muss bei der mobilen Version einer Website auf einiges geachtet werden, damit die User Experience auf dem Smartphone positiv ist.

  • Inhalte müssen so angeordnet sein, dass der Besucher auch auf dem Handy nicht nach rechts und links scrollen muss.
  • Die Schrift muss groß genug sein, so dass sie ohne zoomen gut lesbar ist.
  • Verlinkungen müssen für den Nutzer gut klickbar sein.
  • Die Seite darf kein Flash beinhalten (Flash dient der Programmierung und Darstellung multimedialer und interaktiver Inhalte wie Intro, Werbebanner, Menü, Spiel, als Videoplayer).

Testen Sie selbst, ob Ihre Seite für mobile Geräte optimiert ist

Hier können Sie selber testen, ob Ihre Seite bzw. Ihr Online-Shop für mobile Endgeräte optimiert ist oder nicht.
Einfach die URL eingeben und auf „Analysieren“ klicken:
https://www.google.com/webmasters/tools/mobile-friendly
Ist Ihre Seite aus Google’s Sicht nicht optimal für mobile Endgeräte, bekommen Sie dafür auch Gründe genannt, z.B. „Der Text ist zu klein und daher schwer lesbar“ sowie Vorschläge für die Optimierung.

 

Drei Möglichkeiten für mobile Optimierung

Ist das Ergebnis des Tests negativ ausgefallen? Dann haben Sie drei Möglichkeiten Ihre Seite für mobile Geräte zu optimieren:

  1. Responsive Design
  2. Dynamische Bereitstellung/Dynamic Serving
  3. Unterschiedliche URLs

Responsive Design

Was versteht man unter einem responsive Design?

Egal von welchem Gerät die Seite aufgerufen wird, der Besucher sieht die gleiche URL und es wird der gleiche HTML-Code bereitgestellt, die Inhalte können aber je nach Bildschirmgröße variieren, dies wird mit CSS umgesetzt.

Wichtig für die Suchmaschinenoptimierung

Google erkennt die Konfiguration in der Regel automatisch. Wichtig dafür ist aber, dass alle Googlebots berechtigt sind, die Seite und ihre Assets, also CSS, JavaScript und Bilder, zu crawlen.
Wie die Abmessungen und die Skalierung der Seite auf die Breite des Geräts angepasst werden sollen, kann man aber dem Browser mit dem Meta-Tag „viewport“ im Header signalisieren:
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>

Vorteile eines Responsive Designs

  • Es gibt nur eine URL: Das ist gut, wenn die Seite z.B. verlinkt/geteilt wird.
  • Es gibt nur einen HTML-Code: Auf Dauer ist weniger Programmierungszeit/Pflege nötig und somit auch weniger Kosten.
  • Nicht so Fehler anfällig.
  • Schnelle Implementierung.
  • Gut für SEO: Google sieht das als bevorzugten Ansatz, da der Crawler Ressourcen spart. So werden mehr Inhalte indexiert und aktuell gehalten.

Nachteile eines Responsive Designs

  • Nicht geeignet für sehr große Websites.
  • Eher eine Kompromisslösung, da Design und Funktion sowohl für Desktop, als auch für Mobile passen muss.
  • Nicht optimal für Feature Phones , da diese kein CSS unterstützen.
    (Feature Phones: Besitzen im Vergleich zu einem Smartphone weniger Rechenkapazitäten und einen geringeren Funktionsumfang, sind dafür günstiger und haben mehr Funktionen als ein herkömmliches Mobiltelefon, vor allem verbreitet in Schwellenländern).

Tool Tipp:
Wie eine Seite im responsiv Design auf den unterschiedlichen Geräten aussieht kann man gut mit „Am I responsive“ sehen:
Ein cooles Tool, da man hier alle Endgeräte auf einem Blick hat und sogar in den einzelnen Versionen scrollen kann. Allerdings ist es für genauere Analysen etwas klein.

Dynamische Bereitstellung/Dynamic Serving

Was versteht man unter einer dynamischen Bereitstellung?

Bei der dynamischen Bereitstellung einer mobilen Version sieht der Besucher zwar immer die gleiche URL, aber je nach Gerät unterscheidet sich der HTML- und CSS-Code.
Der Server entscheidet auf Basis eines Vary HTTP Headers welchen Quellcode und Cache er ausgibt.

Wichtig für die Suchmaschinenoptimierung

Der Vary HTTP Header unterstützt auch den Googlebot bei der Erkennung optimierter Inhalte für mobile Geräte.

Vorteil einer dynamischen Bereitstellung

  • Es gibt nur eine URL.
  • Weiterleitungen und Redirects sind überflüssig.
  • Man kann sich bei Design und Funktion voll auf mobile Geräte konzentrieren.
  • Hoher Pagespeed.
  • Gut für Feature Phones, da kein CSS genutzt werden muss.

Nachteil einer dynamischen Bereitstellung

  • Der Browser muss die richtigen Infos über das Endgerät an den Server senden – das klappt nicht immer einwandfrei.
  • Meist teurer als ein responsives Design, da ein hoher technischer Aufwand nötig ist.

Unterschiedliche URLs

Was versteht man unter unterschiedlichen URLs?

Man kann die mobile Version einer Website auch unter einer anderen URL zur Verfügung stellen, als die Desktopversion. Unter verschiedenen URLs hat man dann unterschiedlichen HTML-Code.

www.beispieldomain.de und m.beispieldomain.de

Bei dieser Möglichkeit wird versucht, das Gerät des Nutzers zu erkennen und mit Hilfe dieser Information, durch HTTP-Weiterleitungen und Vary HTTP Header, den Nutzer auf die passende Seite zu führen.

Wichtig für die Suchmaschinenoptimierung

Um doppelten Content zu vermeiden, benötigt man zwei Tags: Rel=“alternate“ verweist von der Desktop-Version auf die mobile Version. Der Tag rel=“canonical“ weist von der mobilen Version auf die Desktop-Version.

Vorteile von unterschiedlichen URLs

  • Man kann sich bei Design und Funktion voll auf mobile Geräte konzentrieren.
  • Gut für Feature Phones, da kein CSS.
  • Gut bei größeren Auftritten und Plattformen.

Nachteile von unterschiedlichen URLs

  • Hoher Arbeits- und Verwaltungsaufwand, da man „zwei“ Seiten pflegen muss – viel Budget und Kapazität nötig.
  • Google-Bot hat künftig mehr Crawlaufwand.

Übersicht der Vor- und Nachteile

Die Übersicht zeigt, dass jede Umsetzung Vor- und Nachteile hat. Welches die beste mobile Optimierung für Sie ist, hängt auch vom CMS, Online-Shop System usw. ab.
Um die für Sie beste Lösung zu finden, setzen Sie sich am besten direkt mit uns in Verbindung.

 

 

Quellen:
https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=de
https://de.statista.com/statistik/daten/studie/198959/umfrage/anzahl-der-smartphonenutzer-in-deutschland-seit-2010/
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
http://www.theverge.com/2015/10/8/9480779/google-search-mobile-vs-desktop-2015
http://www.clickseed.com/responsive-design-vs-separate-mobile-site-vs-dynamic-serving/
https://de.onpage.org/wiki/Dynamic_Serving

Online Marketing Team
Unser Team aus Expert:innen steht Ihnen zu allen Fragen rund ums Online Marketing zur Verfügung.

Weitere Artikel, die Sie interessieren könnten

WordPress Cookie Plugin von Real Cookie Banner