Mobiles Webdesign.

Auch auf kleinen Devices groß rauskommen.

Hier erfahren Sie…

Wissen Sie, wie hoch Ihr Anteil an mobilen Nutzern ist? Auch auf B2B-Websites überwiegen mittlerweile die User mit mobilem Endgerät. Google hat diese Veränderung erkannt und nutzt seit März 2021 vor allem die mobile Version der Inhalte für die Bewertung einer Website.

Google und der Mobile First Index:
Wie wichtig ist Ihr Google-Ranking?

Was 2016 angekündigt und ab 2018 schrittweise eingeführt wurde, ist seit März 2021 Fakt: Die weltgrößte Suchmaschine berücksichtigt bei der Bewertung Ihrer Website fast ausschließlich die Version, die am Smartphone oder Tablet angezeigt wird. Sind Ihre Inhalte nicht für die mobile Ansicht optimiert, führt das zwangsläufig zu einer schlechteren Reihung in den Google-Suchergebnissen.

Google stellt einen komplexen Leitfaden und eine Historie zum Thema Mobile First Index zur Verfügung.

https://de.statista.com/statistik/daten/studie/217457/umfrage/anteil-mobiler-endgeraete-an-allen-seitenaufrufen-weltweit/

Mobiles Webdesign Statistik Anteil mobiler Endgeräte weltweit

Google und der Mobile First Index:
Wie wichtig ist Ihr Google-Ranking?

Was 2016 angekündigt und ab 2018 schrittweise eingeführt wurde, ist seit März 2021 Fakt: Die weltgrößte Suchmaschine berücksichtigt bei der Bewertung Ihrer Website fast ausschließlich die Version, die am Smartphone oder Tablet angezeigt wird. Sind Ihre Inhalte nicht für die mobile Ansicht optimiert, führt das zwangsläufig zu einer schlechteren Reihung in den Google-Suchergebnissen.

Google stellt einen komplexen Leitfaden und eine Historie zum Thema Mobile First Index zur Verfügung.

Mobiles Webdesign Statistik Anteil mobiler Endgeräte weltweit

https://de.statista.com/statistik/daten/studie/217457/umfrage/anteil-mobiler-endgeraete-an-allen-seitenaufrufen-weltweit/

Icon Did you know?
In Österreich hat sich die Nutzung des mobilen Datenvolumens innerhalb von 2 Jahren verdoppelt!

Quelle: https://de.statista.com/themen/3654/smartphone-nutzung-in-oesterreich/#dossierKeyfigures

Die mobile Revolution.
Analysieren Sie Ihren Webauftritt.

Die Lighthouse-Analyse von Google lässt Sie wissen, ob ein Handlungsbedarf auf Ihrer Website besteht. Die dort untersuchten Faktoren bestimmen wie lange ein Besucher auf Ihrer Website länger verweilt und ob Sie über Suchmaschinen gefunden werden:

  • Leistung: Sind die Ladezeiten und Ressourcen optimiert?
  • Barrierefreiheit: Kann die Seite auch von beeinträchtigen Menschen
    bedient werden?
  • Best Practices: Wie ist die Nutzererfahrung in der mobilen Anwendung?
  • SEO: Ist die Seite suchmaschinenoptimiert?
Mobiles Webdesign Lighthouse-Analyse

Die Lighthouse-Analyse von Google lässt Sie wissen, ob ein Handlungsbedarf auf Ihrer Website besteht. Die dort untersuchten Faktoren bestimmen wie lange ein Besucher auf Ihrer Website länger verweilt und ob Sie über Suchmaschinen gefunden werden:

  • Leistung: Sind die Ladezeiten und Ressourcen optimiert?
  • Barrierefreiheit: Kann die Seite auch von beeinträchtigen Menschen
    bedient werden?
  • Best Practices: Wie ist die Nutzererfahrung in der mobilen Anwendung?
  • SEO: Ist die Seite suchmaschinenoptimiert?
Mobiles Webdesign Lighthouse-Analyse

Lighthouse-Analyse selbst durchführen:

  • Öffnen Sie Ihre Website über Chrome oder Edge. Nach einem Rechtsklick wählen Sie den Menüpunkt „Untersuchen“.
  • Wechseln Sie im Inspektertool auf den Reiter „Lighthouse“.
  • Klicken Sie nun auf den Button „Bericht erstellen“ und in Kürze haben Sie eine detaillierte Auswertung Ihrer mobilen Website.

 

Wenn Sie ein Google-Konto besitzen, können Sie auch einen mobile-friendly-check für Ihre Website in der Google Search Console durchführen.

Abm Sand Clock White 1

Lazy Loading und Viewport sind für Sie Fremdwörter?

Gerne führen wir eine kostenlose Analyse für Sie durch, erklären das Ergebnis und geben Empfehlungen für die Verbesserung der Performance.

Experten kontaktieren

Lighthouse-Analyse selbst durchführen:

  • Öffnen Sie Ihre Website über Chrome oder Edge. Nach einem Rechtsklick wählen Sie den Menüpunkt „Untersuchen“.
  • Wechseln Sie im Inspektertool auf den Reiter „Lighthouse“.
  • Klicken Sie nun auf den Button „Bericht erstellen“ und in Kürze haben Sie eine detaillierte Auswertung Ihrer mobilen Website.
Abm Sand Clock White 1

Lazy Loading und Viewport sind für Sie Fremdwörter?

Gerne führen wir eine kostenlose Analyse für Sie durch, erklären das Ergebnis und geben Empfehlungen für die Verbesserung der Performance.

Experten kontaktieren

Wenn Sie ein Google-Konto besitzen, können Sie auch einen mobile-friendly-check für Ihre Website in der Google Search Console durchführen.

Stressiger als ein Horrorfilm.
Mobile Ladezeiten und
Performance.

Niemand wartet gerne. Wissen Sie wie schnell Ihre Website auf einem Smartphone lädt? Jede Seite die über 3 Sekunden braucht, um relevante Inhalte anzuzeigen, wird von den meisten Usern verlassen und nicht noch einmal besucht.

Bei Zugriffen aus instabilen Netzwerken oder bei schwacher WLAN-Verbindung sind nicht optimierte Website-Ressourcen somit ein ernstzunehmendes Problem. Lange Ladezeiten am Smartphone stressen uns laut einer Studie des Ericsson ConsumerLab sogar noch mehr als Horrorfilme. Gönnen Sie Ihren Geschäftspartnern einen stressfreien Besuch Ihrer Website!

Mobiles Webdesign Mobile First Statistik

Sind Ihre Medien bereits optimiert?

Die Software squoosh.app wandelt JPG mit vielen Einstellmöglichkeiten und unter Sichtkontrolle in AVIF um. Wir setzen AVIF bereits sehr erfolgreich auf den Websites unserer Kunden ein.

 

Wir haben es für Sie getestet! Hier sehen Sie JPG und WEBP im direkten Vergleich:
WEBP-TEST

Weitere Optimierungen:

Abm Check 1

Mit Lazy Loading können wir gewisse Ressourcen verzögert laden und so die Anzeige erster Inhalte beschleunigen.

Abm Check 1

Durch den Einsatz des HTML-picture-Tags verbessern wir den Geschwindigkeitsindex Ihrer Website.

Abm Check 1

Videoinhalte binden wir über Streaming-Plattformen wie YouTube und Vimeo ein, um die Ladezeiten zu verkürzen.

Icon Did you know?
Durch das Bereitstellen neuer Bildformate wie AVIF und WEBP, erreichen wir um bis zu 85 % kürzere Ladezeiten im Vergleich zu herkömmlichen Bildformaten wie JPG oder PNG!
Mobiles Webdesign Bildkomprimierung JPG

JPG-Format / Dateigröße: 175KB / Pixel: 1920×1280

 
Mobiles Webdesign Bildkomprimierung AVIF

AVIF-Format / Dateigröße: 70KB / Pixel: 1920×1280
ca. 60% Ersparnis

Mobiles Webdesign Bildkomprimierung WEBP

WEBP-Format / Dateigröße: 47KB / Pixel: 1920×1280
ca. 73% Ersparnis

Tipps für eine bessere Performance

Abm Check 1

Content First: Der textliche Inhalt Ihrer Seite soll immer als erstes geladen werden.

Abm Check 1

Minifying: CSS und Javascript-Ressourcen sollen gebündelt und verkleinert werden.

Abm Check 1

CLS (Cumulative Layout Shift) optimieren: Störende Pop-ups und Inhalte, die das Verschieben Ihres Layouts zur Folge haben, sollen vermieden werden.

Abm Performance White 1

Wie schnell ist Ihre Website?

Ob Ihre Website für die mobile Nutzung optimiert ist, können Sie mit dem Pagespeed-Tool von Google überprüfen. Beim Ergebnis haben Sie die Möglichkeit zwischen der Desktop- und Smartphone-Version zu wechseln.

Jetzt testen

Die Absprungrate reduzieren:
Wurde die mobile Version bereits beim Design berücksichtigt?

Aufgrund der schmalen Bildschirmbreite und das Benutzen der Touch-Funktionen ergeben sich für mobile Anwendungen neue Voraussetzungen:

Die Absprungrate reduzieren:
Wurde die mobile Version bereits beim Design berücksichtigt?

Aufgrund der schmalen Bildschirmbreite und das Benutzen der Touch-Funktionen ergeben sich für mobile Anwendungen neue Voraussetzungen:

1 Ist die Lesbarkeit gegeben?
  • Nicht alle Schriftarten sind auf dem Smartphone so gut leserlich wie am Computerbildschirm.
  • Generell sollte die Schrift größer konzeptioniert sein, um den Textinhalt leicht erfassen zu können.
  • Es empfiehlt sich ebenfalls die Textlänge zu kürzen und nur das Wesentliche an Information darzustellen. Hier bieten sich Javascript-Lösungen mit „Mehr lesen“-Buttons an. Der weitere Inhalt öffnet sich dann in einer Lightbox oder auf einer neuen Seite.
  • Mit diesem Tool können Sie auf Ihrer Website Schriften und Kontraste überprüfen: https://contrastchecker.com/
 Platzhalter 1 1 Column
2 Sind interaktive Elemente erkennbar und leicht bedienbar?
  • Interaktive Elemente sollen ausreichend groß gestaltet sein und stets genug Abstand zu einander einhalten.
  • Handlungsaufforderungen wie Buttons müssen auf jeder Seite sofort erkennbar sein.
 Platzhalter 1 1 Column
3 Ist die mobile Navigation intuitiv?
  • Erkennt man sofort, dass es weitere Ebenen gibt?
  • Orientierung: Weiß der User immer in welchem Bereich er sich soeben aufhält?
  • Best Practice: Amazon zeigt, wie auch umfangreiche B2B-Webseiten mithilfe einer Off-Canvas-Navigation klare Strukturen schaffen können.

    "Off-Canvas" beschreibt das Verhalten bzw. die Darstellungsart eines Elementes, das zur Seite aus dem Viewport (sichtbarer Bereich am Bildschirm) geschoben wird. Dadurch steht mehr Platz auf kleinen Displays zur Verfügung. Diese Technik bietet sich im mobilen Webdesign u.a. für umfangreiche Navigationen, einen Login-Bereiche oder auch eCommerce-Inhalte an.
Platzhalter 1 1 Column
4 Sind Formulare optimiert für das Ausfüllen unterwegs?
  • Werden für Formulare entsprechende Keyboards und Autofill-Methoden bereitgestellt? Beim User erhöht das die Bereitschaft zum Ausfüllen eines Formulars enorm.
  • Macht ein Social-Media-Login anstelle eines langwierigen Registrierungsprozesses Sinn?
 Platzhalter 1 1 Column
5 Werden dem Besucher bekannte Dienste zur Verfügung gestellt?
  • Nutzen Sie Native App Support, also die Integration vertrauter Programme wie zum Beispiel Google Maps? Es ist sinnvoll dem User bereits vorhandene Systeme bereitzustellen, die er bereits kennt.
  • Zum Beispiel, bei der Integration einer Wegbeschreibung wird bereits die favorisierte App des Benutzers verwendet oder der bevorzugte E-Mail Client öffnet sich beim Senden einer Anfrage.
 Platzhalter 1 1 Column
Icon Did you know?
Konsistenz bzw. Seamless Design…
das bedeutet, dass das Design Ihrer Website plattformübergreifend konsistent sein sollte. Ihr Unternehmen oder Ihre Marke sollte sich trotz minimalistischer Gestaltung auf jedem Gerät widerspiegeln und sofort erkennbar sein.

Bereit für die mobile Revolution?

Wir sollten uns treffen!

Unverbindliches Gespräch vereinbaren