Ein Spickzettel für mobiles Design: Responsive Design, dynamische Bereitstellung und mobile Websites

Aktualisierung des Herausgebers (Juli 2015): Im April 2015 hat Google ein vorab angekündigtes Update des Algorithmus vorgenommen, der mobile Suchergebnisse rankt. Die mobile Freundlichkeit einer Website ist ein bestätigtes Ranking-Signal für mobile Suchrankings. Beachten Sie dies und machen Sie Ihre Website mit Hilfe des folgenden Artikels mobilfreundlich.

Wir alle kennen die Statistiken: 2014 ist das Jahr, in dem mehr Menschen mit einem Smartphone auf das Internet zugreifen als mit einem Computer oder Laptop. Mobiles Design ist die Zukunft. Sie möchten nicht, dass Ihre Website auf der Strecke bleibt, aber wie genau programmieren Sie für dieses zunehmend mobile Internet? Es gibt drei Hauptoptionen, jede mit ihren eigenen Vor- und Nachteilen. In diesem Beitrag werde ich Ihre Optionen für die mobile Bereitschaft aufschlüsseln und Ihnen die Vor- und Nachteile jeder einzelnen nennen, um Ihnen bei der Auswahl des besten Wegs für Ihre Website und SEO-Strategie zu helfen.

Option 1: Responsives Design

Responsive Design bestimmt die Auflösung des Bildschirms, auf dem eine Seite angezeigt wird, mithilfe von Medienabfragen und passt dann die Größe und das Layout der Seite entsprechend an. Google hat erklärt, dass es responsives Webdesign bevorzugt, was es zum Schwergewicht in dieser Diskussion macht.

Vorteile :

1. Es gibt nur eine Version jeder Seite. Dieselbe Seite passt sich an den Gerätetyp an, auf dem sie angezeigt wird (anstatt den Gerätetyp zu erkennen und darauf basierend unterschiedliche Inhalte bereitzustellen). Der gleiche HTML-Code und die gleiche URL auf allen Geräten vereinfachen die Wartung Ihrer Website.
2. Responsive Design verlässt sich nicht auf die Erkennung von Benutzeragenten, wie dies bei den beiden anderen Optionen der Fall ist. Die User-Agent-Erkennung (dh zu erkennen, welcher Browser oder welches Gerät eine Webseite anfordert) ist an sich nicht schlecht, aber nicht perfekt, und wenn im Prozess ein Fehler auftritt, wird Benutzern möglicherweise die falsche Version Ihrer Website angezeigt. Darüber hinaus erspart dies den Suchmaschinen-Spidern, Ihre Website als mehrere verschiedene User-Agents zu crawlen – was bedeutet, dass mehr von Ihrer Website gecrawlt wird.
3. Responsive lädt im Allgemeinen schneller in Browsern. Da alle Geräte den gleichen Inhalt erhalten, gibt es keinen Prozess der Anfrage-Benutzer-Agent-Erkennung-mögliche Umleitung. Und wer schon einmal hungrig auf dem Smartphone nach einem guten Restaurant gesucht hat, weiß: Schnelligkeit zählt.

Nachteile:

1. Es kann ein langer und intensiver Prozess sein, eine bestehende Website neu zu gestalten. Wenn Sie also eine große Website haben, ist die Umstellung auf Responsive möglicherweise nicht die beste Wahl.
2. Je nach Layout Ihrer Website kann es einfach zu schwierig sein, die Inhalte auf einen mobilen Bildschirm zu packen. Websites wie NYTimes.com unterhalten separate mobile Websites, da es einfacher ist, den Inhalt aufzuteilen, als ihn auf einer einzigen Seite zusammenzufassen.
3. Navigationselemente passen die Größe nicht immer gut an; Hover-Over-Elemente funktionieren auf einem Touchscreen überhaupt nicht. Responsiv zu werden kann also bedeuten, dass Sie Ihre Navigation ändern müssen.
4. Es gab Fälle, in denen responsive Seiten mit vielen Bildern mit responsivem Design langsamer geladen wurden. Ich möchte betonen, dass dies nicht die Norm ist, aber es ist passiert.

Wenn Sie sich für ein responsives Design entscheiden, denken Sie daran, dass Sie Ihre Bilder optimieren und Ihre Website auf verschiedenen Browsern und Geräten testen (oder einen guten User-Agent-Emulator verwenden) sollten, bevor Sie sie live schalten.

Option 2: Dynamische Bereitstellung

Dynamisches Serving, manchmal auch als User-Agent-„Sniffing“ bezeichnet, kann auf zwei Arten erfolgen und ist schwierig zu implementieren. Tatsächlich beschreibt Google einige häufige Fehler, die beim dynamischen Serving gemacht werden. Diese Technik erkennt den User-Agent eines Besuchers (d. h. welches Gerät er verwendet, um Ihre Website anzuzeigen) und leitet ihn dann auf Serverebene weiter . Eine Möglichkeit, dynamisches Serving zu implementieren, ist die unidirektionale Weiterleitung , bei der Links zu einer Website standardmäßig auf die Desktop-Website verweisen, Mobilgeräte jedoch von der Desktop-Website auf die mobile Website umgeleitet werden.

Der zweite Typ, die bidirektionale Weiterleitung , verfügt sowohl auf der Desktop- als auch auf der mobilen Website über Code, der sicherstellt, dass jedem Besucher, unabhängig vom Gerät, der richtige Inhalt angezeigt wird. (Diese Codeteile werden manchmal Switchboard-Tags genannt.) Implementierung bedeutet, dass ein rel="alternate"-Tag auf dem Desktop platziert wird, das auf die mobile Website verweist; und auf der mobilen Seite ein rel="canonical"-Tag einfügen, das auf die Desktop-Seite verweist.

Vorteile:

1. Da die Umleitung auf Serverebene erfolgt, benötigen Sie nur eine URL pro Seite.
2. Dynamisches Serving funktioniert auch gut für Feature-Phones . Wie von PCMag.com definiert, ist ein Feature-Phone ein „Mobiltelefon, das über Sprachanrufe und Textnachrichten hinaus einen festen Satz von Funktionen enthält, aber nicht so umfangreich wie ein Smartphone ist“. Beispielsweise können Feature-Phones in der Regel keine Apps herunterladen, verfügen jedoch normalerweise über eine gewisse Webbrowsing-Funktion. Laut Google besteht der größte Unterschied darin, dass Feature-Phones kein CSS verarbeiten können, sodass sie mit responsivem Design nicht sehr gut umgehen können. Daher ist es wichtig, Ihr Publikum zu kennen und zu wissen, welche Art von Mobilgeräten es verwendet.
3. Wenn Sie einen separaten Satz von Schlüsselwörtern speziell für Ihre mobilen Benutzer haben möchten, können Sie dies mit dieser Option tun, da mobile Benutzer und Desktop-Benutzer jeweils unterschiedliche HTML sehen. (Search Engine Land hat einen großartigen Artikel, der mobilspezifische Keywords behandelt.)

Nachteile:

1. Die dynamische Weiterleitung verdoppelt Ihre Website-Wartungsarbeit, da sie eine separate Website für Mobilgeräte mit einem separaten Satz von indiziertem HTML einrichtet, der ein separates SEO-Projekt erfordert.
2. Auch die notwendige Liste von User-Agent-Strings erfordert eine ständige Pflege, da bei jeder Veröffentlichung eines neuen Mobilgeräts neue Strings hinzugefügt werden müssen.
3. Denken Sie schließlich daran, dass Sie einen „Vary HTTP-User Agents“-Header verwenden müssen, wenn Ihre Website Inhalte dynamisch bereitstellt. Der Header trägt dazu bei, dass Inhalte richtig bereitgestellt werden, und hilft Engines, sie richtig zwischenzuspeichern. Google hat Details zum Hinzufügen dieses Headers.

Option 3: Eine mobile Website

Bei dieser Option wird, wie der Name schon sagt, eine separate Domain speziell für mobile Benutzer erstellt. Die häufigsten Beispiele sind m.domain.com oder mobile.domain.com . Es ist eine beliebte Option für große Einzelhändler; Bridget Randolph weist darauf hin, dass „73 % der Websites, die in den Quantcast-Top-100.000-Sites rangieren, URL-Umleitungen zu einer für Mobilgeräte spezifischen URL verwenden.“ Wie beim Dynamic Serving beinhaltet diese Technik die Entwicklung von Inhalten speziell für Besucher, die ein mobiles Gerät verwenden; Die URLs einer separaten mobilen Website sind jedoch unterschiedlich, sodass es keine Umleitung auf Serverebene gibt.

Vorteile:

1. Bei größeren Websites mit Seitenzahlen in Hunderttausenden oder Millionen kann die Implementierung von Responsive Design einfach zu viel Arbeit sein. Mit einer mobilen Website können Sie die Benutzererfahrung individuell anpassen und langsam eine einzigartige mobile Erfahrung aufbauen.
2. Wie die dynamische Bereitstellung eignet sich eine mobile Website besser für Feature-Phones als für ein responsives Design. Je nach demografischen Merkmalen Ihrer Website ist dies möglicherweise kein Kriterium. Für einige Unternehmen ist dies jedoch eine wichtige Überlegung.

Nachteile :

1. Ihre mobile Website profitiert nicht von einem positiven Backlink-Profil, das Ihre Desktop-Website aufgebaut hat (es sei denn, Sie implementieren bidirektionale Weiterleitungen). Wenn Sie also versuchen, Ihre mobilen Benutzer dazu zu bringen, Sie in der organischen Suche zu finden, kann dies ein echter Rückschlag sein.
2. Ihre mobile Website erfordert zusätzliche SEO-Arbeit. Sie müssen eine separate XML-Sitemap an die Google- und Bing-Webmaster-Tools senden. Außerdem bedeuten kleinere Bildschirme kleinere SERPs, sodass Sie möglicherweise Ihre Meta-Tags bearbeiten müssen. Mobile-spezifische Meta-Tags sollten kürzer sein als die für eine Desktop-Site.

Wie Sie sehen können, wurde der Inhalt dramatisch neu formatiert und reduziert, um ihn auf einem mobilen Gerät lesbar zu machen.

Wenn Sie all diese Informationen durchgehen, um die richtige Wahl für Ihre Website zu treffen, vergessen Sie nicht, sich zu fragen, wie viele Ihrer Besucher mobile Geräte verwenden, um auf die Website zuzugreifen. Überprüfen Sie Ihre Analysen. Wenn der Gesamtprozentsatz des mobilen Traffics unter fünf Prozent liegt, können Sie wahrscheinlich mit der Implementierung des mobilen Designs warten. Zur Zeit. Wenn die Vorhersagen stimmen, wird die mobile Nutzung immer mehr Internet-Traffic beanspruchen.

Für Informationen darüber, wie Sie Ihre Seiten für Geschwindigkeit und mobiles SEO optimieren können, empfehlen wir, mit diesen Ressourcen zu beginnen:

• Die All-In-One Mobile SEO & Design-Checkliste
• 7 Best Practices für mobilfreundliche Navigation
• SEO-Leitfaden: Mobile SEO und UX-Optimierung
• Bildoptimierung: Die Nr. 1, die Sie tun können, um die mobile UX zu verbessern
• Webmaster's Mobile Guide von Google Developers