Webseiten auf dem Smartphone – warum die mobile Darstellung so wichtig ist

Die Entwicklung und der Verkauf von Smartphones boomt. Im Jahr 2018 wurden weltweit 1,4 Milliarden Smartphones verkauft. Die Geräte sind für die multimediale Nutzung gedacht, also eben auch für das Internet. Die mobile Datennutzung ist allein von 2012 bis 2014 von 35 auf 69 Prozent gestiegen, Tendenz steigend. Die meisten Funktionen, die über das Smartphone genutzt werden, sind Streaming Dienste wie Spotify, Apps wie Facebook oder Spiele. Auch Google und der gängige Webbrowser werden immer häufiger über das Handy bedient. Erfahre hier, warum es wichtig ist, dass die Darstellung Deiner Website auf mobilen Endgeräten optimal angepasst ist.

Desktop und Mobil

Dass Computer und das Internet in unseren Alltag integriert wurden, ist noch gar nicht so lange her. Erst zu Beginn der 1990er Jahre hielt das Internet in private Haushalte Einzug. Damals waren Webseiten noch sehr simpel aufgebaut und die Geschwindigkeit der Internetverbindung im Vergleich zu heute extrem langsam.

Die Webseiten früher zeigten meist nur Text, selten Bilder und verfügten über keine oder nur wenige Unterseiten. Mit der Zeit wurde die Programmierung komplexer und die Möglichkeiten vielfältiger. Animationen und Grafiken oder andere Schriftarten stachen besonders ins Auge. Mehr Funktionen wurden erschlossen und ausprobiert.

Die meisten Webseiten wurden seither ausschließlich für Desktop-PCs programmiert, da man das Internet bei der Arbeit oder zu Hause nutzte. Dieses Vorgehen ist auch heute bei vielen Webdesignern noch üblich, jedoch nicht unbedingt sinnvoll.

Du willst sehen, wie Homepages früher ausgesehen haben? Ein gemeinnütziges Projekt für die Archivierung des Internets aus Amerika stellt die Wayback Machine zur Verfügung. Mit diesem Tool kann man auf eine Vielzahl von Webseiten-Screenshots zugreifen und sich die Geschichte der Desktop-Varianten ansehen. Über 336 Milliarden verschiedene Webseiten und ihre Historien lassen sich mit diesem Tool entdecken.

Die Einführung der mobilen Ansicht

Bereits in den 1980er Jahren war es technisch möglich, über mobile Geräte auf das Internet zuzugreifen. Dies beschränkte sich allerdings hauptsächlich auf E-Mails. Die mobile Datennutzung war damals noch sehr teuer und wurde daher von Privatpersonen kaum bis gar nicht genutzt. In den 1990er Jahren war es mit moderneren Geräten möglich, das Internet unterwegs zu nutzen. Die Datenverbindung war noch sehr langsam und eine Nutzung des Webs wie wir sie heute betreiben undenkbar. Versuchte man zu dieser Zeit über ein Mobiltelefon eine Website zu öffnen, gestaltete sich dies recht schwierig, da die Internetseiten für das mobile Datennetz und die kleinen Displays nicht geeignet waren. Vereinzelt gab es Webseiten, die von Grund auf für mobile Geräte ausgelegt waren, diese stellten aber eine Seltenheit dar.

Mit der Entwicklung von Smartphones und Tablets schritt auch die Programmierung der mobilen Ansicht von Webseiten voran. Vorreiter für Handys mit einer Multitouch-Bedienoberfläche war das iPhone, das im Jahr 2007 auf den Markt gebracht wurde. Seitdem hat sich sowohl das Nutzerverhalten als auch die Programmierung von Webseiten stark verändert.

Die Wichtigkeit der mobilen Darstellung

Die Optimierung Deiner Webseite für die mobile Darstellung ist aus mehreren Gründen wichtig. Im Jahr 2017 kamen bereits 57% der Suchanfragen bei Google und Co. über Smartphones und Tablets. Dies gilt besonders für lokale Anfragen, also wenn jemand nach Geschäften oder Restaurants in seiner Umgebung sucht. Insgesamt werden die größten Datenmengen – sowohl mit mobilem Datenvolumen als auch im WLAN – über Smartphones verzeichnet. Die Internetnutzung auf Tablets nimmt ebenfalls zu. Im Vergleich zu Laptops sind Tablet-PCs leichter und kleiner, haben oft eine längere Akku-Laufzeit und können mit einer externen Tastatur ähnlich wie ein Computer genutzt werden. Diesem Trend folgend, ist es also wichtig, dass Deine Website auf mobilen Geräten optimal angezeigt wird. Das hat verschiedene Gründe.

Nutzerfreundlichkeit

Vor allem jüngere Internet-Nutzer recherchieren vermehrt über das Smartphone. Sie schließen eher Käufe ab, wenn die mobile Internetpräsenz eines Anbieters überzeugend und einfach zu bedienen ist. Menschen entscheiden in der Regel innerhalb von 10 Sekunden, ob sie auf einer Homepage bleiben oder nicht.

Sowohl auf einfachen Webseiten als auch in Onlineshops ist eine gute Usability auf mobilen Endgeräten enorm wichtig. Die Navigation erfolgt über das Touchpad oder sogar per Spracheingabe. Alle Inhalte sollten daher gut lesbar sein. Buttons zu anderen Unterseiten, zum Kontaktformular oder für den Warenkorb müssen klar zu erkennen und klickbar sein. Das Display eines Smartphones oder Tablets ist viel kleiner als das eines gewöhnlichen Desktop-PCs. Dementsprechend muss das Design einer Website angepasst werden. Auch wichtig zu wissen: Smartphones können in der Regel kein Flash oder Java darstellen. Ist auf Deiner Homepage beispielsweise eine Flash-Animation eingebunden, kann sie mobil nicht angezeigt werden.

Google Ranking

Früher orientierte sich das Ranking bei Google an der Desktop-Version von Webseiten. Mit zunehmender Internetnutzung auf mobilen Geräten hat sich dies geändert. Durch diesen Wandel beurteilte der Google-Algorithmus die Seiten besser, die über eine mobile Variante verfügten. Mittlerweile gibt es den sogenannten „Mobile First Index“. Das bedeutet, dass jede Seite anhand von Inhalten der mobilen Version gerankt wird. Das gilt auch für die Desktop-Website. Mehr zum Ranking-Verfahren und dem Mobile First Index erfährst Du in unserem Blogbeitrag „Google Mobile: Was bedeutet der Mobile-First-Indey für meine Website?“.

Wenn Deine Website gut bei Google ranken soll, ist die Optimierung oder das Anlegen einer mobilen Darstellung notwendig. Wieso das Google Ranking eine wichtige Rolle für Dein Unternehmen spielt, liest Du in unserem Blogbeitrag „Darum sollte SEO nicht vernachlässigt werden“.

Responsive Design oder mobile Website?

Um dem User ein bestmögliches Nutzererlebnis am Smartphone oder Tablet auf Deiner Website zu bieten, gibt es verschiedene Möglichkeiten. Es kann beispielsweise eine eigenständige mobile Version der Desktop-Variante angelegt werden. Auf diese wird der Nutzer umgeleitet, wenn er Deine URL auf mobilen Geräten eingibt oder anklickt. Diese kennzeichnet sich in der Regel durch ein m. vor der Domain.

Die mobile Seite

Eine mobile Website kann vorteilhaft sein, weil die Programmierung von Grund auf an Mobilgeräte angepasst ist. Allerdings bist Du bei der dargestellten Größe der Seite vergleichsweise eingeschränkt. Smartphones, Tablets, Phablets, Netbooks – all diese Geräte gelten als mobile Endgeräte und haben eines gemeinsam: Sie haben verschiedene Displaygrößen. Mit einer Programmierung einer mobilen Webseite reduziert man die Desktop-Seite auf eine bestimmte Größe. Die Seiten sind dann von Smartphones und Co. erreichbar. Je nach Displaygröße kann dennoch das Nutzererlebnis eingeschränkt sein.

Ein weiterer Nachteil der mobilen Webseite ist es, dass Du zwei verschiedene Seiten pflegen musst. Die Inhalte, die Du in der Desktop-Variante veröffentlichst, müssen für die mobile Homepage angepasst werden. Dies bedeutet mehr Arbeit bei der Content-Pflege. In vielen Fällen ist daher eine Webseite im Responsive Design sinnvoll.

Das Responsive Design

Unter responsivem Webdesign versteht man eine Website-Programmierung, die auf die Größe des jeweiligen Bildschirms eines Nutzers reagiert. Die Webpage wird von vornherein so aufgebaut, dass die Inhalte der Seite sich automatisch der Displaygröße anpassen. Bilder und Buttons können dadurch beispielsweise neu angeordnet werden, ohne dass sie komplett verschwinden. Alle wichtigen Elemente bleiben erhalten. Das Corporate Design Deiner Firma ist dadurch auf jedem Endgerät eindeutig zu erkennen.

Smartphones und Tablets unterstützen Flash-Animationen kaum bis gar nicht. Daher wird bei der Programmierung des Responsive Design bereits darauf geachtet, möglichst auf solche Elemente zu verzichten und Alternativen zu schaffen. Dies sorgt für ein optimales Nutzererlebnis auf Deiner Webseite.

Mobile Anpassung für den E-Commerce

Auch beim Shopping geht der Trend seit Jahren in die Richtung des Online-Handels. Viele Käufe werden mittlerweile ausschließlich online über Amazon oder andere E-Commerce Plattformen getätigt. Zusätzlich bewirken Werbebanner in Apps wie Facebook und Co., dass eine große Zahl der Nutzer über das Smartphone direkt in einen Onlineshop geleitet werden.

Wenn Du einen eigenen Webshop betreibst, ist die mobile Anpassung daher besonders wichtig. Lädt Deine Seite nicht korrekt oder wichtige Dinge wie der Warenkorb werden nicht richtig dargestellt, springt ein potenzieller Kunde schnell wieder ab und kauft woanders. Zusätzlich sollten auch mobile Bezahlmethoden angeboten werden. Hierfür muss sichergestellt werden, dass beispielsweise eine Integration von Paypal einwandfrei funktioniert. Mit einem responsiven Layout für Deinen Onlineshop kannst Du Kunden begeistern, ihnen ein schönes Shoppingerlebnis ermöglichen und eine höhere Conversionrate erzielen.

Die mobile Darstellung von Webseiten – Fazit

Smartphones können heutzutage schon so gut wie alles. Die Kommunikation findet häufig ausschließlich über die mobilen Geräte statt. Messenger-Apps, Essensbestellungen, Shopping und Surfen: Das alles und mehr geht bequem über das Handy, egal wo Du Dich gerade befindest.

Wenn eine Webseite keine angepasste Darstellung für mobile Geräte vorweisen kann, hat das mehrere Nachteile. Die Menschen, die über ihr Smartphone googeln, werden diese Seiten schnell wieder verlassen. In unserer schnelllebigen Zeit wartet so gut wie niemand darauf, dass sich innerhalb von mehreren Minuten eine Webseite aufgebaut hat. Das verbraucht Datenvolumen und Akku und wird von den meisten Nutzern daher vermieden.

Zusätzlich bewertet Google selbst die Webseiten ohne mobile Variante schlechter als andere Seiten. Möchtest Du, dass Deine Seite gefunden wird und die Kunden nicht direkt wieder abspringen, benötigst Du eine mobile Darstellung Deiner Homepage.

Du hast noch Fragen zum mobilen Design einer Webseite? Wir beraten Dich gerne zum Thema Responsive Design und wie dies bei Deinem Webauftritt umgesetzt werden kann.