Artikel

Mobile Website Design im Jahr 2021: Alles, was Sie wissen müssen

Das Design mobiler Websites ist unerlässlich.



Warum? Weil mobile Geräte die Art und Weise, wie wir uns verbinden, und damit die Art und Weise, wie Unternehmen arbeiten, revolutionieren. In der Tat ist der Großteil des Web-Verkehrs jetzt kommt vom Handy Geräte.

'Mobile wird nicht nur zum neuen digitalen Hub, sondern auch zur Brücke in die physische Welt.' sagte Thomas Husson , der Vice President und Principal Analyst bei Forrester Research. 'Das ist der Grund, warum Mobilgeräte mehr als nur Ihre digitalen Abläufe betreffen - es wird Ihr gesamtes Unternehmen verändern.'





Mit anderen Worten, Sie benötigen eine auf Mobilgeräte reagierende Website.

Aber was ist eine mobilfreundliche Website? In diesem Artikel erfahren Sie alles über mobile-freundliche Websites und sehen neun der besten Beispiele für das Design mobiler Websites. Außerdem erfahren Sie, wie Sie herausfinden können, ob Ihre Website für Handys geeignet ist.


OPTAD-3

Lasst uns anfangen.

Warten Sie nicht, bis es jemand anderes tut. Stellen Sie sich selbst ein und geben Sie den Ton an.

Erste Schritte kostenlos

Was ist eine mobilfreundliche Website?

Einfach ausgedrückt ist eine mobilfreundliche Website eine Website, die für Handheld-Geräte wie Smartphones und Tablets entwickelt und optimiert wurde.

Und Mobile Responsive Design ist der Prozess von Erstellen einer Website das passt sich der Bildschirmgröße an, auf der es angezeigt wird.

Hier bei Oberlo haben wir ein mobilfreundliches Website-Design. Vergleichen wir, wie es auf Desktop und Mobile aussieht.

Was ist ein Social-Media-Outlet?

In der Abbildung unten sehen Sie, dass die Desktop-Website viel Platz bietet, die Seitenelemente an bestimmten Stellen nebeneinander angeordnet sind und der Text im Vergleich zur Bildschirmgröße relativ klein ist.

Oberlo Desktop Website

Wenn Sie dagegen die Website auf Mobilgeräten anzeigen, werden die Seitenelemente in einer langen Spalte übereinander gestapelt, und um jedes Element herum ist weniger Platz vorhanden. Außerdem sind die Schaltflächen größer, um das Tippen zu vereinfachen, und der Text ist im Verhältnis zur Seitengröße größer, um das Lesen zu erleichtern.

Oberlo Mobile Website Design

'Die reichhaltigen und interaktiven Erlebnisse, die wir von mobilen Apps erwarten, haben neue Standards und Erwartungen für alle digitalen Medien einschließlich des Webs geschaffen.' sagte Raj Aggarwal , CEO des Mobile-Marketing-Unternehmens Localytics. 'Das Ergebnis ist, dass sich Websites weiterentwickeln, um in ihrer umfangreichen Funktionalität app-ähnlicher zu werden.'

Die Bedeutung des Designs mobiler Websites

Kommen wir zur Sache: Im letzten Quartal 2019 waren Smartphones für eine Menge verantwortlich 52,6 Prozent des weltweiten Website-Verkehrs .

Dies bedeutet, dass die Verwendung mobiler Geräte jetzt Desktop-Computer dominiert.

Mehr, die Anzahl der mobilen Benutzer Bis 2021 wird ein weltweites Wachstum auf 3,8 Milliarden erwartet.

Wie Cyndie Shaffstall Der Gründer der Marketingfirma Spider Trainers sagte: „Mobil ist nicht die Zukunft, es ist das Jetzt. Treffen Sie Ihre Kunden in einer Umgebung ihrer Wahl, nicht dort, wo es Ihnen passt. “

Mobile Geräte verändern auch die Einkaufsgewohnheiten.

Laut Google 59 Prozent der Käufer sag das in der Lage zu sein auf ihren mobilen Geräten einkaufen ist wichtig bei der Entscheidung, bei welchem ​​Einzelhändler oder welcher Marke Sie kaufen möchten.

Mehr, 70 Prozent der Smartphone-Besitzer Wer im Geschäft einkaufte, wandte sich an seine Mobilgeräte, um den Kauf im Voraus zu recherchieren.

Wenn dies nicht ausreicht, priorisiert der Google-Algorithmus mobilfreundliche Websites in den Suchergebnissen.

Im März 2020 Google sagte 'Zur Vereinfachung wechseln wir für alle Websites zur Mobile-First-Indizierung.'

Wenn Sie sich fragen, was dies bedeutet, wenden Sie sich an den Google-Entwickler John Mueller erklärt ::

„Derzeit untersucht Google die Desktop-Version einer Website und legt dann fest, wie die mobile Website anhand dieser Informationen eingestuft wird. Sobald dieses Update verfügbar ist, wird das Gegenteil davon eintreten. Google wird sich Ihre mobile Website ansehen und von dort aus die Desktop-Website bewerten. “

Das Update wird offiziell im September 2020 ins Spiel kommen, aber 70 Prozent der Websites Die in den Suchergebnissen angezeigten Werte werden bereits anhand dieses Mobile-First-Indexierungsalgorithmus eingestuft.

Google-Statistik

Schließlich laden viele Benutzer mobile Websites über langsame, schwache Telefonverbindungen. Daher müssen Marken ein mobiles Website-Design erstellen, das schnell geladen wird.

Alles in allem steht die Welt jetzt an erster Stelle für Mobilgeräte - und deshalb benötigen Sie eine Website, die auf Mobilgeräte reagiert.

8 Designtipps von den besten mobilen Websites

In diesem Abschnitt werden acht Tipps zum Design mobiler Websites näher erläutert, die Sie verwenden können. Außerdem sehen Sie Beispiele aus der Praxis von einigen der besten mobilen Websites im Web.

1. Verwenden Sie große Tasten

Mobile-freundliche Websites müssen Schaltflächen haben, die groß genug sind, damit Benutzer sie antippen können, ohne sie vergrößern zu müssen.

Außerdem muss zwischen den Hyperlinks Platz sein. Wenn Links zu nahe beieinander platziert sind, versuchen Benutzer möglicherweise, auf einen Link zu klicken und versehentlich auf einen anderen zu klicken.

Shopify verwendet große Schaltflächen und platziert viel Platz zwischen Hyperlinks auf dem Design der mobilen Website.

Shopify Große Knöpfe

Beachten Sie beim Entwerfen Ihrer auf Mobilgeräte reagierenden Website den Abstand und stellen Sie sicher, dass auf jeden Hyperlink problemlos geklickt werden kann.

2. Machen Sie den Text groß genug, um ihn zu lesen

Dies mag ein wenig offensichtlich erscheinen, ist aber auch für das mobile-freundliche Website-Design von entscheidender Bedeutung.

Benutzer sollten niemals zoomen oder nach links oder rechts scrollen müssen, um etwas zu lesen. Der Text sollte immer groß genug sein, um bequem gelesen zu werden.

Im folgenden Beispiel von Bartmarke können Sie sehen, dass der gesamte angezeigte Text perfekt zur Größe des Bildschirms passt.

Bartmarke Großer Text

Machen Sie Ihren Text auf Bildschirmen aller Größen groß genug, damit Benutzer leicht lesen können, was Sie zu sagen haben.

3. Vereinfachen Sie die Menüs

Desktop-Website-Menüs bieten viel Platz. Sie können eine ganze Leiste am oberen Bildschirmrand einnehmen und verfügen über umfangreiche Dropdown-Optionen, ohne die Benutzererfahrung zu beeinträchtigen.

Dies ist auf Mobilgeräten nicht der Fall - es ist einfach nicht genügend Speicherplatz vorhanden.

Mobile-freundliche Websites sollten einfache Menüs verwenden, die einen Überblick über die Website bieten. Benutzer können dann Kategorien, Filter oder die Suchfunktion verwenden, um herauszufinden, wonach sie suchen.

Die meisten mobilfreundlichen Websites verwenden das Hamburger-Symbol - bestehend aus zwei oder drei horizontalen Linien -, um ein Menü anzuzeigen.

Schauen wir uns ein gutes Beispiel von einer der besten mobilen Websites an. Kylie Haut .

Wenn Benutzer auf das zweizeilige Hamburger-Menü oben rechts auf dem Bildschirm tippen, wird ihnen ein Vollbildmenü mit großen Schaltflächen und Text angezeigt.

Beispiel für ein mobiles KylieSkin-Menü

Halten Sie beim Erstellen einer auf Mobilgeräte reagierenden Website Ihre Menüs einfach, damit Benutzer leicht finden, wonach sie suchen.

4. Stellen Sie eine einfache und intuitive Suchfunktion bereit

Die Suchfunktion Ihrer Website ist besonders für mobile Benutzer wichtig.

Wie oben erwähnt, können vereinfachte Menüs das mobile Surfen erleichtern. Sie können es Benutzern jedoch auch erschweren, einen bestimmten Artikel zu finden.

Platzieren Sie die Suchfunktion vorne und in der Mitte, damit Benutzer mühelos finden können, was sie möchten.

Shopify Benutzer Gymshark Platziert die Suchfunktion in der oberen Leiste der Seite. Es gibt auch eine intuitive Filterfunktion, die es Benutzern erleichtert, bestimmte Produkttypen zu finden.

Gymshark-Such- und Filterfunktionen

Der Schlüssel zum Mitnehmen? Machen Sie eine einfache und effektive Suchfunktion zu einem Teil Ihres mobilen Website-Designs.

5. Machen Sie es sich einfach, Kontakt aufzunehmen

Wenn ein Kunde nach Ihren Kontaktdaten sucht, ist er möglicherweise in Schwierigkeiten geraten - was bedeutet, dass er wahrscheinlich bereits ein wenig frustriert ist. Fügen Sie der Verletzung keine Beleidigung hinzu, indem Sie es schwierig machen, Sie zu kontaktieren.

beste Zeit, um das Profilbild zu aktualisieren

Besonders wenn 84 Prozent der Verbraucher Erwägen Kundendienst ein Schlüsselfaktor bei der Entscheidung zu sein, ob ein Kauf getätigt werden soll.

Kundendienststat

Hier ist ein weiteres großartiges Designbeispiel für mobile Websites von Shopify-Benutzern Bremont . Diese Luxusuhrenmarke platziert unten rechts auf dem Bildschirm ein Chat-Symbol, mit dem Website-Besucher schnell und einfach einen Vertreter kontaktieren können.

Bremont Kontaktoptionen

Wenn Sie keinen Live-Chat rund um die Uhr anbieten können, sollten Sie eine Verknüpfung zu a Facebook Chatbot oder geben Sie einfach ein Kontaktformular an, auf das Benutzer über einen Link „Kontakt“ in Ihrem Menü zugreifen können.

6. Erstellen Sie einfache Formulare

Benutzer sind möglicherweise eher geneigt, ein langes Formular auf einem Computer auszufüllen, da der Bildschirm größer ist und das Tippen mit einer Tastatur einfacher ist.

Auf Mobilgeräten müssen Formulare mit großen Textfeldern und Schaltflächen kürzer sein.

Wenn Sie beispielsweise Benutzer bitten, sich bei Ihrer Mailingliste anzumelden, sollten Sie nicht mehr als einen Vornamen und eine E-Mail-Adresse anfordern.

Wenn Sie weitere Fragen hinzufügen müssen, lassen Sie diese schnell und einfach beantworten.

In diesem Designbeispiel für mobile Websites vom Shopify-Benutzer QuadLock können Sie große Felder mit einfachen Formularanforderungen sehen. Es gibt sogar ein Dropdown-Menü, mit dem Benutzer Informationen zu ihrer Anfrage bereitstellen können.

QuadLock-Kontaktformular

Kurz gesagt, stellen Sie sicher, dass Ihre Formen kurz und süß sind.

7. Erstellen Sie auffällige Handlungsaufforderungen

ZU Aufruf zum Handeln - auch als CTA bezeichnet - ist ein Bild, ein Banner oder ein Textstück, das Benutzer buchstäblich auffordert, Maßnahmen zu ergreifen.

Beispielsweise können Sie Benutzer auffordern, sich bei Ihrem anzumelden Mailingliste , erfahren Sie mehr über ein Angebot oder kaufen Sie ein Produkt.

Diese Marketingtaktik spielt eine wesentliche Rolle beim Design mobiler Websites.

Es kann jedoch schwierig sein, überzeugende Handlungsaufforderungen mit einem derart begrenzten Platz auf dem Bildschirm zu erstellen.

In dieser mobilen Website Beispiel von Shopify Benutzer Luxuriöses Haar sehen Sie zwei Banner mit Handlungsaufforderungen. Der erste bewirbt ein neues Produkt, das mit einem kostenlosen Geschenk geliefert wird, und der zweite fordert die Benutzer auf, mehr über die Richtlinien für kostenlosen Versand und 90-Tage-Umtausch der Marke zu erfahren.

Luxy Hair Handlungsaufforderung

Wenn Sie CTAs für Ihre mobilfreundliche Website erstellen, heben Sie sie hervor, indem Sie sie über der Falte platzieren, sodass Benutzer sie sehen können, ohne nach unten scrollen zu müssen.

8. Vermeiden Sie Popups

Seien wir ehrlich: Die meisten Menschen hassen Popups. Wenn Sie Google 'Ich hasse Popup-Anzeigen' verwenden, werden Sie fast 48 Millionen Ergebnisse erzielen.

Kein Wunder, dass Google eine Algorithmusänderung im Jahr 2017 Dadurch werden Websites bestraft, die bestimmte Arten von Popups auf Mobilgeräten bereitstellen.

Heutzutage leiden Ihre Suchrankings wahrscheinlich darunter, wenn Sie:

  • Zeigen Sie ein Popup an, das den Hauptinhalt abdeckt
  • Zeigen Sie ein eigenständiges Interstitial an, das der Benutzer schließen muss, bevor er auf den Hauptinhalt zugreifen kann.
  • Machen Sie den oberen Rand der Seite zu einem eigenständigen Interstitial und platzieren Sie den ursprünglichen Inhalt darunter.

Pop-Ups, die saugen

Einige Arten von Popups sollten sich jedoch nicht negativ auf Ihre Platzierungen auswirken, z

  • Interstitials zur Erfüllung gesetzlicher Verpflichtungen wie Altersüberprüfung, Cookie-Zustimmung oder DSGVO .
  • Anmeldefenster für den Zugriff auf private Inhalte wie E-Mails oder Inhalte, die sich hinter einer Paywall befinden.
  • Kleine Banner, die leicht zu entfernen sind und „ausreichend Platz auf dem Bildschirm beanspruchen“, z. B. die von Chrome und Safari verwendeten App-Installationsbanner.

Pop-Ups, die in Ordnung sind

Unterm Strich frustrieren mobile Popups Benutzer und können Ihre verletzen Rankings suchen Verwenden Sie sie daher nur, wenn dies unbedingt erforderlich ist.

So finden Sie heraus, ob Sie eine mobilfreundliche Website haben

Wenn Sie sich fragen, ob Ihre Website für Handys geeignet ist, dauert es nur einen Moment, bis Sie dies herausgefunden haben Googles mobilfreundliches Testtool - Geben Sie einfach einen Link zu Ihrer Website ein und klicken Sie auf 'URL testen'.

Dieses Tool bewertet, wie mobilfreundlich Ihre Website ist, und gibt Ihnen eine detaillierte Aufschlüsselung der Maßnahmen, die Sie zur Verbesserung dieser Website ergreifen können.

Google & aposs Handyfreundlicher Test

Zusammenfassung: Mobile Website Design im Jahr 2021

Eine mobilfreundliche Website ist so konzipiert, dass sie auf Smartphones und Tablets gut funktioniert. Und jetzt, da die Welt an erster Stelle steht, sollte es auch Ihre Website sein.

Zusammenfassend sind hier acht Tipps zum Design mobiler Websites:

  1. Machen Sie Schaltflächen groß genug, damit Benutzer darauf tippen können.
  2. Stellen Sie sicher, dass der Text groß genug ist, um gelesen zu werden, ohne dass Benutzer hineinzoomen müssen.
  3. Vereinfachen Sie Ihr Menü, um die Navigation auf einem kleinen Bildschirm zu vereinfachen.
  4. Platzieren Sie die Suchfunktion vorne und in der Mitte und ermöglichen Sie den Benutzern, Suchergebnisse zu filtern.
  5. Machen Sie es Benutzern mühelos, sich mit Ihnen in Verbindung zu setzen.
  6. Erstellen Sie Formulare, die einfach und schnell zu verwenden sind.
  7. Platzieren Sie Handlungsaufforderungen über der Falte, damit sie hervorstechen.
  8. Vermeiden Sie es, Benutzer mit Popups zu frustrieren, es sei denn, sie sind unbedingt erforderlich.

Was denken Sie über das Design mobiler Websites? Haben wir großartige Best Practices für mobiles Webdesign verpasst? Lass es uns in den Kommentaren unten wissen!

Möchten Sie mehr erfahren?



^