Mobile First und Responsive Design: So funktioniert deine Website auf jedem Bildschirm

Stell dir als Beispiel ein kleines Yogastudio vor. Die Website wurde am großen Monitor entworfen: oben ein breites Titelbild, darunter drei Spalten mit Kursen, rechts eine Seitenleiste mit Öffnungszeiten, ganz unten der Button „Probestunde buchen“. Am Schreibtisch sieht das ordentlich aus.

Dann öffnet jemand die Website in der Straßenbahn auf dem Smartphone. Die drei Spalten sind zu winzigen Streifen geschrumpft, der Text ist so klein, dass man zoomen muss, und beim Zoomen rutscht die Seite seitlich weg. Die Menülinks stehen so dicht beieinander, dass der Daumen statt „Kurse“ das „Impressum“ erwischt. Und der Buchungsbutton liegt irgendwo ganz unten, hinter einem langen Text über die Geschichte des Studios. Die Person gibt auf und bucht beim Studio zwei Straßen weiter.

Genau dieses Problem lösen zwei Ideen, die zum Grundwerkzeug im UX- und UI-Design gehören: Responsive Design und Mobile First. Dieser Artikel erklärt beide Begriffe ohne Vorwissen, zeigt, wie du Inhalte für kleine Bildschirme sortierst, was Breakpoints sind, wie groß Touch-Ziele sein sollten und was es mit der sogenannten Daumenzone auf sich hat. Das Yogastudio begleitet dich dabei als durchgehendes Beispiel.

Was bedeutet Responsive Design?

„Responsive“ heißt übersetzt so viel wie „reagierend“. Eine responsive Website reagiert auf die Größe des Bildschirms, auf dem sie gerade angezeigt wird, und passt ihr Layout daran an. Auf dem Smartphone stehen die Kurse untereinander, auf dem Tablet vielleicht zu zweit nebeneinander, am großen Monitor zu dritt. Es ist immer dieselbe Website mit denselben Inhalten, nur anders angeordnet.

Den Begriff hat der Webdesigner Ethan Marcotte im Mai 2010 in einem Artikel im Fachmagazin A List Apart geprägt. Er beschrieb drei Zutaten, die bis heute die Grundlage bilden:

• Flexible Raster (Fluid Grids): Spalten und Abstände werden nicht in festen Pixelwerten angegeben, sondern relativ, zum Beispiel in Prozent. Wird das Browserfenster schmaler, werden auch die Spalten schmaler, statt über den Rand hinauszuragen.
• Flexible Bilder: Bilder passen sich der Breite ihres Containers an. Ein Foto, das am Desktop 1.200 Pixel breit ist, schrumpft auf dem Smartphone auf die verfügbare Breite, statt seitliches Scrollen zu erzwingen.
• Media Queries: Das sind Bedingungen im CSS, also im Code, der das Aussehen einer Website steuert. Sie lauten sinngemäß: „Wenn der Bildschirm mindestens so und so breit ist, dann ordne die Inhalte so an.“ Damit lassen sich Layouts an bestimmten Stellen gezielt umbauen.

Eine technische Kleinigkeit gehört noch dazu, ohne die nichts davon funktioniert: das sogenannte Viewport-Meta-Tag. Der Viewport ist der sichtbare Bereich einer Website im Browser. Ohne die passende Angabe im HTML tun Smartphone-Browser so, als wäre der Bildschirm so breit wie ein Desktop, und verkleinern die ganze Seite. Genau das passiert beim Yogastudio. Googles Entwicklerplattform web.dev hält deshalb fest, dass Seiten, die auf verschiedenen Geräten funktionieren sollen, dieses Tag im Kopf des Dokuments brauchen. Wenn du selbst nicht programmierst, reicht es zu wissen, dass es existiert, und im Team nachzufragen.

Was bedeutet Mobile First?

Responsive Design beschreibt, dass sich eine Website anpasst. Mobile First beschreibt, in welcher Reihenfolge du dabei vorgehst. Die Idee: Du gestaltest zuerst für den kleinsten Bildschirm und erweiterst das Layout dann Schritt für Schritt für größere Bildschirme.

Bekannt gemacht hat den Ansatz der Designer Luke Wroblewski, unter anderem mit seinem Buch „Mobile First“, das 2011 erschienen ist. Sein zentrales Argument: Der kleine Bildschirm zwingt dich zur Konzentration. Auf einem Smartphone ist schlicht kein Platz für drei Spalten, eine Seitenleiste und fünf Teaser. Du musst entscheiden, was wirklich wichtig ist. Diese Entscheidungen machen in aller Regel auch die Desktop-Version besser.

Der umgekehrte Weg heißt Desktop First. Dabei entsteht zuerst die große Version, und für kleinere Bildschirme wird dann weggenommen, gestapelt und gequetscht. In der Fachsprache nennt man das Prinzip dahinter Graceful Degradation, also „würdevolles Abspecken“: Das volle Erlebnis wird für schwächere Umgebungen reduziert. Mobile First folgt dem Gegenprinzip, der Progressive Enhancement, der „schrittweisen Anreicherung“: Eine einfache, robuste Grundversion funktioniert überall, und wo mehr Platz und mehr Möglichkeiten vorhanden sind, kommt mehr dazu.

Ein Vergleich hilft: Desktop First ist wie Umziehen aus einem großen Haus in eine kleine Wohnung. Du musst ständig überlegen, was du loswirst, und am Ende steht trotzdem zu viel herum. Mobile First ist wie Einziehen in eine kleine Wohnung, in die du nach und nach nur das stellst, was du wirklich brauchst. Wenn du später in ein größeres Haus ziehst, ist das Wichtigste schon da, und du kannst in Ruhe ergänzen.

Mobile First ist dabei vor allem eine Denkweise, keine Gerätepolitik. Es bedeutet nicht, dass die Desktop-Version unwichtig wäre. Es bedeutet, dass du mit der strengsten Einschränkung beginnst, weil sie dich zu klaren Prioritäten zwingt.

Inhalte priorisieren: Was gehört nach oben?

Der wichtigste Schritt von Mobile First passiert nicht im Layout-Programm, sondern auf einem Blatt Papier oder in einer einfachen Liste. Bevor du ein einziges Rechteck zeichnest, klärst du, welche Inhalte es gibt und in welcher Reihenfolge sie gebraucht werden.

Schritt 1: Alle Inhalte sammeln

Schreib auf, was die Seite enthält, ohne zu bewerten. Für die Startseite des Yogastudios ergibt das etwa: Titelbild, Begrüßungstext, Kursplan, Preise, Button „Probestunde buchen“, Adresse und Anfahrt, Öffnungszeiten, Geschichte des Studios, Vorstellung der Lehrenden, Instagram-Feed, Newsletter-Anmeldung, Links zu Impressum und Datenschutz.

Schritt 2: Nach Aufgaben sortieren, nicht nach Wichtigkeit fürs Unternehmen

Die entscheidende Frage lautet: Warum kommen Menschen auf diese Seite, und was wollen sie dort erledigen? Beim Yogastudio sind das vor allem drei Aufgaben: herausfinden, wann welcher Kurs stattfindet, eine Probestunde buchen und den Weg zum Studio finden. Die Geschichte des Studios ist der Studioleitung vielleicht besonders wichtig, für die meisten Menschen auf der Website aber zweitrangig.

Woher du weißt, was Menschen wollen? Im besten Fall aus echten Daten: Suchbegriffe, mit denen Leute auf die Website kommen, häufige Fragen am Telefon oder kurze Gespräche mit der Kundschaft. Für eine erste Version reicht oft schon eine ehrliche Einschätzung im Team, die du später überprüfst.

Schritt 3: Eine Spalte, eine Reihenfolge

Auf dem Smartphone gibt es im Grunde nur eine Spalte. Alles steht untereinander, und die Reihenfolge, die du festlegst, ist die Reihenfolge, in der Menschen die Inhalte sehen. Das macht die Priorisierung so wirksam. Für das Yogastudio sieht die überarbeitete Reihenfolge so aus:

• Vorher (Desktop gestapelt): großes Titelbild, Begrüßungstext, Geschichte des Studios, drei Kurskacheln, Seitenleiste mit Öffnungszeiten, Instagram-Feed, ganz unten „Probestunde buchen“ und die Adresse.
• Nachher (Mobile First): kompakter Kopfbereich mit einem Satz zum Angebot und dem Button „Probestunde buchen“, danach der Kursplan für heute und morgen, die Preise, Adresse mit Link zur Karten-App, erst dann Lehrende, Geschichte und Instagram.

Nichts davon ist gestrichen. Es ist nur sortiert. Die Geschichte des Studios bleibt auf der Seite, sie steht nur nicht mehr im Weg.

Ausblenden ist keine Lösung

Eine verbreitete Abkürzung lautet: Auf dem Smartphone einfach Inhalte weglassen. Das klingt nach Priorisierung, ist aber meist ein Fehler. Wer mobil unterwegs ist, will nicht weniger wissen, sondern nur weniger auf einmal sehen. Wenn die Preise auf dem Smartphone fehlen, kann die Person schlicht nicht buchen.

Dazu kommt ein handfester Grund: Google bewertet Websites für die Suche inzwischen grundsätzlich anhand ihrer mobilen Version. Diese sogenannte Mobile-First-Indexierung hat Google 2023 als abgeschlossen gemeldet. Was in der mobilen Version fehlt, kann also auch in der Suche fehlen.

Besser als Weglassen ist es, Inhalte aufzuklappen, wenn sie gebraucht werden. Dieses Prinzip heißt Progressive Disclosure: Details erscheinen erst, wenn jemand danach fragt. Beim Yogastudio zeigt der Kursplan zum Beispiel nur Uhrzeit und Kursname, ein Tipp auf den Kurs öffnet die Beschreibung und die Lehrperson.

Breakpoints: Wo sich das Layout verändert

Ein Breakpoint ist die Bildschirmbreite, an der sich das Layout einer responsiven Website sichtbar umbaut. Unterhalb von, sagen wir, 600 Pixeln stehen die Kurskacheln untereinander, darüber zu zweit nebeneinander, ab etwa 1.000 Pixeln zu dritt. Jede dieser Grenzen ist ein Breakpoint.

Am Inhalt orientieren, nicht an Geräten

Viele Einsteigende fragen zuerst: Welche Breakpoints sind die richtigen? Die naheliegende Antwort wäre eine Liste von Gerätegrößen, etwa ein bestimmtes iPhone, ein bestimmtes iPad und ein typischer Laptop. Davon rät Googles web.dev ausdrücklich ab: Breakpoints sollen nicht an Geräteklassen, Marken oder Betriebssystemen festgemacht werden. Stattdessen soll der Inhalt bestimmen, wann sich das Layout ändert.

Der Grund ist einfach. Es gibt unzählige Bildschirmgrößen, und jedes Jahr kommen neue dazu, ob faltbare Smartphones oder geteilte Fenster auf dem Tablet. Wer für drei bestimmte Geräte optimiert, landet bei allen anderen Größen irgendwo dazwischen.

Praktisch funktioniert der inhaltsbasierte Ansatz so, wie web.dev ihn beschreibt: Du gestaltest zuerst für den kleinen Bildschirm und ziehst das Fenster dann langsam breiter. Sobald etwas nicht mehr gut aussieht oder schlecht lesbar wird, setzt du an genau dieser Stelle einen Breakpoint.

Beim Yogastudio passiert das an zwei Stellen. Erstens: Die einspaltigen Kurskacheln werden bei rund 600 Pixeln Breite so breit, dass viel leerer Raum entsteht und die Kurstexte sehr lange Zeilen bekommen. Hier wechseln sie zu zwei Spalten. Zweitens: Der Fließtext auf der Seite „Über uns“ wird bei breiten Fenstern unangenehm lang pro Zeile. web.dev verweist dazu auf die klassische Lesbarkeitsregel von etwa 70 bis 80 Zeichen pro Zeile. Statt einen weiteren Breakpoint zu setzen, bekommt der Textbereich deshalb eine maximale Breite.

So sieht Mobile First im Code aus

Auch wenn du nicht selbst programmierst, lohnt ein kurzer Blick auf das Prinzip, weil es das Gespräch mit dem Entwicklungsteam erleichtert. Bei Mobile First steht im CSS zuerst das Layout für kleine Bildschirme. Erweiterungen kommen in Media Queries mit einer Mindestbreite, etwa @media (min-width: 600px). Gelesen bedeutet das: „Ab 600 Pixeln Breite gilt zusätzlich Folgendes.“ Die Grundversion braucht keine Bedingung, sie gilt immer.

Bei Desktop First ist es umgekehrt: Zuerst steht das große Layout, und mit max-width wird es für kleinere Bildschirme zurückgebaut. Beides funktioniert technisch, aber bei Mobile First ist die einfachste Version gleichzeitig die Grundlage, auf der alles andere aufbaut.

Responsiv heißt auch: barrierefrei

Ein responsives Layout hilft nicht nur Menschen mit Smartphones. Wer am Desktop stark vergrößert, weil die Augen nicht mehr so gut sind, bekommt im Browser ebenfalls eine schmale Darstellung. Die WCAG, die internationalen Richtlinien für barrierefreie Webinhalte, verlangen deshalb im Kriterium 1.4.10 „Reflow“ auf Stufe AA, dass Inhalte bei einer Breite von 320 CSS-Pixeln ohne seitliches Scrollen nutzbar bleiben. Das entspricht einem 1.280 Pixel breiten Fenster bei 400 Prozent Zoom. Eine gut gemachte Mobile-First-Website erfüllt das nahezu nebenbei.

Touch-Ziele: Groß genug für echte Finger

Ein Touch-Ziel ist alles, was sich antippen lässt: Buttons, Links, Checkboxen, Symbole im Menü. Mit der Maus lassen sich auch kleine Ziele präzise treffen. Ein Finger dagegen ist breit, verdeckt beim Tippen genau die Stelle, die er treffen soll, und die Person ist vielleicht gerade in Bewegung.

Wie leicht sich ein Ziel treffen lässt, hängt von seiner Größe und seiner Entfernung ab. Diesen Zusammenhang beschreibt Fitts’ Law: Je größer und näher ein Ziel ist, desto schneller und sicherer wird es getroffen.

Die Richtwerte im Überblick

Für die Mindestgröße von Touch-Zielen gibt es mehrere Empfehlungen, die sich leicht unterscheiden:

• WCAG 2.2, Kriterium 2.5.8 (Stufe AA): Ziele müssen mindestens 24 × 24 CSS-Pixel groß sein. Kleinere Ziele sind nur erlaubt, wenn sie genug Abstand zu benachbarten Zielen haben.
• WCAG 2.2, Kriterium 2.5.5 (Stufe AAA): Die strengere Stufe nennt 44 × 44 CSS-Pixel.
• Apple: Die Human Interface Guidelines nennen für iPhone und iPad 44 × 44 Punkte als Standardgröße für Bedienelemente und 28 × 28 Punkte als absolute Untergrenze.
• Google: Für Android empfiehlt Google mindestens 48 × 48 dp (geräteunabhängige Pixel). Das entspricht laut Google physisch etwa 9 Millimetern, unabhängig von der Bildschirmgröße.

Die Einheiten klingen verwirrend, meinen aber im Kern dasselbe: eine Größe, die unabhängig von der Pixeldichte des Bildschirms ist. Für den Alltag kannst du dir merken: 24 Pixel sind die Untergrenze, die die WCAG auf Stufe AA verlangen, 44 bis 48 Pixel sind die Größe, mit der sich bequem tippen lässt. Wenn du die Wahl hast, plane mit dem größeren Wert.

Größer machen, ohne dass es größer aussieht

Ein Touch-Ziel muss nicht so groß aussehen, wie es ist. Ein kleines Symbol kann eine unsichtbare, größere Tippfläche haben. Im Code geschieht das über Innenabstände. Sichtbar bleibt das schlanke Symbol, getroffen wird eine Fläche von 44 × 44 Pixeln.

Beim Yogastudio betrifft das drei Stellen:

• Menülinks: Vorher standen die Links als kleine Wörter in einer Zeile. Nachher stehen sie im aufgeklappten Menü untereinander, jeder Eintrag als volle Zeile mit 48 Pixeln Höhe.
• Kurse im Kursplan: Vorher war nur der Kursname als Link anklickbar. Nachher ist die ganze Kurszeile eine Tippfläche.
• Social-Media-Symbole: Vorher waren es drei 16 Pixel große Symbole ohne Abstand. Nachher bekommt jedes eine Tippfläche von 44 × 44 Pixeln und etwas Luft dazwischen.

Hover gibt es auf Touch-Geräten nicht

Am Desktop zeigen viele Websites zusätzliche Informationen, wenn die Maus über einem Element schwebt, etwa ein Untermenü oder eine Bildbeschreibung. Auf Touch-Geräten gibt es diesen Zustand nicht. Alles, was nur beim Überfahren mit der Maus erscheint, ist auf dem Smartphone praktisch unsichtbar. Wichtige Informationen und Funktionen gehören deshalb immer sichtbar oder per Tippen erreichbar auf die Seite.

Die Daumenzone: Wie Menschen ihr Smartphone wirklich halten

Beim Smartphone kommt neben der Größe noch die Erreichbarkeit dazu. Wer das Gerät mit einer Hand hält und mit dem Daumen bedient, erreicht nicht jeden Punkt des Bildschirms gleich gut. Der Bereich, den der Daumen bequem erreicht, wird oft Daumenzone genannt.

Was die Forschung zeigt

Die bekannteste Untersuchung dazu stammt von Steven Hoober, der 2013 im Fachmagazin UXmatters veröffentlicht hat. Er hat 1.333 Menschen im Alltag beobachtet, die ihr Smartphone benutzt haben. Von den 780 Personen, die dabei den Bildschirm berührt haben, nutzten 49 Prozent eine Hand, 36 Prozent hielten das Gerät in einer Hand und tippten mit der anderen, und 15 Prozent nutzten beide Hände. Hoober betont außerdem, dass Menschen ihren Griff häufig wechseln, teils im Abstand weniger Sekunden.

Daraus sind die bekannten Grafiken mit grünen, gelben und roten Zonen entstanden: unten in der Mitte leicht erreichbar, oben in der gegenüberliegenden Ecke schwer. Diese Grafiken sind eine hilfreiche Faustregel, aber eine Vereinfachung. In späteren Arbeiten, unter anderem in seinem Buch „Touch Design for Mobile Interfaces“ von 2021, kommt Hoober zu dem Ergebnis, dass Menschen die Mitte des Bildschirms sowohl zum Lesen als auch zum Tippen bevorzugen.

Was das für dein Design bedeutet

Da Menschen das Gerät unterschiedlich halten und den Griff ständig wechseln, gibt es nicht die eine perfekte Position. Aus der Forschung lassen sich aber ein paar robuste Regeln ableiten:

• Häufige Aktionen gut erreichbar platzieren: Was Menschen oft tun, gehört nicht in die äußersten Ecken oben. Viele Apps setzen ihre Hauptnavigation deshalb als Leiste an den unteren Bildschirmrand.
• Wichtiges in die Mitte des Blickfelds: Die Hauptinhalte und die wichtigste Aktion sollten dort liegen, wo Menschen ohnehin hinschauen und hintippen.
• Riskante Aktionen nicht direkt neben häufige: „Konto löschen“ direkt neben „Speichern“ ist eine Einladung zum Danebentippen.
• Großzügige Ziele an den Rändern: Wo ein Ziel schwer erreichbar ist, hilft mehr Fläche.

Beim Yogastudio heißt das konkret: Der Button „Probestunde buchen“ steht direkt im Kopfbereich, gut sichtbar und breit genug, um ihn aus jeder Griffhaltung zu treffen. Auf langen Unterseiten wie dem Kursplan bleibt er zusätzlich als schmale Leiste am unteren Bildschirmrand stehen. Das Menüsymbol oben rechts ist nicht ideal erreichbar, wird aber auch selten gebraucht, weil die wichtigsten Wege direkt auf der Seite liegen. Wenn du dich fragst, ob das sogenannte Hamburger-Menü mit den drei Strichen überhaupt eine gute Idee ist: Darauf gibt der Artikel „Die 4 meistgestellten Fragen zum Burger-Menü“ Antworten.

Testen ohne Gerätelabor

Für einen ersten Test brauchst du keine Schublade voller Smartphones. Drei einfache Prüfungen decken schon viel ab:

• Fenster ziehen: Öffne die Website am Computer und zieh das Browserfenster langsam schmaler und wieder breiter. Achte darauf, ob irgendwann seitliches Scrollen nötig wird, Texte abgeschnitten werden oder Elemente sich überlappen. Die Entwicklerwerkzeuge aller gängigen Browser haben außerdem eine Geräteansicht, in der du verschiedene Bildschirmgrößen simulieren kannst.
• Auf dem echten Smartphone tippen: Simulation ersetzt nicht den echten Daumen. Geh die wichtigsten Aufgaben einmal am eigenen Gerät durch, am besten mit einer Hand und im Stehen. Beim Yogastudio wären das: Kurs für morgen finden, Probestunde buchen, Weg zum Studio öffnen.
• Zoomen: Vergrößere die Website am Desktop auf 400 Prozent. Lässt sie sich dann noch ohne seitliches Scrollen lesen und bedienen, ist das ein gutes Zeichen für die Barrierefreiheit.

Noch aufschlussreicher ist es, anderen Menschen über die Schulter zu schauen. Gib zwei oder drei Personen aus deinem Umfeld ein Smartphone und eine konkrete Aufgabe, und beobachte schweigend, wo sie zögern oder danebentippen.

Fazit

Responsive Design sorgt dafür, dass sich eine Website an jede Bildschirmgröße anpasst, mit flexiblen Rastern, flexiblen Bildern und Media Queries. Mobile First legt die Reihenfolge fest: erst der kleine Bildschirm, dann schrittweise mehr. Der eigentliche Gewinn liegt dabei weniger in der Technik als in der Haltung. Wer mit wenig Platz beginnt, muss sich entscheiden, was wirklich zählt, und diese Klarheit kommt am Ende allen zugute.

Beim Yogastudio hat sich am Angebot nichts geändert. Die Website zeigt aber jetzt zuerst, was die meisten Menschen suchen, lässt sich mit dem Daumen bequem bedienen und funktioniert auf jedem Bildschirm, vom kleinen Smartphone bis zum großen Monitor. Fang beim nächsten Projekt mit einer einfachen Inhaltsliste an, sortiere sie nach den Aufgaben der Menschen, und zeichne erst dann den ersten Screen.

Checkliste

• Das Viewport-Meta-Tag ist gesetzt.
• Alle Inhalte der Seite sind gesammelt und nach den Aufgaben der Menschen sortiert.
• Die wichtigste Aktion ist auf dem Smartphone ohne langes Scrollen sichtbar.
• Auf dem Smartphone fehlen keine wichtigen Inhalte, Details lassen sich bei Bedarf aufklappen.
• Breakpoints richten sich nach dem Inhalt, nicht nach bestimmten Geräten.
• Fließtext hat auch auf breiten Bildschirmen eine angenehme Zeilenlänge.
• Bei 320 CSS-Pixeln Breite und bei 400 Prozent Zoom ist kein seitliches Scrollen nötig.
• Touch-Ziele sind mindestens 24 × 24 Pixel groß, besser 44 × 44 bis 48 × 48, mit Abstand zueinander.
• Nichts Wichtiges erscheint nur beim Überfahren mit der Maus.
• Häufige Aktionen sind mit dem Daumen gut erreichbar, riskante Aktionen liegen nicht direkt daneben.
• Die wichtigsten Aufgaben sind auf einem echten Smartphone mit einer Hand getestet.

Quellen

• Ethan Marcotte: Responsive Web Design (A List Apart, 2010)
• Luke Wroblewski: Mobile First (A Book Apart, 2011)
• web.dev: Responsive web design basics
• Google Search Central: Mobile-first indexing has landed (2023)
• W3C: Understanding Success Criterion 1.4.10 Reflow
• W3C: Understanding Success Criterion 2.5.8 Target Size (Minimum)
• Apple: Human Interface Guidelines, Accessibility
• Google: Touch target size (Android Accessibility Help)
• Steven Hoober: How Do Users Really Hold Mobile Devices? (UXmatters, 2013)
• Steven Hoober: Touch Design for Mobile Interfaces (Smashing Magazine, 2021)