Was ist eine mobilfreundliche Website und wie erstellt man sie?

This post is also available in:

Mehr als 58 % des weltweiten Internetverkehrs wird über mobile Geräte abgewickelt. Das ist einer der Gründe, warum die Suchmaschinen ihren Schwerpunkt auf die mobile Suche verlagert haben. Insbesondere Google legt viel mehr Wert auf die mobile Erstindexierung. Für die Suchmaschinenoptimierung bedeutet dies, dass die Google-Bots die mobile Version Ihrer Website eher indexieren als die Desktop-Version. Wenn Ihre Website also nicht mobilfreundlich ist, stehen Ihre Chancen auf eine hohe Platzierung nicht sehr gut.

Wenn Sie Ihr Ranking verbessern wollen, muss Ihre Website mobilfreundlich sein, damit sie von den Google-Crawlern und -Nutzern bevorzugt wird.

Lesen Sie weiter, um mehr darüber zu erfahren, was eine mobilfreundliche Website ist und wie Sie eine solche erstellen können.

Was ist eine mobilfreundliche Website?

Eine mobilfreundliche Website ist so konzipiert, dass sie auf Geräten unterschiedlicher Größe – von Desktops bis zu Smartphones und allem, was dazwischen liegt – auf die gleiche Weise funktioniert.

Das bedeutet, dass keines der Elemente der Website verändert wird oder auf kleineren Geräten unbrauchbar ist. Einige Funktionen sind jedoch eingeschränkt (z. B. die Dropdown-Menüs für die Navigation), da sie auf Mobiltelefonen schwer zu bedienen sind.

Außerdem wird die Verwendung von Flash-Animationen vermieden, um Probleme mit der Benutzerfreundlichkeit auf verschiedenen Bildschirmgrößen zu vermeiden. Die meisten mobilen Geräte unterstützen kein Flash. Flash ist veraltet, sogar auf Desktops. Es gibt viele andere kompatible Technologien, die stattdessen verwendet werden können, z. B. HTML. Wenn Sie etwas Komplizierteres auf dem Handy erledigen müssen, verwenden Sie besser eine App.

Zu den wichtigsten Merkmalen von mobilfreundlichen Websites gehören:

• Vereinfachte Navigation
• Statische Inhalte, die sich nicht ändern
• Kleinere Bilder und Texte (aber immer noch gut zu sehen und zu lesen, ohne zu blinzeln)
• Schaltflächen und Links, die kleiner dargestellt werden, aber dennoch leicht mit dem Finger zu berühren sind
• Seiten, die nicht auf ein mobiles Betriebssystem angewiesen sind, um richtig zu funktionieren

Quelle

Eine Website, die auf mobile Endgeräte reagiert, hat viele Vorteile, wie z. B. ein positives Ranking-Signal, eine verbesserte Benutzererfahrung (UX) und die Möglichkeit, eine optimierte Erfahrung auf allen Geräten zu bieten.

Denken Sie daran, dass mobilfreundliche Websites für eine „einfache“ Interaktion auf mobilen Geräten kodiert sind; dies unterscheidet sich von responsivem Webdesign. Eine responsive Website ändert sich oder „reagiert“ je nach dem Gerät, mit dem die Website angezeigt wird.

So können beispielsweise einige Bilder ausgeblendet und der Text von einem dreispaltigen Layout auf eine einspaltige Darstellung umgestellt werden. Folglich kann eine mobil-responsive Seite völlig anders aussehen als eine auf dem Desktop.

Beispiele aus der Praxis für mobilfreundliche Websites

Angesichts der Milliarden von Nutzern, die täglich über ihre Smartphones auf das Internet zugreifen, erkennen Unternehmen den Bedarf an mobilfreundlichen Websites, und es gibt unzählige Website-Designs, von denen sie sich inspirieren lassen können.

Hier sind drei meiner Lieblingsbeispiele von Websites, die Unternehmen für mobile Geräte optimiert haben.

Beispiel 1: Shutterfly.com

Shutterfly ist eine Online-Plattform für die Erstellung individueller Fotobücher, Abzüge, Karten und persönlicher Geschenke. Die meisten Menschen machen und verwenden Fotos mit ihren Smartphones. Deshalb ist es für einen Dienst wie diesen notwendig, eine mobilfreundliche Website zu haben.

Shutterfly gelingt dies außerordentlich gut, da sich die Marke darauf konzentriert, ein hervorragendes mobiles Erlebnis für alle ihre Kunden zu schaffen.

Erstens ist die Navigation ein Kinderspiel, so dass die Nutzer schnell die gewünschten Informationen auf der Website finden können. Außerdem verwendet die Plattform viele schöne, optimierte Bilder, um Kunden auf ihre Angebote aufmerksam zu machen.

Warum diese Website funktioniert:

• Einfache Navigation
• Große Schaltflächen für Menüpunkte
• Verwendung von schönen, großen Fotos, um verschiedene Angebote zu verkaufen

Beispiel #2: Cheetos

Cheetos verwendet auf seiner Website eine Reihe aufregender Bilder, die ins Auge fallen. Sie tun dies auf eine mobilfreundliche Art und Weise, die die Geschwindigkeit der Website und die Benutzerfreundlichkeit nicht beeinträchtigt.

Das gesamte Design macht es den mobilen Besuchern leicht, sofort durch eine Auswahl von Bildern und Videos zu blättern, die beliebte Produkte verkaufen und die Nutzer auf der Website halten.

Warum diese Website funktioniert:

• Einfaches Navigationsmenü
• Bildschieberegler erleichtern das Blättern
• Verwendung eines Bildrasters, das auf Mobiltelefonen optimal angezeigt wird

Beispiel #3: Huffington Post

Die Huffington Post ist ein bekanntes Nachrichtenportal, das über alle Arten von Nachrichten berichtet, von Politik und aktuellen Ereignissen bis hin zu Technologie, Unterhaltung und vielem mehr.

Die Publikation verfügt über eine einzigartige mobile Website, auf der einige der Überschriften leicht verändert wurden, um den Inhalt für mobile Nutzer besser lesbar zu machen.

In der Regel hat die mobile Version weniger Wörter auf der Homepage als die Desktop-Version. Das macht es perfekt zum Lesen oder Überfliegen von Nachrichten auf kleineren Bildschirmen.

Ein einfaches, anklickbares Menü listet außerdem alle Beitragskategorien auf und erleichtert so die Navigation.

Warum diese Website funktioniert:

• Einfach zu bedienendes, anklickbares Menü
• Weniger Worte auf der mobilen Version der Website
• Leicht zu scannende Titel

Wie man eine mobilfreundliche Website erstellt

Es gibt eine Menge Missverständnisse, wenn es um die Erstellung von responsiven und mobilfreundlichen Websites geht.

Einer der größten Fehler, den Anfänger bei der Erstellung mobilfreundlicher Websites machen, ist, dass sie isoliert arbeiten. Es ist so viel besser, sich von denen inspirieren zu lassen, die es bereits getan haben.

Die oben genannten Beispiele sind ein guter Anfang, aber Sie können auch andere Websites in Ihrer Branche oder Nische (insbesondere Wettbewerber) überprüfen. Auf diese Weise erhalten Sie mehr Einblick in ihre Methoden und bewährten Verfahren zur Erstellung einer mobilfreundlichen Website.

1. Verwenden Sie den richtigen Website-Builder

Der erste Schritt bei der Erstellung einer mobilen responsiven Website ist die Verwendung eines geeigneten Website-Builders. Entscheiden Sie sich für eine, bei der ausdrücklich angegeben ist, dass sie für die Gestaltung von Websites bestimmt ist, die auf mobilen Geräten angezeigt werden sollen. Bei den meisten modernen Website-Erstellern steht das mobile Erlebnis an erster Stelle.

Ein Website-Builder macht es Ihnen leicht, eine Website zu erstellen und zu starten, die sowohl desktop- als auch mobilfreundlich ist. Es gibt viele verschiedene Website-Baukästen zur Auswahl, darunter Plattformen wie WordPress, Zyro, Wix, Squarespace, Weebly, Shopify und viele andere.

Die meisten von ihnen bieten kostenlose Versionen an, aber Sie müssen auf eine kostenpflichtige Version upgraden, wenn Sie Einschränkungen aufheben und auf zusätzliche Funktionen wie E-Mail-Marketing zugreifen möchten .

Wenn Sie zum Beispiel einen kostenlosen Website-Builder verwenden, können Sie eine mobilfreundliche Website erstellen, aber unter einer Subdomain wie YourAwesomeWebsite.weebly.com statt unter einer eigenen Domain: YourAwesomeWebsite.com.

Je nach Ihrem Kenntnisstand können Sie einen Website-Builder wählen, mit dem Sie entweder eine Website-Vorlage für mobilfreundliche Websites erstellen oder tiefer in den Webdesign- und -entwicklungsprozess eintauchen, um HTML oder CSS zu verwenden und Ihr Design von PSD in HTML zu konvertieren.

HTML beschreibt die Struktur Ihrer Webseite, und CSS teilt dem Browser mit, wie die Seite dargestellt werden soll, einschließlich Farben, Schriftarten und Layouts. Außerdem können Sie Ihre Webseite an verschiedene Gerätetypen, Bildschirmgrößen und mobile Betriebssysteme anpassen.

Unabhängig von Ihren technischen Kenntnissen und Erfahrungen ist es immer am besten, sich bei der Erstellung mobilfreundlicher Websites auf einfache Designs zu konzentrieren.

Mobile Nutzer haben eine notorisch kurze Aufmerksamkeitsspanne, und wenn Sie sich auf Einfachheit konzentrieren, können Sie die Aufmerksamkeit Ihrer Nutzer leichter auf den Inhalt lenken, den sie sehen sollen, als wenn Sie aufwendige, komplexe Themen haben.

2. Testen Sie die Website auf mobilen Geräten

Sobald Ihre Website erstellt ist, müssen Sie sie auf mobilen Geräten testen, um sicherzustellen, dass alles richtig funktioniert. Neben der Überprüfung der Mobilfreundlichkeit Ihrer Website auf mehreren Geräten bietet das Testen mobiler Websites auch folgende Vorteile:

• Es macht Ihre Website leicht zugänglich: Die Nutzer können über jeden Browser und mehrere mobile Geräte auf Ihre Website zugreifen.
• Es macht Ihre Website sichtbarer: Durch das Testen mobiler Websites wird Ihre Website auch leichter gefunden, da Google mobilen Websites im Vergleich zu Desktop-Apps Priorität einräumt.
• Es verbessert die Benutzerfreundlichkeit: Eine mobilfreundliche Website verbessert das Erscheinungsbild und die Benutzerfreundlichkeit der Website, was wiederum zu einer besseren UX führt.

Um Ihre mobilfreundliche Website zu testen, können Sie ein spezielles Tool wie den Mobile-Friendly-Test von Google verwenden, auf den Sie hier zugreifen können.

Mit diesem Tool können Sie testen, wie einfach die Besucher Ihrer Website Ihre Seiten auf mobilen Geräten nutzen können. Geben Sie einfach eine Seiten-URL ein, und schon können Sie sehen, wie Ihre Seite abschneidet.

Das Tool kann zeigen, dass Ihre Website viel Arbeit benötigt. Sie müssen also vorrangig Ihre Website mobilfreundlich gestalten, um ihre Sichtbarkeit in Suchmaschinen zu verbessern.

Wenn Sie den Daumen nach oben bekommen, ist Ihre Website mobilfreundlich und benötigt nicht dieselbe Priorität, aber Sie können immer davon profitieren, die Benutzerfreundlichkeit auf jede erdenkliche Weise zu verbessern. Jedes bisschen hilft, und alles, was Sie tun, wird dazu beitragen, dass mehr Besucher Ihrer Website bleiben, so dass Sie Ihre Konversionen steigern und mehr Umsatz machen können.

Alternativ können Sie auch ein kostenloses Browser-Tool wie Responsinator verwenden, mit dem Sie die Größe Ihrer Website beliebig anpassen können, um genau zu sehen, wie sie auf den Bildschirmen verschiedener Geräte aussieht.

Schließlich empfiehlt Darshan Somashekar, der die Spieleplattform Solitaired betreibt, neben der Handyfreundlichkeit auch einen Test der Seitengeschwindigkeit auf Ihrer mobilen Website. „Die Kompatibilität mit mobilen Geräten ist zwar wichtig, aber Google misst jetzt auch die wichtigsten Webvitalitäten. Wir messen dies regelmäßig für unsere Solitaire-Spiele. Wenn Ihre Seite nicht schnell und effizient geladen wird, werden die Nutzer nicht nur abspringen, sondern es wird sich auch auf Ihr Suchranking auswirken.

3. Optimieren der Bildgröße

Eine weitere Maßnahme, die Sie ergreifen können, um Ihre Website mobilfreundlich zu gestalten, ist die korrekte Größe der Bilder, damit sie auf mobilen Geräten optimal angezeigt werden können.

Bei kleinen Bildschirmen besteht das Ziel darin, Bilder mit der kleinstmöglichen Dateigröße zu verwenden, die auf dem Bildschirm, auf dem sie betrachtet werden, immer noch klar und deutlich aussehen. Der Grund dafür ist, dass mobile Geräte eine viel geringere Bandbreite haben als Desktops, was zu längeren Ladezeiten führen kann, wenn Sie sie nicht optimieren.

Wenn Ihre Nutzer eine 1-MB-JPEG-Datei herunterladen müssen, nur um ein Bild in Thumbnail-Größe zu sehen, werden sie wahrscheinlich frustriert sein und Ihre Website wieder verlassen. Es spielt keine Rolle, wie schön Ihre Website gestaltet ist. Wenn es Ihnen nicht gelingt, die Ladezeiten zu verkürzen, werden die Nutzer wahrscheinlich Ihre Website verlassen und zu einem Ihrer Wettbewerber wechseln.

Stellen Sie also sicher, dass Sie alle Ihre Bilddateien verkleinern, damit Sie weniger Daten verwenden und die Seiten schneller laden können. Dies wird zu einem positiven Image Ihrer mobilen Website beitragen.

4. Verzichten Sie auf textblockierende Werbung und Pop-ups

Eine weitere Möglichkeit, um sicherzustellen, dass Ihre Website mobilfreundlich ist, besteht darin, nur diskrete Anzeigen für mobiles Marketing zu verwenden, die nicht von Ihrem mobilen Inhalt ablenken oder ihn verdecken.

Niemand mag Werbung in irgendeinem Zusammenhang, und wenn Nutzer versuchen, Text auf einem kleinen Bildschirm zu lesen, ist das letzte, was sie brauchen, ein Popup, das ihre Sicht auf die Seite blockiert. Anstatt sich die Zeit zu nehmen, das kleine „x“ zu finden, um die Popup-Werbung zu minimieren, werden die Nutzer wahrscheinlich einfach wegklicken, um eine Website mit einer besseren Benutzerfreundlichkeit zu finden.

Vermeiden Sie es, Ihre Nutzer zu verärgern, und sorgen Sie für ein besseres Erlebnis, indem Sie auf Popups und Anzeigen verzichten, die den Inhalt Ihrer Seite blockieren. Wenn Sie sie nicht ganz entfernen können, dann deaktivieren Sie sie zumindest für mobile Nutzer.

Sie können auch festlegen, dass Popups oder Anzeigen erst dann erscheinen, wenn die Nutzer bis zum Ende der Seite gescrollt haben, anstatt sie sofort nach dem Aufrufen der Seite anzuzeigen.

Stellen Sie außerdem sicher, dass das „X“ zum Abbrechen des Popups oder der Anzeige groß genug ist, damit die Nutzer es leicht finden und auswählen können.

5. Die Geschwindigkeit der Website hat Vorrang

Und schließlich sollten Sie überprüfen, ob Videos und andere interaktive Inhalte auf Ihrer Website nicht zu Verzögerungen auf der Website führen. Mobile Nutzer verbringen nicht gerne mehr Zeit als nötig mit der Suche nach den gewünschten Informationen auf der Website, daher müssen Sie sicherstellen, dass Sie ihnen innerhalb von Sekunden Ergebnisse liefern.

Heutzutage verlangen die Menschen nach sofortiger Befriedigung, und wenn sie das, was sie brauchen, nicht sofort bekommen (d. h. fast auf den ersten Blick), können Sie sicher sein, dass sie nicht warten werden.

Ihre Website sollte nicht zu lange brauchen, um vollständig zu laden. Sie sollte übersichtlich sein, und alle wichtigen Elemente sollten mit nur einem oder zwei Bildschirmsprüngen erreichbar sein. Werden diese Punkte nicht beachtet, werden die Nutzer wahrscheinlich zu einer anderen Website wechseln.

Schlussfolgerung

Ich hoffe, dieser Artikel hat Ihnen geholfen, genau zu verstehen, was eine mobilfreundliche Website ist und welche Schritte Sie zum Aufbau einer solchen benötigen. Nutzen Sie diese Informationen, um eine Website zu entwerfen, die auf dem Handy genauso gut aussieht wie auf dem Desktop.

Hat dieser Artikel alle Ihre Fragen zur Erstellung einer mobilfreundlichen Website beantwortet? Teilen Sie uns Ihre Meinung mit!

---

BYLINE:

Ron Stefanski ist ein Website-Unternehmer und Marketing-Professor, der leidenschaftlich gerne Menschen hilft, ihr eigenes Online-Geschäft aufzubauen und zu vermarkten. Weitere Informationen über ihn finden Sie unter OneHourProfessor.com

Sie können auch auf YouTube oder Linkedin mit ihm in Kontakt treten.