Ein mobilfreundliches Webdesign räumt der mobilen Internetnutzung große Priorität ein, statt sie wie ein Anhängsel der Desktop-Version zu behandeln.

Diese Herangehensweise ist im letzten Jahrzehnt extrem wichtig geworden. Laut einer Studie von Statista kommt über die Hälfte des Website-Traffics mittlerweile von Mobilgeräten und das beinhaltet rund 45 % des gesamten Onlinehandels. Wenn man bedenkt, dass es Smartphones erst seit ungefähr zehn Jahren gibt, können wir davon ausgehen, dass diese Zahlen noch steigen werden, da das mobile Surfen noch selbstverständlicher und die Designs noch intuitiver werden.

Illustration von verschiedenen Personen, die eine positive Erfahrung mit mobilen Websites haben
Gute mobilfreundliche Websites behandeln mobiles Design nicht wie ein Anhängsel der Desktop-Version. Design von OrangeCrush

Deshalb riskieren Webseiten, die es nicht schaffen, eine ordentliche Strategie für ein hochwertiges Mobilerlebnis zu liefern, hinter ihren Konkurrenten zurückzufallen. Damit du von der Konkurrenz nicht abgehängt wirst, haben wir diesen Guide mit den gängigsten Tipps und Tricks zusammengestellt, wie du eine mobilfreundliche Website erstellst.

Die 7 besten Designtipps für eine mobilfreundliche Website

  1. Nutze den Mobile-first-Ansatz
  2. Nutze empfohlene Größenmaße für Mobilgeräte
  3. Optimiere für Hochformat
  4. Halte das Menü klein
  5. Klappe sekundären Content ein
  6. Schränke Formularfelder und Texteingaben ein
  7. Mobilfreundlich bedeutet daumenfreundlich

Tipp 1: Nutze den Mobile-first-Ansatz

Seit auf Mobilgeräten mehr gesurft wird als auf Desktopgeräten, mussten sich Designer von dem Gedanken verabschieden, die Desktop-Version als „Hauptversion“ zu betrachten. Deshalb ist der „Mobile-first-Ansatz“ – also das Designen der mobilen Website vor der Desktopseite – seit einigen Jahren gang und gäbe.

Indem bei der Gestaltung das Mobilerlebnis in den Mittelpunkt rückt, werden Designer dazu gebracht, sich bei Designentscheidungen aufgrund der Einschränkungen zurückzuhalten. Es gibt nicht nur Einschränkungen bei der Größe, sondern Nutzer von Mobilgeräten interagieren auch häufig nur mit einer Hand und eine Eingabe, die über Tippen und Wischen hinausgeht, ist in der Regel mühsamer als am Desktop. Denke zum Beispiel an Hover-Animationen, die auf eine Eingabe per Maus angewiesen sind: Wenn deine Desktop-Version zu sehr auf dieser Art visuellem Feedback basiert, wird dies später zu einem Problem für die Mobilversion.

Design von mobilen und Desktop-Websites für eine Elektronikmarke
Mobil-first-Design bedeutet, dass es leichter ist, für einen kleineren Bildschirm zu planen, als später ein komplexeres Layout zu vereinfachen. Design von Naveeß

Infolgedessen steht bei Mobile-first-Designs die Einfachheit und Benutzerfreundlichkeit von Beginn an im Vordergrund. Beachte, dass dieser Ansatz die Desktop-Versionen nicht zu minimalistischer Sparsamkeit verdammt. Auf der anderen Seite ist es einfacher, ein simples Layout zu erweitern als ein komplexes Layout zu vereinfachen.

Es ist ebenfalls wichtig, deine Fotos und Videos zu testen, da Fotos und Videos, die für eine horizontale Ausrichtung gemacht sind, möglicherweise nicht gut im Hochformat funktionieren. Feine Details wie Gesichtsausdrücke oder Hintergrundelemente können schwerer zu erkennen sein, wenn sie klein sind. Zusätzlich gibt es häufig nur Platz für ein Bild und wenn du zuerst eine Desktop-Website mit vielen Bildern designst, kann das Durchscrollen aller Bilder auf dem Mobilgerät zu viel werden.

Tipp 2: Nutze empfohlene Größenmaße für Mobilgeräte

Auf einem Mobilgerät kann sich der Platz eingeschränkter anfühlen als bei jedem anderen Design. Die Größenbeschränkungen zu Beginn deines Projekts zu berücksichtigen ist der beste Weg, um spätere Konflikte zu vermeiden.

Die Auflösung von Mobilgeräten variiert je nach Gerät; momentan ist die am häufigsten genutzte Auflösung 360×640 Pixel (Seitenverhältnis 9:16), laut einer Studie von statcounter. Google Analytics kann dir sagen, welche Geräte deine Nutzer bevorzugen, und du solltest sicherstellen, dass dein Webdesign responsiv genug ist, um sich an Abweichungen anzupassen.

Blaues und oranges mobiles Webdesign für Auto-Berichtsservice
Dieses Mobildesign enthält eine klare typografische Hierarchie sowie große Buttons und Formularfelder. Design von Marian Voicu

Was die Schriftgrößen für Mobildesigns angeht, werden mindestens 16px für den Text empfohlen. Dies kann sich je nach Schriftart unterscheiden (aufgrund ihres Aufbaus sind einige Schriften bei 16px weniger gut zu lesen als andere).

Es gibt keine Standardgröße für Überschriften, aber das Ziel besteht darin, eine klare typografische Hierarchie durch einen Kontrast in Größe, Dicke und Stil zu kreieren. Wenn du Zweifel hast, teste die Schriftgrößen einfach selbst auf einem Mobilgerät.

Mobiles Webdesign für Reinigungsservice mit grünen Details
In diesem Design wird ein breites Hero Image für die Mobilversion beschnitten. Design von akorn.creative

Bilder und andere Medien können natürlich so breit sein, wie das Gerät es zulässt. Lasse das Motiv des Bildes bestimmen, wie groß oder klein es sein sollte, um die Übersichtlichkeit zu bewahren. Denke daran, dass du nicht das gesamte Bild einfügen musst, sondern hereinzoomen und unwichtige Hintergrundelemente herausschneiden kannst, so wie im Beispiel oben.

Zu guter Letzt ist die Buttongröße bei mobilfreundlichen Webdesigns extrem wichtig, da sich Eingaben auf Touchscreens wesentlich ungenauer tätigen lassen als mit Maus und Tastatur. Eine Studie, bei der ältere Nutzer im Mittelpunkt stehen, empfiehlt, dass die Größe für Buttons auf Touchscreens zwischen 42px und 72px liegen sollte, um diese optimal bedienen zu können.

Tipp 3: Optimiere für Hochformat

Obwohl mobile Webseiten im Grunde auch im Querformat genutzt werden können, indem das Gerät gedreht wird, ist die Verwendung im Hochformat sehr viel verbreiteter. Durch Blackberry wurde es in den 2000er-Jahren gang und gäbe, das Telefon mit zwei Händen zu halten, doch dies änderte sich mit dem Aufkommen der Smartphones allmählich und mittlerweile bevorzugen Nutzer eine einhändige Bedienung im Hochformat.

Eine minimalistische, tropische fotografische mobile Webseite
Obwohl es auf mobilen Webseiten weniger horizontalen Platz gibt, können Designer Weißraum und Padding nutzen, um Hervorhebungen, größeren Text und Scrollen zu unterstützen. Design von Newwen

Die Begrenztheit des Hochformats eignet sich perfekt für einspaltige Layouts. Bei diesem Stil werden Seitenelemente der Reihe nach von oben nach unten platziert. Auch wenn eine zentrierte Ausrichtung des Contents üblicher ist, kann eine abwechselnd linksseitige und rechtsseitige Ausrichtung optisch interessant sein und die Illusion eines zweispaltigen Layouts kreieren. Zusätzlich können kleinere Elemente wie Icons und Fotos in einem Gitter präsentiert werden, wohingegen Bilderkarussells vertikales Scrollen durch horizontales Wischen auflockern können.

Abgesehen davon kreative Wege zu finden, um das einspaltige Layout aufzulockern, gibt es auch Möglichkeiten, es zu deinem Vorteil zu nutzen. Da Social-Media-Apps Nutzer an langes Scrollen gewöhnt haben, können Webdesigner Content mit Weißraum und Padding anordnen. Dadurch bleibt der Content übersichtlich und lesbar, während durch kontinuierliches Scrollen das Engagement gefördert wird.

Stell dir mal das Gegenteil vor: Viel Content wirkt auf einem einzelnen Bildschirm mit eingeschränktem Scrollen einfach nur abschreckend.

Mobiles Webdesign im dunklen Modus für mexikanische Armbandmarke
Dieses Design nutzt schräge, grafische Abschnitte und mehrere Balken, damit sich die zentrale Ausrichtung nicht so monoton anfühlt. Design von boorykin

In Abschnitten zu designen ist auch hilfreich, um ähnliche Informationen zu gruppieren, damit der Nutzer den Zweck jedes Abschnitts versteht, ohne genau lesen zu müssen. Dies ist besonders hilfreich, wenn mann bedenkt, dass ungefähr 79 % der Seitenbesucher eine Website nur überfliegen. Unterschiedliche Hintergrundfarben helfen dabei, diese Abschnitte voneinander zu trennen, und kreative Grenzen sorgen dafür, dass sie sich nicht so klobig anfühlen.

Tipp 4: Halte das Menü klein

Die Navigation ist ein weiterer Bereich, der schnell kompliziert werden kann, abhängig davon, wie viele Ziele und Optionen einem Nutzer gegeben werden. Während Desktop-Webseiten dazu neigen, eine komplette Navigationsleiste mit mehreren Haupt- und Untermenüs im Header zu haben, hat es sich zum Standard entwickelt, all diese innerhalb eines einfachen, leicht zu erkennenden Hamburger-Symbols zusammenzufassen. Dadurch sind die meisten Header mobiler Webseiten auf dieses Symbol und das Logo reduziert.

Design und Navigationsmenü für mobile Websites für Reiseblogs
Das Hamburger-Symbol in diesem Design öffnet das Navigationsmenü, welches zu zwei Drittel die Seite überlagert. Design von veshi

Was den Stil des eigentlichen Menüs angeht, setzt man häufig auf eine Sidebar, die sich heraus schiebt und einen Teil des Bildschirms überlagert und so die Navigationsoptionen anzeigt. Dies ermöglicht es dem Menü, in einer eigenen Dimension zu existieren, die sich vom Rest des Contents abhebt, und gibt dem Nutzer die Möglichkeit, auf eine andere Stelle des Bildschirms zu tippen, um das Menü zu verlassen und zum vorherigen Bildschirm zurückzukehren.

Abhängig davon, wie komplex dein Menü ist, kann jedes Menü weitere Optionen oder ein Untermenü enthalten. Wenn der Nutzer eines dieser Untermenüs anklickt, sollte die neue Liste mit Optionen am besten das bestehende Menü ersetzen, um die Liste kurz zu halten.

Vergiss nicht, die Navigationsleiste am Bildschirm zu fixieren, damit der Nutzer nicht wieder den ganzen Weg nach oben scrollen muss. Eine übliche Praxis besteht darin, die fixierte Navigation zu verstecken, während der Nutzer runter scrollt, damit der Fokus auf dem Content liegt, und das Navigationsmenü einzublenden, wenn der Nutzer nach oben scrollt.

Design und Navigationsmenü für mobile Websites für eine Fitnessmarke
Dieses Navigationsmenü nutzt Tabs, um die einzelnen Optionen zu unterteilen. Design von Ex-Dreamer

Es gibt alternative Navigationsmöglichkeiten, die anstelle von oder zusätzlich zu Standardmenüs nützlich sind. Tabs ermöglichen es dem Nutzer, leicht andere Abschnitte anzusehen, ohne eine komplett neue Seite laden zu müssen.

Viele UX-Designer entdecken Navigationslösungen für sich, die über das Tippen hinausgehen – horizontales und/oder vertikales Wischen sieht man hier am häufigsten. Wenn alle Stricke reißen, gibt es immer noch das praktische Suchen-Symbol auf Mobilgeräten, das den Nutzern ermöglicht, bestimmte Dinge zu finden.

Tipp 5: Klappe sekundären Content ein

Desktop-Webseiten bieten häufig Platz für umfangreichen Text, Produktspezifikationen und weiteren Content. Da Informationen auf Mobilseiten jedoch direkt auf den Punkt kommen müssen, sollten Designer jeden unnötigen Content entfernen oder kürzen. An dieser Stelle kommen einklappbare/ausklappbare Abschnitte wie gerufen.

Bei ausklappbarem Content müssen erläuternde Informationen optional gestaltet werden, mit einem Symbol wie einem Dreieck oder Pluszeichen, welches den versteckten Content anzeigt. Auch wenn es nach keiner guten Idee klingen mag, deinen Content zu verstecken, überwiegen die Vorteile des vereinfachten Browsens, das durch überzeugende Überschriften unterstützt wird, bei weitem das Potenzial für verpasste Informationen. Die Mikrointeraktion des Umschaltens lädt den Nutzer ebenfalls dazu ein, mit der Seite zu interagieren, statt sie lediglich passiv zu konsumieren.

Mobiles Website-Design mit hellblauem Thema für Personalabteilung
Dieses Design nutzt Karussells, um den Testimonial-Abschnitt anzuordnen. Design von Artyom Ost

Designer sollten das Einklappen von Content weniger wichtigem Text unterhalb des Headers vorbehalten. Sich wiederholender Content kann so zusammengeführt werden, dass er den gleichen Bereich überlappt, anstatt die Bereiche übereinander zu stapeln. Im hier gezeigten Design von Artyom Ost gibt es in der Desktop-Version drei Kundenzitate unter dem Header und in der Mobilversion hat der Designer sie in einem Karussell zusammengefasst.

Mobiles Website-Design für einen Klavierkauf- und -mietservice
Unter der Hero Section ermöglicht es dieses Design dem Nutzer, detaillierten Content ein- und auszuklappen. Design von boryszbn

Irrelevanter Content, auf den du im mobilfreundlichen Webdesign grundsätzlich verzichten solltest, sind Interstitials und Popups. Diese können zwar Platz sparen, indem man Content in einem separatem Fenster einblendet, allerdings sind Webseiten, die mit nervigen Popups durchzogen sind, nicht nur frustrierend, sondern werden auch von Google bestraft.

Tipp 6: Schränke Formularfelder und Texteingaben ein

Texteingaben sind eines der größten Probleme im Mobildesign. Auch wenn ein Wort hier und da keine große Sache ist, gibt es wohl kaum jemanden, der nicht schon mal aufgestöhnt hat, als er aufgefordert wurde, seine Mailadresse einzugeben. Aus diesem Grund sollten du Formulare möglichst auf ein Minimum reduzieren.

Mobiles Website-Design für einen Ticketservice mit blauem Thema
Dieses Design nutzt verschieden Dropdown-Optionen und Radiobuttons statt Texteingaben. Design von CreativeMalia

Möglichkeiten zum automatischen Ausfüllen, wie z. B. das Ermitteln des größten Teils einer Adresse anhand einer Postleitzahl oder die Bereitstellung einer vorausgefüllten Auswahl für gängige E-Mail-Suffixe können einige dieser Interaktionen vereinfachen. Der Login eines Nutzers und seine persönlichen Informationen können mit anderen profilbasierten Programmen wie Apple, Google oder Facebook ebenfalls auf wenige Klicks reduziert werden.

Drittanbieter-Integrationen von Zahlungsdienstleistern wie PayPal sind ebenfalls praktisch bei Käufen auf Shopping-Webseiten, bei denen die Eingabe von Kreditkartendaten selbst auf dem Desktop mühselig sein kann. Falls diese Option nicht verfügbar ist, kannst du es dem Nutzer auch ermöglichen, als Gast fortzufahren und seine Versandinformationen in den Rechnungsinformationen übernehmen.

Tipp 7: Mobilfreundlich bedeutet daumenfreundlich

Laut einer Studie aus dem Buch Designing for Touch von Josh Clark, interagieren Nutzer bei mindestens 75 % aller mobilen Interaktionen mit dem Daumen. Dazu gehört Scrollen, Klicken, Wischen und Texteingabe, wobei die restlichen Finger das Telefon halten. Bedenke auch, dass in vielen Fällen Nutzer ihre weniger dominante Hand verwenden, um das Telefon zu halten, während sie nebenbei andere Dinge tun. Daher ist klar, dass Designer vor allem Wert darauf legen müssen, dass bei mobilen Interaktionen alles mit dem Daumen zu erreichen ist.

Mobiles Webdesign für eine Modemarke
Bei diesem Design befinden sich die meisten interaktiven Elemente entweder in der Mitte des Bildschirms oder weiter unten. Design von Jack Kingslain

Der Daumen ist der dickste Finger, wodurch er recht unpräzise ist. Bei der Erstellung von Buttons sollten Designer die größte Form für wichtige Interaktionen nutzen, da der Touchscreen die Eingabe nicht registrieren wird, wenn Teile des Daumens den Button nicht berühren.

Genauso wichtig ist die Position der interaktiven Elemente einer Seite. In der Regel wird ein Mobilgerät am unteren Rand gehalten und der Daumen ruht in der Mitte. Um interaktive Elemente am oberen Rand zu erreichen, müsste der Nutzer seine gesamte Hand neu positionieren oder die Finger der zweiten Hand nehmen. Studien zeigen, dass die ideale Interaktionszone (die kleiner wird, je größer das Telefon ist), ungefähr im mittleren Bereich liegt.

Grafik mit den Bereichen eines Touchscreen-Telefons, die für den Daumen leicht zugänglich sind
Die daumenfreundliche Zone variiert von Gerät zu Gerät, aber in den meisten Fällen eignet sich die untere Mitte des Bildschirms am besten für Interaktion. Grafik via A List Apart

In den vergangenen Jahren sind UX-Designer dazu übergegangen, Navigationsleisten am unteren statt oberen Rand des Bildschirms zu platzieren. Auch wenn diese dadurch leichter mit dem Daumen zu erreichen ist, kann das Brechen mit Designkonventionen, an die Nutzer gewöhnt sind, zu einem schlechten Erlebnis führen. Die Zeit wird zeigen, welche Position sich am besten eignet, aber bis dahin testest du es am besten mit deinen eigenen Nutzern.

Nutze mobilfreundliches Webdesign

So wie der weltweite Traffic immer weiter wächst, ist mobiles Surfen eindeutig die Zukunft. Wenn man jedoch all die Einschränkungen bedenkt, denen sich Design im Vergleich zu Desktop-Websiten stellen muss – der fehlende Platz und die fehlenden Peripheriegeräte – kann es eher wie eine Last und weniger wie eine Chance wirken. Diese Herausforderungen sind nicht unüberwindbar, aber sie sind auch nicht auf die leichte Schulter zu nehmen.

Auch wenn die Tipps in diesem Artikel dir eine Grundlage für praktische Lösungen für mobilfreundliche Webdesigns bietet, braucht es viel Sorgfalt und Übung, um sie zu meistern.

Du brauchst eine mobilfreundliche Website für dein Unternehmen?
Unsere professionellen Webdesigner sind für dich da.