Mobiles Internet 2016 – 54 % der Deutschen surfen mobil

Die Mobile Revolution; Geräte wie iPhones, iPads und diverse Android-Geräte von Google, Samsung und Co. sind seit einigen Jahren nicht mehr nur ein Trend – Tatsache ist, Smartphones und Tablets gehören mittlerweile genauso zum Alltag wie der Computer. Dabei sollte man sich vor Augen halten, dass das nicht nur eine eingegrenzte Nutzergruppe von Jugendlichen betrifft – Nein, die mobile Revolution gilt für jedes Alter; auch Senioren besitzen Smartphones und surfen mobil.

Infografik: 54% der Deutschen surfen mobil | Statista

Wir möchten das Bewusstsein um die Zahlen und Fakten des mobilen Internets stärken, da der Großteil der Websites immer noch nicht optimiert ist. Seit letztem Jahr wirkt sich dieser Faktor auch auf das Ranking bei Google aus. Ist die Seite nicht optimiert, führt das zu einer negativeren Bewertung.

Welche Auswirkungen hat diese Trendwende?

Jeden Monat erscheinen mehrere neue digitale Gadgets, mit denen wir im Internet surfen können. Neue Technik und Trends nehmen dabei Einfluss auf das Design und die Entwicklung von Webseiten. Websites müssen neuen Ansprüchen angepasst werden, um für Nutzer weiterhin relevant und attraktiv zu sein. Ist die Seite nicht für mobile Ansichten optimiert, erhält sie weniger Besuche und Nutzer springen häufiger und schneller wieder ab. Folgend zeigen wir Bereiche auf, die sich in den letzten Jahren stark verändert haben.

 

Von Mini-Displays der Smartwatches und Smartphones bis zu hochauflösenden 5k-Monitoren und TV-Geräten enthält das heutige Spektrum an Bildschirmformaten alle möglichen Auflösungen
Von Mini-Displays der Smartwatches und Smartphones bis zu hochauflösenden 5k-Monitoren und TV-Geräten enthält das heutige Spektrum an Bildschirmformaten alle möglichen Auflösungen.

Bildschirmgrößen

Heute bieten moderne Bildschirme Auflösungen von bis zu 5K ≙ 5120 × 2880 Pixel – zum Vergleich sei hier die inzwischen veraltete, aber lang anhaltende Standard-Auflösung von 1024 × 768 Pixel genannt. Doch müssen wir nicht nur die Größen der Desktop-Monitore beachten, sondern eine geradezu unübersichtliche Menge an Tablets, Smartphones und weiteren Geräten wie zum Beispiel internetfähigen Fernsehern und Smartwatches (digitale Uhren wie die Apple Watch). Wir haben also ein Spektrum von Smartphones mit 320 × 420 Pixeln und den oben genannten 5K-Displays. Somit ergibt sich eine große Bandbreite an Auflösungen, für die gestaltet bzw. entwickelt werden muss.

Bilddaten müssen größer oder kleiner, also je nach Auflösung, bereitgestellt werden. Schaltflächen müssen mit der Maus, aber auch per Finger-Touch bedienbar sein. Die Website soll sich für breite und schmale Bildschirme anpassen. Daher müssen Inhalte fließend angelegt werden. Website-Elemente werden nicht mehr starr mit einer fest definierten Breite von z. B. 500 Pixeln angelegt, sondern eine relative Größe von z. B. 30 % zugewiesen – und das ist nur eine von vielen Veränderungen, welche wir in diesem Artikel nicht alle aufzählen können. Die neue zukunftsorientierte Vorgehensweise heißt Responsive Webdesign und bildet die Grundlage jeder modernen Website. Designer und Entwickler müssen ganz neu denken, Arbeitsabläufe anpassen und Aufklärungsarbeit leisten.

 

See the Pen Tiny Parallax Pond by Innovationsraum (@innovationsraum) on CodePen.

Bewegte Bildszenen: Was am PC mit einer Mausbewegung über dem Bild funktioniert, wird auf mobilen Geräten per Bewegungssensor ausgelöst. (Bitte beachten Sie, dass es sich dabei nur um eine Demo handelt und diese nicht für alle Geräte optimiert ist.)

Touch-Bedienung und andere Gimmicks

Die neuen Gerätearten wie Smartphone und Tablet bringen auch neue aufregende Technologien. Mobile Geräte werden per Touch und anderen Finger-Gesten bedient. Nutzer sind diese Bedienungsart von ihren Apps gewöhnt und erwarten diese auch im Web. Schaltflächen müssen per Touch klickbar und Slideshows per Wisch-Geste blätterbar sein. Das verlangt Berücksichtigung im Screenlayout des Webdesigners und neue Funktionen bei der Web-Entwicklung.

Doch die Touch-Bedienung ist nur eine von vielen neuen Funktionen von mobilen Geräten. Durch die Abfrage von Geodaten kann man den Nutzer gezielt auf einen Händler in seiner Nähe aufmerksam machen. Diese Geodaten werden z. B. auch von Google Maps genutzt, um Routen zu planen und das Smartphone so zum mobilen Navigationssystem machen. Neu ist auch der Bewegungs-Sensor (Accelerometer & Gyroskop) von mobilen Geräten. Mit dieser Technik kann sich das Gerät im Raum durch Neigungs- und Beschleunigungssensoren orientieren. Es lassen sich zum Beispiel tolle Effekte wie Parallax-Szenerien erstellen.

 

Nicht komprimierte Daten einer Website führen zu langen Ladezeiten und hohem Datenverbrauch auf mobilen Geräten. Lädt eine Seite zu lange, wird sie von Besuchern wieder verlassen bevor die Ladevorgang abgeschlossen ist.
Nicht komprimierte Daten einer Website führen zu langen Ladezeiten und hohem Datenverbrauch auf mobilen Geräten. Lädt eine Seite zu lange, wird sie von Besuchern wieder verlassen bevor die Ladevorgang abgeschlossen ist.

Ladezeit und Datenrate

Mit höherer Auflösung von Geräten wachsen auch die Dateigrößen der Mediadaten. Hochauflösende Bilder ⇒ größere Dateigrößen ⇒ längere Ladezeit und höherer Verbrauch des Traffic-Volumens. Es ist wichtig, Websites bestmöglich zu optimieren und Daten zu komprimieren. Eine Maßnahme wäre, unterschiedliche Bildgrößen je nach Gerätegröße auszugeben. Weitere Stichpunkte sind:

  • Bilddaten-Optimierung
  • Gzip-Datenkomprimierung
  • Daten-Caching
  • Code-Minifizierung

Für eine gute Performance ist in jedem Fall eine gut konzipierte und sauber programmierte Website der Grundstein. Leider müssen wir immer wieder „Pfusch“ in unserem Handwerk sehen. Gerade Responsive Webdesign birgt viele Fallstricke und erfordert viel Wissen und Erfahrung. Schlecht umgesetzt könnte es dabei sogar mehr Schaden anrichten als es abhalten soll.

 

Infografik: 34% des weltweiten Online-Handels sind mobil | Statista

Mobiles Shopping – 30 % der Käufe in Online-Shops werden mobil getätigt

Der mobile Commerce boomt! Jeder dritte Einkauf wird von einem mobilen Gerät aus getätigt. Wenn Ihr Online-Shop noch nicht für Ihre mobilen Kunden optimiert ist, sollten Sie sich definitiv dieses Jahr damit beschäftigen. Online-Shopping-Queen Amazon hat seit 2008 ihre mobilen Kunden in den e-Commerce eingebunden. Nun muss es nicht gleich eine eigene App für den Shop sein – Responsive Webdesign lässt sich ebenfalls für Shops umsetzen.

Wenn Sie den Einstieg ins Online-Geschäft planen, sollten Sie die Optimierung für Mobilgeräte gleich mit auf Ihre Liste an Anforderungen setzen. Für bestehende Online-Shops bietet sich zu gegebener Zeit ein Relaunch des Shops mit neuem Design und mobiler Optimierung an. Warten sollten Sie in jedem Fall nicht zu lange, die Zahl der mobilen Nutzer wächst und die Konkurrenz schläft nicht.

 

Das linke Smartphone zeigt eine nicht optimierte Seite, die sich nur schwer lesen und bedienen lässt. Auf der rechten Seite ist eine optimierte Darstellung der gleichen Website.
Das linke Smartphone zeigt eine nicht optimierte Seite, die sich nur schwer lesen und bedienen lässt. Auf der rechten Seite ist eine optimierte Darstellung der gleichen Website.

Ist Ihre Website für Mobilgeräte optimiert?

Einen guten Anhaltspunkt, ob Ihre Website für mobile Geräte optimiert ist, bietet Google mit seinem kostenlosen „Mobile friendly“-Test. Hier geben Sie einfach die URL Ihrer Seite ein und Google prüft automatisch bestimmte Anforderungen. Der Test gibt allerdings keine Auskunft darüber, wie gut Ihre Website in Sachen Benutzerfreundlichkeit und Ladezeit optimiert ist – das muss manuell überprüft werden.

https://www.google.de/webmasters/tools/mobile-friendly/

Ist der Schnell-Test negativ ausgefallen, sollten Sie dringend handeln. Verpassen Sie nicht den Anschluss an den Markt – denn wir wissen alle: Die Konkurrenz schläft nie und die Weiterentwicklung der Technik ist unaufhaltsam.

Quellenangaben

  1. http://de.statista.com/themen/258/mobiles-internet/
  2. http://insidesearch.blogspot.de/2015/04/ranking-change-to-help-you-find-mobile_21.html
Weitersagen: Google+
Zu finden in und unter den Schlagwörtern .

von monaalexandra

Webdesignerin & Frontend Entwicklerin – mein Herz schlägt für Design & Code gleichermaßen. Ich arbeite außerdem in den Bereichen Content Strategy, SEO und Social Media. Mein Lieblings-CMS ist WordPress und neben meinem iMac darf eine Tasse Chai nicht fehlen.

Kommentare (0)

Einen Kommentar schreiben

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>