Best Practices für mobiles Website-Design

Wenn Nutzer:innen deine Website besuchen, greifen sie von diversen Geräten wie z. B. einem Laptop, Monitor, Smartphone oder Tablet aus darauf zu. Bei so vielen verschiedenen Bildschirmgrößen ist es wichtig, eine Website zu erstellen, die einheitlich aussieht und auf jedem Gerät problemlos funktioniert. Wenn du bei der Gestaltung deiner Website einen Mobile-First-Ansatz verfolgst, sorgst du für ein besseres Benutzererlebnis (User Experience – UX). 

Erfahre mehr über Mobile-First-Design für Websites und wie du erreichen kannst, dass Besucher:innen deine Website positiv wahrnehmen.

Was ist Mobile-First-Webdesign?

Mobile-First ist eine Designphilosophie, die durch die Berücksichtigung kleinerer Bildschirme ein benutzerfreundlicheres Browser-Erlebnis bietet. Es basiert auf der Idee der progressiven Weiterentwicklung. Es wird also zunächst die kleinste Version entworfen und diese wird später für größere Versionen (z. B. Desktop oder Smart TV) angepasst.

Du kannst dieselben Mobile-First-Prinzipien anwenden, die UX-Designer:innen verwenden, indem du zuerst an die Besucher:innen deiner mobilen Website denkst. Dabei musst du den begrenzten Platz optimal nutzen, indem du die wichtigen Elemente einer Website – wie die Website-Navigation und Handlungsaufforderungen – in den Mittelpunkt stellst.

Alle Squarespace-Websites verfügen über ein integriertes responsives Design, das Inhaltsfelder und Bilder automatisch neu skaliert, sodass sie an verschiedene Bildschirmgrößen angepasst werden. Du kannst im Website-Editor auch eine Vorschau deiner Website auf Mobilgeräten anzeigen und Änderungen vornehmen, die sich nur auf die mobile Website auswirken.

So gestaltest du eine Website mobilfreundlich

Wenn jemand von einer mobilen Website spricht, meint man damit, wie deine Website auf einem Mobilgerät aussieht. Das Hauptziel des mobilen Webdesigns besteht darin, dass Menschen, die deine Website auf dem Mobilgerät aus ausrufen, schnell, einfach und effektiv auf Informationen zugreifen können. Hier lautet das Stichwort: Bequemlichkeit.

Grundlagen des Mobile-First-Webdesigns

Du musst nicht deine gesamte Website auf einmal aktualisieren. Wenn du wenig Zeit hast, konzentriere dich auf einige wichtige Aspekte des smarten mobilen Webdesigns. Behalte diese Best Practices bei der Gestaltung deiner Website im Hinterkopf.

• Beschränke dich auf das Wesentliche. Erstelle deine Website rund um die Inhalte, die die Leute wirklich sehen wollen. Entferne Störfaktoren und Ablenkungen, damit deine mobilen Benutzer:innen problemlos zu den Dingen und Aktionen gelangen, die sie sehen wollen bzw. durchführen sollen.

• Sei ein Blickfang. Sind die anklickbaren Funktionen leicht zu erkennen? Sind deine Buttons zur Handlungsaufforderung z. B. fett, einheitlich gestaltet und leicht zu erkennen? Sind deine Icons, Farben und Typografie auf kleinen Bildschirmen gut lesbar?

• Sei flexibel. Eine langsame Ladezeit der Website kann deine Bounce-Rate erhöhen (die Anzahl der Leute, die deine Website nach dem Besuch einer einzigen Seite wieder verlassen) und deine durchschnittliche Verweildauer verringern (die Zeit, die Leute auf einer Seite verbringen). Du kannst die Ladegeschwindigkeit auf Mobilgeräten erhöhen, indem du deine Bilder komprimierst und Links zu Websites mit Umleitungen minimierst.

Schaffe eine visuelle Inhaltshierarchie

Die Rangfolge der einzelnen Inhalte sollte auf einer für mobile Endgeräte konzipierten Website offensichtlich sein. Mobile Nutzer:innen sollten auf einen Blick erkennen können, wo sie suchen und was sie anklicken müssen. Da du mit weniger Platz auskommen musst, kannst du im Voraus planen, wie sie eine Seite lesen werden. 

Beginne mit einem Inhaltsinventar, also einer Bestandsaufnahme deiner Inhalte. Dabei handelt es sich um eine Tabelle mit allen Elementen, die du in deine Website einbauen willst. Erstelle dann eine Prioritätenliste. Was sollen deine Kund:innen als Erstes sehen, und was dürfen sie auf keinen Fall übersehen? Das ist deine visuelle Hierarchie.  

Dein Logo sollte zum Beispiel das Erste sein, was Benutzer:innen sehen, da es zur Steigerung der Markenbekanntheit beiträgt. Es kann oben auf jeder Seite erscheinen, gefolgt von den Seitentiteln. Die Navigation deiner Website sollte auch jederzeit zugänglich sein, sodass Besucher:innen alle deine Seiten problemlos erkunden können. Auch die Buttons zur Handlungsaufforderung sollten in der visuellen Hierarchie deiner Website-Inhalte weit oben stehen.

Egal, ob du die Website anhand eines Templates oder mit einem Wireframe entwickelst: Es ist hilfreich, zuerst eine visuelle Hierarchie zu erstellen. Sie hilft dir, größere strukturelle Änderungen während der Bau- oder Testphase zu vermeiden.

4 Beispiele für mobile Websites

Auf dem Mobilgerät kannst du immer nur ein paar Dinge gleichzeitig auf dem Bildschirm darstellen. Das Wichtigste bei der Gestaltung deiner mobilen Website ist, dass du deinen Besucher:innen so schnell wie möglich die wichtigsten Details zeigen kannst. 

Setze dir ein Ziel: Möchtest du, dass sie deine Arbeit sehen, in deinem Shop einkaufen oder eine andere Seite deiner Website besuchen? Die folgenden Beispiele zeigen, wie du Besucher:innen in die richtige Richtung weisen kannst.

1. Onlineshop

Das Ziel dieser E-Commerce-Website besteht darin, dich zum Kauf in diesem Shop zu bewegen. Das mobile Design hebt die beiden Dinge hervor, die du sofort sehen musst: die angebotenen Produkte und einen Button zur Handlungsaufforderung, der zum gesamten Shop führt.

Du kannst auch auf deinen Warenkorb und die vollständige Website-Navigation zugreifen, damit du die gewünschten Inhalte schnell findest.

Sieh dir das vollständige Crosby-Template an

2. Fotografie-Portfolio

Vielleicht besteht das Ziel darin, deine Kunst zur Schau zu stellen, um deinen Ruf aufzubauen, Kund:innen anzuziehen oder beides. Die mobile Ansicht der Reseda-Website lenkt deine Aufmerksamkeit auf den Markennamen und ein ausgewähltes Bild. Idealerweise ist das Bild das Werk, auf das du besonders stolz bist oder das deine Ästhetik am besten widerspiegelt. 

Wenn du weiter scrollst, erfährst du mehr über die Fotografin und entdeckst weitere Portfolio-Sammlungen. Das Design wirkt nie überwältigend und gibt den Fotos trotzdem genug Freiraum, um sich zu entfalten.

Sieh dir das vollständige Reseda-Template an

3. Projektbasierte Dienstleistungen

Wenn du deine professionellen Dienstleistungen verkaufst, sind deine Fachkenntnisse und deine Serviceoptionen das Wichtigste für potenzielle Kund:innen. Mit nur zwei Sätzen erzählt dir diese mobile Website alles, was du darüber wissen musst, was dieses Unternehmen macht und auf welches Fachgebiet es sich konzentriert. 

Wenn du kurz scrollst, erhältst du einen Überblick über den Designstil, die Erfahrung der Designerin und Erfahrungsberichte. Das Design bietet klare und leicht zu navigierende Abschnitte. Die Handlungsaufforderungen sind klar beschriftet, sodass du weißt, wohin dich die Links und Buttons führen.

Sieh dir das vollständige Condesa-Template an

4. Onlinekurs

Ähnlich wie im Onlineshop oben sorgt die mobile Website für diesen Onlinekurs dafür, dass Besucher:innen sofort die Informationen sehen, die sie benötigen: was der Onlinekurs umfasst und einen Link, um ihre Lernoptionen zu erkunden. 

Die Kursseite selbst passt sich an kleinere Bildschirme an, sodass die verschiedenen Lektionen und Beschreibungen immer noch leicht zu sehen sind. 

Sieh dir das vollständige Kusa-Template an

Warum mobiles Webdesign wichtig ist

Die Daten von Squarespace Analytics zeigen dir, wie viele Besucher:innen deine Website auf einem Mobilgerät ansehen. Wie gut deine Website in der mobilen Ansicht funktioniert, wirkt sich darauf aus, wie diese Besucher:innen auf Mobilgeräten deine Marke sehen – oder ob sie sie überhaupt entdecken. Neue Besucher:innen, die deine Website auf dem Mobilgerät finden, kehren möglicherweise nicht zurück, wenn sie schwer zu navigieren ist. Hinzu kommt, dass eine mangelnde Mobilfreundlichkeit deinem Suchranking schaden kann.

Aufbau von Beziehungen zur Zielgruppe

Wie gut deine Website funktioniert – das Benutzererlebnis – ist eine der wichtigsten Möglichkeiten, wie du deine Beziehung zu den Besucher:innen deiner Website beeinflussen kannst. Betrachte deine Website als eine Erweiterung von dir. Wenn es schwierig ist, Informationen zu finden oder deine Website zu nutzen, ist es wahrscheinlicher, dass jemand sie verlässt und nicht mehr zurückkommt. Dadurch lernen sie dich und deine Arbeit überhaupt nicht kennen.

Je einfacher die Navigation auf deiner Website ist, desto wahrscheinlicher ist es, dass die Leute bleiben und auch mehrere Seiten besuchen. Vielleicht schauen sie sich zuerst deine Produkte an, aber wenn du sie auf die „Über mich“-Seite oder zur Anmeldung für deine Mailingliste leitest, eröffnen sich mehr Möglichkeiten, treue Unterstützer:innen oder Kund:innen zu gewinnen.

Triff deine Zielgruppe dort, wo sie zu finden ist

Auch wenn Conversions auf dem Desktop höher sind als auf dem Handy, findet der Großteil der Markenbekanntheit und der Kundeninteraktion auf Mobilgeräten statt. Daraus leiten wir ab, dass die meisten Menschen auf ihren Smartphones nach Produkten suchen und sie dann vom Desktop-Computer von zu Hause aus oder am Arbeitsplatz kaufen. 

Wenn du ein positives Erlebnis auf Mobilgeräten schaffst, erhöht sich die Wahrscheinlichkeit, dass jemand zu dir zurückkommt, wenn sie Zugriff auf einen Laptop- oder Desktop-Bildschirm haben.

Steigere dein SERP-Ranking

In vielen Fällen betrachten die weltweit größten Suchmaschinen, z. B. Google, zuerst die mobilen Versionen und dann die Desktop-Versionen von Websites. Demzufolge ist es unerlässlich, dass deine mobile Website mindestens genauso gut, wenn nicht sogar besser als deine Desktop-Oberfläche funktioniert, um dein Ranking auf den Suchmaschinenergebnisseiten (SERP) zu verbessern.

So kannst du deine SEO über gut erstellte, Keyword-reiche Inhalte hinaus verbessern und dafür sorgen, dass so viele potenzielle Kund:innen wie möglich deine Website besuchen.

Baust du deine Website noch auf? Erfahre mehr über die Gestaltung einer Landing-Page.

Dieser Beitrag wurde am 27. März 2024 aktualisiert.