Mal eben ein neues T-Shirt bestellen, die Wetteraussichten checken oder Geld überweisen – das geschieht inzwischen deutlich häufiger von unterwegs als vom Schreibtisch aus. Nahezu 67 Prozent (66,72 %, geschätzt auf Basis von 500 Mrd. Pageviews) der Zugriffe auf das Internet erfolgten in Deutschland im April 2025 per Smartphone oder Tablet. Weltweit ist der mobile Anteil mit ca. 64 Prozent nur unwesentlich geringer.
Diese Nutzergewohnheiten gilt es, im Webdesign zu berücksichtigen – denn Wahrnehmung und Bedienung von Webseiten unterscheiden sich zwischen Desktop und Mobile deutlich. Wir zeigen die häufigsten Layout-Fehler beim Design für mobile Endgeräte und wie Sie sie vermeiden können.
Warum ist ein spezielles Layout für mobile Endgeräte wichtig?
Smartphone-Nutzer erwarten eine intuitive Bedienung, eine an geringere Bildschirmformate angepasste Darstellung und schnelle Ladezeiten. Werden diese Erwartungen nicht erfüllt, kann das negative Folgen auf das Nutzerverhalten haben: Hohe Absprungraten, sinkende Konversionsraten oder eine Verschlechterung der Suchmaschinen-Rankings können etwa zu erheblichen Umsatzverlusten bei Webshops und serviceorientierten Websites führen. Mit durchdachtem Mobile Design können Sie dagegen die Nutzerzufriedenheit und Markentreue verbessern.
Tipp. Eine schnelle und kostengünstige Hosting-Lösung für Ihre Webseite bieten Ihnen zum Beispiel die Webhosting-Lösungen von Host Europe.
Layout-Fehler vermeiden – mit Mobile First
Die Desktop-Version einer Website als die Hauptversion oder gar die einzige Version zu betrachten, ist in Hinblick auf aktuelle Zugriffsgewohnheiten Schnee von gestern. Die einfachste Möglichkeit, mobile Nutzergewohnheiten zu berücksichtigen, ist, die Website responsiv anzulegen. Dabei werden Webseiten, die ursprünglich für Desktop-Monitore entworfen wurden, automatisch an die Darstellung und Bedienung auf mobilen Endgeräten angepasst.
Die meisten Templates von Content-Management-Systemen wie WordPress oder joomla! bieten heutzutage Responsive Design. Allerdings kann dieser Ansatz auch zu einigen praktischen Problemen führen. So kommt es beispielsweise häufig zu einem „lieblosen“ Untereinanderstapeln von Elementen, die im Desktop-Design horizontal angeordnet waren. Außerdem können sich Seitenbereiche überlappen, sodass wichtige Inhalte teilweise verdeckt werden. Ein weiterer wichtiger Aspekt ist die Performance: Die Ladezeiten responsiver Seiten sind meist deutlich länger als die von Seiten, die nach dem Mobile-First-Prinzip entwickelt wurden. Gründe sind etwa zu umfangreiche Inhalte, zu große Bilder und der Umstand, dass vom Browser oftmals sämtliche Inhalte geladen werden, auch jene, die gar nicht im Darstellungsbereich (Viewport) des Smartphones liegen.
Im Gegensatz dazu richtet der Mobile-First-Ansatz von Anfang an den Fokus auf die Bedürfnisse mobiler Nutzer. Dabei werden Webseiten gezielt für kleine Bildschirme und mobile Benutzung entwickelt. Anschließend werden die Inhalte dann adaptiv erweitert und Layouts erstellt, die auch Desktop-Nutzern eine gute Nutzererfahrung bieten. Im Folgenden betrachten wir, wie Layout-Fehler vermieden werden können, wenn Webseiten gezielt für mobile Nutzung gestaltet werden.
Hoch statt breit
Auf den ersten Blick haben das Porto-Viadukt und der Eiffelturm einige gestalterische Gemeinsamkeiten – kein Wunder, denn beide wurden von Gustave Eiffel entworfen. Es gibt jedoch auch wesentliche Unterschiede, vor allem beim Format: das eine ist breit, der andere hoch. Beide erfordern unterschiedliche Kopfbewegungen, um sie vollständig visuell zu erfassen (horizontal oder vertikal).
Ähnlich verhält es sich beim Webdesign. Dabei variieren die Seitenverhältnisse und Auflösungen von Mobilgeräten stark. Im April 2025 ist das weltweit am häufigsten genutzte Seitenverhältnis 9:20 (360×800 Pixel); an zweiter Stelle liegt 9:19,5 (390×844 Pixel), wie es z. B. bei vielen iPhones zu finden ist.
Um zu verhindern, dass mobile Nutzer Ihrer Website gezwungen sind, ständig mit Zeigefinger und Daumen zu zoomen oder horizontal zu scrollen, sollten Layouts eine entsprechende horizontale Begrenzung berücksichtigen. Es ist auch sinnvoll, den Viewport festzulegen, um sicher zu gehen, dass der Inhalt auf Displays unterschiedlicher Größe jeweils optimal dargestellt wird und Schriften konsistent wiedergegeben werden. Mit dem Meta-Viewport-Wert width=device-width wird festgelegt, dass die Seite der Breite des Bildschirms in geräteunabhängigen Pixeln (dp) entspricht. Fügen Sie dazu im HTML-Header Ihrer Seite einen Metaviewport-Tag ein: <meta name="viewport" content="width=device-width, initial-scale=1">
Einspaltige Layouts, bei denen alle Elemente untereinander angeordnet werden, sind im Mobile Design die Favoriten. Das muss aber nicht in langweiligen Textsäulen enden: Ein abwechslungsreiches Erscheinungsbild kann beispielsweise durch abwechselnd links- und rechtsseitige Ausrichtung erreicht werden. Auch grafische Abschnitte und Balken können dazu beitragen, dass die zentrale Ausrichtung nicht monoton wirkt. Mit bildhaften Elementen wie Icons oder Fotos können strenge Blöcke aufgelockert werden. Gelegentliche (!) Bilderkarussells schaffen Abwechslung zum vertikalen Scrollen durch horizontales Wischen.
In jedem Fall mahnt Mobile Design inhaltlich zur Konzentration auf das Wesentliche. Wo dies nicht möglich ist, bietet es sich beispielsweise an, sekundäre Inhalte einzuklappen bzw. in ein Akkordeon zu verlagern.
Design für Touchscreens
Zu den häufigsten Layout-Fehlern beim Webdesign für mobile Endgeräte gehören zu kleine Buttons, zu eng platzierte Links oder andere interaktive Elemente, die Smartphone-Nutzern Frusterlebnisse bescheren können.
Wird ein Touch-Ziel zu klein gewählt, steigt das Risiko ungewollter Fehleingaben – der Finger berührt versehentlich das danebenliegende Element, wodurch mehrere Versuche notwendig werden. Google empfiehlt daher eine Mindestgröße von 48 × 48 dp (auf einem Bildschirm mit mittlerer Dichte von 160 dpi entspricht ein dp etwa einem Pixel) für die Zielbereiche von interaktiven Elementen, um eine komfortable und zuverlässige Bedienung zu gewährleisten. Dabei umfasst der Zielbereich nicht nur das Symbol bzw. die verlinkte Schrift, sondern den gesamten Bereich, der auf die Nutzereingabe reagiert.
Mehr dazu und wie Sie Mindestmaße für Zielelemente definieren können, erfahren Sie auf der Google-Seite zur Größe von Berührungszielbereichen.
Ausschlaggebend für eine sichere Bedienung sind zudem die Abstände zwischen den Touch-Zielen. Eine zu enge Anordnung erhöht die Wahrscheinlichkeit, dass der Nutzer den falschen Link oder Button klickt. Da die Fingerspitzen (vor allem der Daumen), eine deutlich größere Fläche haben als ein Mauszeiger, empfiehlt Google einen Mindestabstand zwischen klickbaren Elementen von 8 dp.
Daumenfreundliches Layout
Weil Smartphones oft einhändig und meistens mit dem Daumen bedient werden, spielt auch die Platzierung der Interaktionselemente auf der Seite eine wichtige Rolle. Am leichtesten erreichbar ist der Bereich in der unteren Mitte des Bildschirms. Wichtige Navigationselemente sollten deshalb hier platziert werden, zumal diese Daumenzone sowohl für Rechts- als auch für Linkshänder gleichermaßen gut erreichbar ist. Die Ränder oder Ecken des Bildschirms sind dagegen deutlich schwerer zu erreichen. Hier sollten allenfalls weniger wichtige Elemente untergebracht werden.
Zusätzliche Nutzerfreundlichkeit und Bedienungssicherheit bringt ein visuelles Feedback beim Antippen von Buttons oder Links – etwa in Form einer Farbänderung oder durch Hervorhebung des gedrückten Elements. So erhalten Ihre Nutzer eine Bestätigung, dass ihre Eingabe erfolgreich registriert wurde.
Mehr Infos finden Sie hier: Mobile Navigation: Tipps für eine daumenfreundliche Benutzerführung.
Finden Sie jetzt Ihre Wunsch-Domain.
-
Große Auswahl an günstigen Domain-Endungen.
Keine verdeckte Kosten.
Kontraste und Schriftgrößen richtig wählen
Smartphone-Screens sind nicht nur kleiner als Desktop-Bildschirme, sie werden auch in sehr unterschiedlichen Lichtverhältnissen genutzt. Ein hoher Kontrast zwischen Text und Hintergrund sorgt dafür, dass Inhalte auch bei schlechten Lichtverhältnissen oder von Menschen mit eingeschränkter Sehkraft (Stichwort Barrierefreiheit) gut erkenn- und lesbar sind. Die WCAG (Web Content Accessibility Guidelines) empfehlen für Fließtext einen Kontrastwert von mindestens 4,5:1 und 3:1 für großen Text und große Bilder. Diese Werte sollten insbesondere beim Mobile Design nicht unterschritten werden.
Häufige Layout-Fehler sind auch zu geringe Schriftgrößen. Empfohlene Mindestgröße für Fließtext auf mobilen Geräten ist 16px. In Ausnahmefällen, etwa bei besonders großlaufenden Schriftarten, können Sie die Größe auf 14px reduzieren. Überschriften sollten mindestens eine Größe von 125 Prozent des Fließtexts haben, um sich gut von diesem abzuheben. Hauptunterschriften (etwa H1) können Sie auch die doppelte Größe spendieren.
Damit die Skalierung auf jedem Gerät korrekt ist, empfiehlt es sich, relative Schriftgrößen zu verwenden. Statt fester Pixelwerte wird dabei mit relativen Einheiten wie rem gearbeitet, die sich von der Basisschriftgröße (z. B. der Größe des Fließtextes) ableiten. Voraussetzung ist allerdings, dass zuvor der Viewport festgelegt wurde (siehe oben). Die übrigen Größen skalieren Sie relativ zur Basisgröße. Das realisieren Sie in CSS beispielsweise über die folgenden Klassen:
body {font-size: 16px;}
.large {font-size: 1.25rem;}
Denken Sie auch daran, gut lesbare Schriftarten auszuwählen – wichtigste Kriterien hier sind klare Formen und eine nicht zu eng laufende Schrift (hinreichender Abstand zwischen den Zeichen).
Übersichtliche, nutzerfreundliche Menüs
Im Mobile Design spielt eine klare und intuitive Navigation eine entscheidende Rolle. Anders als im Desktop-Design ist es wenig sinnvoll, eine umfangreiche Navigationsleiste mit mehreren Haupt- und Untermenüs im Header unterzubringen. Stattdessen bietet sich ein Hamburger-Menü als platzsparende Lösung an, bei der das Hauptmenü hinter dem bekannten Icon mit waagrechten Strichen verborgen wird. Wichtig ist dabei, dass die Schaltfläche gut sichtbar und leicht zu finden ist – eine zusätzliche Beschriftung wie „Menü“ oder „Sortiment“ kann die Orientierung erleichtern.
Da Menüs, die sich im oberen Bereich des Bildschirms befinden, für die Daumenbedienung oft unpraktisch sind, setzen Designer zunehmend auf eine seitlich ausfahrbare Menü-Sidebar. Bei komplexeren Menüs mit mehreren Hauptnavigationspunkten und mehreren Ebenen können Untermenüs (bei Webshops beispielsweise solche zu Produktkategorien oder angebotenen Marken) so gestaltet werden, dass sie das bestehende Menü jeweils ersetzen.
Wichtig auch: So einfach, wie sich das Menü öffnen lässt, sollte es auch wieder geschlossen werden können – etwa durch eine Wischgeste, eine X-Schaltfläche oder ein Tippen außerhalb des Menübereichs. Und was für die restliche Website gilt, gilt natürlich auch für das Menü: Die einzelnen Menüpunkte müssen ausreichend groß sein und genügend Abstand zueinander haben, um unfallfreie Klicks zu ermöglichen. Ergänzend zum Hauptmenü sind eine gut auffindbare Suchfunktion, „Zurück-nach-oben“-Buttons und Breadcrumbs hilfreiche Elemente, die besonders bei langen Seiten die Navigation erleichtern.
Kurze Ladezeiten
Layout-Fehler können auch die Performance bremsen – ein Umstand, der bei mobilen Zugriffen, wo oft instabile Verbindungen herrschen, besonders ins Gewicht fällt. Wenn die Besucher Ihrer Website unterwegs sind, erwarten sie schnelle, reibungslose Zugriffe auf Inhalte. Schon Verzögerungen von mehr als drei Sekunden können dazu führen, dass ein Teil der Besucher abspringt.
Eine weit verbreitete Performancebremse sind zu viele und vor allem zu große Bilddateien. Bilder sollten daher stets für mobile Endgeräte optimiert werden. Formate wie WebP und JPEG bieten eine gute Komprimierung, ohne die Bildqualität zu stark zu reduzieren.
Mit Blick auf die Ladezeiten sollten auch Animationen und interaktive Effekte auf das Nötigste reduziert werden. Falls Animationen notwendig sind, sollten sie mit CSS statt JavaScript umgesetzt werden. CSS-Animationen sind in der Regel ressourcenschonender.
Zusatztipp: Ladezeiten können durch Lazy-Loading deutlich reduziert werden. Dabei werden datenintensive Elemente wie Bildergalerien oder Videos erst dann geladen, wenn sie in den sichtbaren Bereich des Browsers (also den Viewport) kommen. Um dem Browser anzuweisen, das Laden von Bildern zu verzögern, die sich außerhalb des Bildschirms befinden, können Sie in HTML das loading-Attribut verwenden:
<img loading="lazy" src="image.jpg" alt="..." />. Allerdings muss für diese Funktion JavaScript aktiviert sein. Weitere Informationen zu Lazy Loading finden Sie hier.
Titelmotiv: Photo by Sigmund on Unsplash
- Spam und Phishing: Wie Betrüger arbeiten und wie Sie sich vor unerwünschten E-Mails schützen - 15. Januar 2026
- Effizient arbeiten mit Google Tabellen: Tipps, Tricks und Formeln für Anfänger und Profis - 6. Januar 2026
- Urheberrecht im digitalen Zeitalter: Warum das Thema so relevant ist - 18. Dezember 2025