Mobile Webseiten – Warum sie so wichtig sind

Um in der heutigen Zeit vorne mitzuspielen, ist es wichtig, den neuesten Trends zu folgen. Dazu gehören auch die Trends und Technologien, die Suchmaschinen wie Google vorgeben und kontinuierlich weiterentwickeln. Im Folgenden erfährst Du warum mobile Webseiten so wichtig für Dich sind:

• Was versteht man unter guten mobilen Webseiten?
  • Mobile Webseiten zur Neukundengewinnung
• Wie funktionieren mobile Webseiten nach dem Mobile First Prinzip?
• Wie baut man moderne mobile Webseiten auf?
• Worauf sollte man bei mobilen Webseiten heute achten?

Der Mobile First Index

Einer dieser technologischen Trends ist der Mobile First Index. Mit dieser Bevorzugung von mobilen Webseiten richtet Google sein Augenmerk auf Webseiten, die mobil optimiert sind. Der Hintergrund: Um Webseiten für den mobilen Einsatz zu rüsten, fehlen häufig Inhalte auf den für mobile Endgeräte optimierten Webseiten. Da die meisten Anfragen bereits auf mobiler Ebene erfolgen, richtet Google seinen Fokus auf entsprechende Webseiten. Jeder User soll auf einem seiner mobilen Endgeräte dasselbe wie auf einem PC oder Mac sehen. Unter mobilen Endgeräten versteht man beispielsweise Smartphones und Tablets.

Mobile Webseiten nehmen einen immer größeren Stellenwert ein – nicht nur bei Google, sondern vor allem auch bei Nutzern, die täglich im Internet unterwegs sind. Das Nutzerverhalten hat sich in Richtung „mobil“ weiterentwickelt. Immer mehr Nutzer greifen auf Endgeräte wie Smartphones oder Tablets zurück. Das Smartphone ist der ständige Begleiter. Mobiles Internet ist deutlich gefragter als die Suche über den Desktop. Da ist es wichtig, dass Webentwickler Seiten erschaffen, die auf das jeweilige Endgerät und die Bildschirmgröße angepasst sind. Mobile Webseiten müssen ein Responsive Design aufweisen. Die Ansicht muss also auf unterschiedlichen Bildschirmen gleichermaßen gut funktionieren. Für mobiles Internet muss daher eine Webseite zur Verfügung stehen, bei der die Loading Time möglichst kurz ist. Mit den Inhalten muss sorgsam umgegangen werden, sodass die Website Performance nicht darunter leidet. Das Ziel ist eine Webseite, die für Mobilgeräte optimiert ist und auf diversen Endgeräten gleichermaßen korrekt angezeigt wird.

Was versteht man unter guten mobilen Webseiten?

Eine mobile Webseite sollte mit denselben Inhalten wie die Desktop Variante aufwarten. Die Kunst liegt in der Verpackung. Eine korrekte Darstellung aller mobilen Inhalte sowie die Nutzerfreundlichkeit liegen an oberster Stelle. Die mobile Webseite wird dabei genauso attraktiv dargestellt wie das PC Pendant. Eine Webseite, die für Mobilgeräte angepasst ist, bietet zudem eine kurze Page Load Time. Nur dadurch ist gewährleistet, dass die Seite auch während mobiler Aktivitäten schnell lädt. Ist dies nicht der Fall, erhöht sich aller Voraussicht nach die Absprungrate. Bietet die Webseite uneingeschränkten Zugriff für verschiedene Endgeräte, ist das ein Indikator für ein gutes Design. Und eine wichtige Voraussetzung für eine gute User Experience.

Ein wichtiger Aspekt bei der Entwicklung mobiler oder responsive Webseiten ist das Webdesign. Mithilfe von Prototyping Software lässt sich ein auf die Wünsche des Designers und die User Bedürfnisse zugeschnittenes Webdesign bewerkstelligen, das auch den zukünftigen Nutzern zugute kommt.

Um das Webdesign voranzubringen, sind allerdings weitere Elemente erforderlich. Entsprechende Hilfsmittel finden sich in Form von Media Queries wieder. Diese sorgen für responsive Webdesign und lassen sich entweder direkt in ein Template einbinden oder in einer separaten Stylesheet Datei abspeichern. Übersichtlicher ist es, wenn die Media Queries nicht direkt in der HTML beziehungsweise PHP Datei untergebracht sind, sondern stattdessen eine entsprechende Stylesheet Datei zum Einsatz kommt.

Um die Ladezeit einer Webseite zu messen, gibt es verschiedene Dienste. Diese zeigen auf, wie schnell eine Seite geladen wird. Eine Liste von ausgewählten Diensten findest Du hier:

• Google PageSpeed Insights
• Pingdom
• GTmetrix
• WebPageTest

Diese Webseiten zeigen an, wie schnell eine Seite geladen und auf verschiedenen Browsern angezeigt wird. Einige der Daten lassen sich ideal zur PageSpeed Optimierung einsetzen. Um herauszufinden, wie Deine Webseite auf verschiedenen Geräten angezeigt wird, empfehlen sich folgende Webseiten:

Responsive Check Center
Google: Test für Mobilgeräte

Mobile Webseiten zur Neukundengewinnung

Eine Webseite, die für mobile Endgeräte optimiert ist und auf allen Geräten mit identischen Inhalten aufwartet, eignet sich ebenfalls zur Neukundengewinnung. Eine mobil optimierte Webseite macht einen guten und sicheren Eindruck und trägt enorm zur Customer Journey sowie Nutzerfreundlichkeit bei. Auch hier ist der Einsatz mobiler Webseiten enorm wichtig.

Wie funktionieren mobile Webseiten nach dem Mobile First Prinzip?

Das Mobile First Prinzip ist schnell erklärt: Bei der Indexierung schaut sich Google mobile Webseiten zuerst an. Das heißt, fehlen auf der mobilen Seite möglicherweise Inhalte, die auf PC Browsern vorhanden sind, könnte sich dies negativ auf das Google Ranking auswirken. Dadurch ist eine geringere Positionierung der kompletten Seite in den organischen Suchergebnissen wahrscheinlich. Eine gute mobile Webseite erhöht das Webseiten Ranking allerdings kaum. Dazu gehören andere wichtige Elemente wie das On Page und Off Page SEO. Mobile Webseiten sollten demnach so angepasst sein, dass diese ihrem PC Pendant entsprechen.

Wie baut man moderne mobile Webseiten auf?

Neben den gebräuchlichen responsive Webseiten trifft man auch heute noch auf eigenständige mobile Webseiten. Diese verfügen in der Regel über eine Subdomain, die häufig mit https://m.domain.com in Erscheinung treten. Dabei handelt es sich um mobile Webseiten, die ein anderes Prinzip nutzen. Im Gegensatz zu responsive Webseiten, nutzen diese Seiten ein eigenständiges Design sowie eine separate URL. Erkennt das System ein Smartphone oder andere mobile Endgeräte, so stellt der Server automatisch die auf diese Endgeräte programmierte Webseite zur Verfügung. Es findet demnach beim Anklicken solch einer Seite eine Weiterleitung statt.

Die Nachteile solch mobiler Webseite liegen auf der Hand: Es reicht nicht aus, hier und da etwas CSS Code anzupassen. Responsive Webseiten warten dahingegen mit einem Webdesign auf, das CSS Code sowie CSS Media Queries nutzt. Dadurch lassen sich Änderungen schnell und effizient vornehmen. Eine eigene Subdomain muss es dabei nicht geben. Die Queries schalten sich sofort dazu, sobald eine bestimmte Auflösung Verwendung findet. Bei Geräten mit einer Auflösung von 600 Pixeln kommen dann die Anpassungen zum Einsatz, die für diesen Media Querie festgestellt wurden.

Eine moderne Webseite, die für Mobilgeräte optimiert ist, sollte darüber hinaus auf die Originalseite verweisen. Gibt es zwei URLs, über die dieselben Inhalte abrufbar sind, könnte Google dies als Duplicate Content identifizieren und abstrafen. Um diesem Problem vorzubeugen, ist der Einsatz von kanonischen URLs (Canonical URL) zwingend erforderlich. Mithilfe des Tags und der Elemente rel=“canonical“ und rel=“alternate“ erkennen Suchmaschinen doppelte oder identische Webseiten. Sie strafen die Page nicht wegen Verletzung aufgrund von Duplicate Content ab. Inhalte sollten nämlich einzigartig und einmalig sein.

Annotationen

Auf der Desktop Seite könnte eine sogenannte Annotation so aussehen:

ALTERN.:

Die Desktop Seite verweist auf die „alternative“ Seite, die für mobile Endgeräte optimiert ist. Außerdem wird hier die maximale Bildschirmgröße angegeben. Auf mobilen Geräten mit einer Auflösung bis 640 Pixel verweist das System in diesem Fall auf die mobile Webseite.

Im HTML Code der responsive Webseite steht dann zum Beispiel:

CANON:

Es handelt sich dabei um einen Verweis auf die Desktop Seite. Der Verweis ist obligatorisch. Sonst könnten Suchmaschinen die Webseite wegen Duplicate Content abstrafen.

Um bei verschiedenen Geräten eine Skalierbarkeit zu erlauben, eignet sich folgender Code für den Header Bereich einer Webseite:

META:

Befindet sich in dieser Meta Angabe lediglich „initial-scale=1.0“, so wird auf mobilen Geräten die Standardansicht dargestellt. Nur die Zusätze „user-scalable=no“ sowie zum Beispiel „maximum-scale=2.0“ ermöglichen bei den Geräten das Hereinzoomen. In diesem Fall eine zweifache Vergrößerung. Das ist insofern wichtig, da die Darstellung der Schrift bei den zahlreich vorhandenen Geräten variiert. Um dem vorzubeugen, gibt es diese Möglichkeit zur Skalierbarkeit. Bei den Endgeräten wären die User sonst auf die zur Verfügung stehende Bildschirmgröße eingeschränkt.

Auf mobilen Endgeräten erscheint eine responsive Website eingepasst. Das Scrollen nach links und rechts sollte demnach nicht möglich sein. Die Inhalte erscheinen auf mobilen Endgeräten untereinander, sodass das Verlorengehen von Inhalten unterbunden wird. Stattdessen ist der Content auf Mobilgeräte zugeschnitten. Dazu gehören auch Buttons und weitere Bedienelemente für Links.

Worauf sollte man bei mobilen Webseiten heute achten?

Die damals gängige Praxis, mobile Websiten auf einer Subdomain zu hosten, ist nur noch selten anzutreffen. Stattdessen setzen professionelle Webentwickler auf ein modernes Webdesign, das sich CSS Media Queries zunutze macht. Diese Media Queries sind Teil des Webdesigns und lassen sich durch Dateien mit der Endung .css in die Webseite integrieren.

Da sich die CSS Dateien in der Regel an einem zentralen Ort befinden, kann der Webmaster schnell darauf zugreifen. Die entsprechenden Anpassungen der Media Queries erfolgen dann leichter. Dadurch ist ein schneller Workflow gewährleistet und bietet einen essentiellen Vorteil gegenüber mobiler Webseiten, die auf eine andere Lösung setzen.

Durch CSS Media Queries lassen sich Inhalte individuell für jede Bildschirmgröße steuern. Damit bieten diese Queries bei diversen Bildschirmen ein Bild, das an die jeweilige Auflösung angepasst und korrekt dargestellt wird. Je nach Seiteninhalt lädt diese Seite dann zügig. Teil des Webdesign sollte zudem sein, auf die Größe der verschiedenen Elemente zu achten, damit die Ladezeiten gering bleiben. Dadurch und durch den Einsatz von Caching erscheint der Seiteninhalt beim Anklicken schnell. Mobiles Internet bedarf demnach einer intensiven Pflege. Nur dadurch ist gewährleistet, dass die Seiten auch in Zukunft für mobile Webseiten gerüstet bleiben.

Keine separate URL für die mobile Webseite!

Neben den üblichen SEO Maßnahmen, zu denen auch On page SEO gehört, zählt zu den Maßnahmen im Online Marketing auch das Off Site SEO. Eine mobile Webseite, die auf eine separate URL setzt, hat hierbei Nachteile. Der Desktop Nutzer hat nämlich nur den Link zur mobilen Webseite. Beim Anklicken auf diesen Link, leitet das System oftmals auf die mobile Webseite und nicht auf die Desktop Seite. Das Ergebnis ist eine Webseite, die möglicherweise bei diversen Endgeräten nicht korrekt dargestellt wird.

Hoffentlich hat Dir dieser Beitrag weitergeholfen. Falls Du immer noch Fragen hast, nimm gerne Kontakt mit uns auf. Responsive Design für mobile Webseiten kannst Du auch in unserer GRATIS Sichtbarkeitsanalyse besprechen. Aber Du bekommst auch viele weitere praktische Optimierungstipps.