7 Best Practices für das Design mobiler Websites (mit Beispielen)
Veröffentlicht: 2022-11-04
Die Art und Weise, wie wir auf das Internet zugreifen, hat sich in den letzten zehn Jahren verändert. Wir melden uns nicht mehr zu Hause auf Desktop-Computern an, sondern besuchen unsere Lieblingsseiten auf Smartphones und Tablets, oft auch unterwegs.
Wenn Sie Ihrem Publikum also ein außergewöhnliches Erlebnis bieten möchten, benötigen Sie ein effektives mobiles Website-Design. Aber was bedeutet es, Ihre Website mobilfreundlich zu gestalten, und wie gehen Sie dabei vor?
In diesem Leitfaden informieren wir Sie über alles, was Sie über das Design mobiler Websites wissen müssen. Lesen Sie weiter, um unsere Best Practices für das Jahr 2023 zu entdecken, und sehen Sie sich Beispiele für einige der besten mobilfreundlichen Websites und Vorlagen an.
Was verstehen wir unter „für Mobilgeräte optimiert“?
Eine für Mobilgeräte optimierte Website funktioniert auf allen Geräten. Es wird nichts geopfert, egal ob Sie über ein Smartphone, Tablet oder einen Desktop auf die Website zugreifen – einige Elemente können sich jedoch je nach verwendetem Gerät ändern, um das Erlebnis zu verbessern.
Der Aufstieg des Smartphones war eine Offenbarung für den Internetzugang, stellte Webentwickler aber auch vor eine Vielzahl von Herausforderungen. Die kleineren Bildschirme und das Fehlen einer Tastatur führten dazu, dass einige Websites auf mobilen Geräten nicht richtig funktionierten und andere überhaupt nicht funktionierten.
Entwickler erkannten bald, dass sie die Art und Weise, wie sie Websites erstellten, ändern mussten, um sie für Mobilgeräte zu optimieren. Daher wurden neue Best Practices für das Design mobiler Websites entwickelt, damit Websites auf allen Geräten korrekt angezeigt werden können.
Warum ist das Design mobiler Websites wichtig?
Als Reaktion auf den wachsenden mobilen Internetverkehr hat Google 2015 seinen Suchalgorithmus aktualisiert, um zu berücksichtigen, wie mobilfreundlich Websites sind. Der neue Algorithmus belohnt Websites, die für Mobilgeräte optimiert sind, und bestraft diejenigen, die dies nicht sind.
Wenn Sie also kein effektives mobiles Website-Design verwenden, werden Sie mit geringerer Wahrscheinlichkeit in den organischen Suchergebnissen für Ihre gewünschten Schlüsselwörter erscheinen. Aber selbst wenn Sie es schaffen, Benutzer auf Ihre Website zu locken, werden Sie auf Probleme stoßen.
Aktuellen Daten zufolge stammen mittlerweile 62,06 % des gesamten Website-Traffics von Mobilgeräten. Wenn diese Benutzer Ihre Website besuchen und feststellen, dass sie auf ihrem Gerät nicht richtig angezeigt wird oder funktioniert, werden sie wahrscheinlich gehen, um eine bessere Lösung zu finden. Das bedeutet, dass mehr als die Hälfte Ihrer potenziellen Kunden wegklicken, bevor sie Ihrer Website überhaupt eine Chance geben.
Durch eine für Mobilgeräte optimierte Website erhöhen Sie nicht nur die Chance, dass Ihre Seiten gefunden werden, sondern verringern auch Ihre Absprungrate und stellen sicher, dass jeder Besucher Ihre Website voll ausschöpfen kann.
Best Practices für das Design mobiler Websites
Okay, jetzt wissen Sie also, wie wichtig das Design mobiler Websites ist. Aber was müssen Sie tun, um Ihre Website mobilfreundlich zu gestalten?
Hier sind sieben Best Practices, die Sie befolgen sollten.
Verwenden Sie größeren Text
Der größte Unterschied zwischen Desktops und Mobilgeräten (insbesondere Smartphones) ist die Größe des Bildschirms. Die durchschnittliche Größe eines Smartphone-Displays beträgt 6,3 Zoll, im Vergleich zu Laptops mit Displays von 11 bis 17 Zoll und Computermonitoren, die oft 20 Zoll oder größer sind.
Wenn Sie also Ihre Website für Mobilgeräte entwerfen, sollten Sie in erster Linie sicherstellen, dass Ihre Überschriften und Inhalte auch auf einem kleineren Bildschirm lesbar sind. Dies bedeutet, die Größe Ihres Textes zu erhöhen.
Sicher, die meisten Geräte bieten Ihnen die Möglichkeit, bei Bedarf zu zoomen, aber das ist nicht gut für Ihre Benutzererfahrung. Im Idealfall ist Ihr gesamter Text sofort lesbar, ohne Anpassungen vornehmen zu müssen.
Machen Sie Ihre Schaltflächen größer
Genauso wichtig wie Ihre Inhalte sind Ihre CTA-Buttons. Diese ermöglichen es den Besuchern, den nächsten Schritt zu tun, und sind entscheidend für das Sammeln von Leads und das Abschließen von Verkäufen.
Wenn Ihre Schaltflächen zu klein sind, können Benutzer Ihren Schaltflächentext nicht lesen. Sie werden auch Probleme haben, sie mit Daumen oder Finger anzuklicken.
Genau wie Text können Benutzer Ihre Schaltflächen vergrößern – aber es ist am besten, wenn sie es nicht müssen. Stellen Sie stattdessen sicher, dass Ihre Schaltflächen die richtige Größe für den Bildschirm haben, damit sie einfach anzuklicken und zu lesen sind, sobald Ihre Seite geladen wird.
Vereinfachen Sie Ihre Menüs
Dropdown-Menüs eignen sich hervorragend für Websites mit vielen Seiten. Sie können Kategorien und Unterkategorien für Ihre Seiten erstellen, damit Besucher schnell und einfach finden, wonach sie suchen.
Es gibt nur ein Problem: Sie funktionieren nicht für mobile Geräte. Ohne Maus sind Dropdown-Menüs klobig und der kleinere Bildschirm erschwert ihre Verwendung. Wenn Ihre Desktop-Website Dropdown-Menüs verwendet, ist es eine gute Idee, zu einem einfacheren Menü für die mobile Version zu wechseln.
Beginnen Sie damit, die Anzahl der Optionen zu reduzieren. Vielleicht möchten Sie Ihre fünf beliebtesten Seiten auswählen und diese auflisten. Leiten Sie Benutzer anstelle von Dropdowns auf Seiten, die Ihre verschiedenen Kategorien auflisten. Dies erleichtert es ihnen, auf die gewünschte Option zu klicken.
Fügen Sie eine Suchfunktion hinzu
Vielleicht ist der beste Weg, mobilen Besuchern dabei zu helfen, das zu finden, wonach sie suchen, eine Suchfunktion einzufügen. Dies macht im Wesentlichen die Notwendigkeit eines Menüs vollständig überflüssig und ermöglicht es den Benutzern, Ihnen einfach zu sagen, was sie wollen.
Viele mobile Website-Designs platzieren die Suchfunktion vorne und in der Mitte, sodass sie Vorrang vor dem Menü hat. Wenn Ihre Website viele Kategorien und Seiten hat, ist dies wahrscheinlich eine kluge Wahl.
Optimieren Sie Ihre Bilder
Bilder sind für die Übermittlung Ihrer Botschaft genauso wichtig wie Worte, daher möchten Sie, dass sie richtig angezeigt werden.
Hier sind ein paar Tipps:
- Stellen Sie sicher, dass Ihre Bilder auch auf den kleinsten Bildschirmen zu sehen sind. Möglicherweise müssen Sie Ihre Website neu ausrichten, damit Bilder den gesamten Bildschirm ausfüllen können.
- Vermeiden Sie Landschaftsfotos. Die meisten Menschen verwenden ihre Telefone in aufrechter Position, wodurch Landschaftsbilder kleiner erscheinen. Verwenden Sie stattdessen quadratische oder Hochformatfotos.
- Komprimieren Sie Ihre Bilder so weit wie möglich. Mobile Geräte haben nicht die gleiche Rechenleistung wie Desktops, daher könnten zu große Bilder die Ladezeiten verlängern.
Die richtigen Bilder können den Unterschied zwischen einem Kauf oder dem Verlust eines Kunden ausmachen. Stellen Sie also sicher, dass Ihre Bilder die Chance haben, zu glänzen, egal auf welchem Gerät sie angesehen werden.
Wunderschöne Websites mit der vollen Conversion-Power von Leadpages
Erleben Sie den einzigen Online-Website-Builder, mit dem Sie ganz einfach eine hochkonvertierende Website mit codefreien Anpassungen erstellen können.
Erstellen Sie Ihre Seiten für Daumen
Ein großer Teil des mobilen Website-Designs besteht darin, sich daran zu erinnern, dass Besucher ihre Daumen und nicht Maus und Tastatur verwenden, um mit den verschiedenen Elementen auf Ihrer Seite zu interagieren.
Eine gute Übung ist es, ein Smartphone in die Hand zu nehmen und zu sehen, welche Bereiche mit den Daumen gut erreichbar sind. Sie werden feststellen, dass die Ecken schwer bequem zu erreichen sind und größere Telefone es praktisch unmöglich machen, den oberen Rand des Bildschirms zu erreichen.
Wenn es also eine Schaltfläche gibt, auf die die Leute klicken sollen, platzieren Sie sie an einer Stelle, die mit dem Daumen erreichbar ist – idealerweise direkt in der Mitte des Bildschirms.
Machen Sie es sich einfach, mit Ihnen in Kontakt zu treten
Wie Sie sehen können, muss eine Website oft vereinfacht werden, um sie für Mobilgeräte optimiert zu machen. Während dies eine bessere Benutzererfahrung bietet, kann es bei Besuchern zu Fragen kommen, wenn einige Elemente oder Informationen entfernt werden müssen.
Um Antworten zu geben, machen Sie es ihnen leicht, mit Ihnen oder einem Mitglied Ihres Teams zu sprechen. Hier sind einige Optionen:
- Bieten Sie einen Chat-Dienst an, um Benutzer mit Ihrem Team zu verbinden. Oder verwenden Sie Chatbots, um häufig gestellte Fragen zu beantworten.
- Geben Sie anklickbare Telefonnummern an, damit Besucher Sie anrufen können.
- Verwenden Sie ein vereinfachtes Kontaktformular oder einen Link, der sie direkt zu ihrer E-Mail führt, damit sie Ihnen eine Nachricht senden können.
Wie gestaltet man eine Website für mobile Endgeräte?
Es ist schön und gut zu wissen, was Sie tun müssen, um eine für Mobilgeräte optimierte Website zu erstellen. Aber wie macht man das eigentlich, besonders wenn man kein Webdesigner oder jemand ist, der technisch versiert ist?
Glücklicherweise machen es Website-Builder wie Leadpages einfach, schöne Websites zu erstellen, die den Best Practices für Mobilgeräte folgen.
Zunächst einmal verwenden alle unsere Vorlagen ein responsives Design, was bedeutet, dass sie sich automatisch neu konfigurieren, um sie an das Gerät anzupassen, auf dem sie angezeigt werden. Sobald Sie Ihre Vorlage ausgewählt haben, ziehen Sie Elemente per Drag-and-Drop an die richtige Stelle, bearbeiten Sie Ihren Text und fügen Sie Ihre Bilder hinzu.
Beim Erstellen Ihrer Website können Sie gerätespezifische Abschnitte erstellen, um die Benutzererfahrung weiter zu verbessern. Wenn Sie beispielsweise möchten, dass Ihr Heldenbereich auf Smartphones auf eine bestimmte Weise angezeigt wird, können Sie einen separaten Heldenbereich speziell für dieses Gerät erstellen.
Schließlich können Sie eine Vorschau Ihrer Website in Desktop-, Tablet- und Smartphone-Ansichten anzeigen, um sicherzustellen, dass Sie mit der Darstellung Ihrer Website auf allen Geräten zufrieden sind.
Designbeispiele für mobile Websites
Brauchen Sie ein wenig Inspiration, bevor Sie mit Ihrer eigenen Website beginnen? Hier sind fünf Beispiele für hervorragende mobile Website-Designs, die Sie nachahmen können.
Jereshia Hawk
An der mobilen Version von Jereshias Website gibt es viel zu mögen. Das Hero-Bild verwendet eine Hochformatausrichtung, die sich hervorragend für die mobile Ansicht eignet. Sie hat auch ihren Heldenbereich neu geordnet, sodass ihre Überschrift, ihr Foto und ihre Beschreibung alle auf einen mobilen Bildschirm passen. Schließlich erleichtert der Chat-Button in der Ecke den Besuchern, mit jemandem zu sprechen, wenn sie Fragen haben.
Mattia di Stasi
Dies ist ein sehr sauberes mobiles Design, das angenehm für die Augen ist. Unordnung wird auf einem kleinen Bildschirm verstärkt, daher ist ein sauberes und einfaches mobiles Website-Design immer eine kluge Wahl. Mattia erzielt ein sauberes Aussehen und verwendet gleichzeitig eine Reihe auffälliger Grafiken, die perfekt auf den Bildschirm passen.
Weltbegegnung
Die Website von World Encounter ist voll von Grafiken und ansprechenden Inhalten, und dennoch wird nichts davon auf der mobilen Version ihrer Website geopfert. Alles wurde perfekt für den kleineren Bildschirm angepasst und bietet ein großartiges Erlebnis für mobile Besucher.
Agentenvorlage ändern
Diese Leadpages-Vorlage sieht auf Mobilgeräten großartig aus. Die Überschrift, die Beschreibung und die CTA-Schaltfläche im Hero-Bereich werden perfekt angezeigt, ohne dass nach unten gescrollt werden muss, und der Rest der Bereiche ist für mobile Benutzer klar und lesbar.
Vorlage für ein virtuelles Fitnessstudio von Marvel
Hier ist ein weiterer Blick darauf, wie sich Leadpages-Vorlagen perfekt an mobile Geräte anpassen. Welche Vorlage Sie auch verwenden, Ihr Menü wird automatisch auf das Hamburger-Symbol verschoben, um Unordnung zu beseitigen, und Ihre Inhalte werden neu angeordnet, um auf einen mobilen Bildschirm zu passen. Sie können dann weitere Anpassungen vornehmen, um Ihr ideales Design zu erstellen.
Erstellen Sie noch heute Ihre mobile Website
Benötigen Sie das richtige mobile Website-Design für Ihr Unternehmen? Mit mobilfreundlichen Vorlagen, einem benutzerfreundlichen Drag & Drop-Builder und gerätespezifischen Anzeigen ermöglicht Leadpages jedem, eine Website zu erstellen, die den Best Practices für Mobilgeräte folgt.
Testen Sie Leadpages 14 Tage lang kostenlos und gehen Sie noch heute online.
Testen Sie Leadpages 14 Tage lang kostenlos
Erstellen Sie ganz einfach Ihre Website und Zielseiten mit der einzigen Plattform, die von Marketing-Nerds entwickelt wurde.
Sie fragen sich, was Sie als nächstes lesen sollen?
Hier ist, was wir vorschlagen:
→ 11 moderne Website-Design-Trends, die Sie für 2023 kennen sollten
→ Planen Sie, Ihre Website selbst zu gestalten? Verwenden Sie diesen 9-Schritte-Website-Content-Plan
→ Wie viel kostet es im Jahr 2022, eine Website für ein kleines Unternehmen zu erstellen?