Responsives Design für jeden Bildschirm

Wir gestalten zuerst für den kleinsten Bildschirm und erweitern anschließend schrittweise. Das erzwingt Prioritäten: Die wichtigsten Inhalte und Aktionen stehen im Vordergrund. Vier bis fünf Breakpoints werden anhand von Analysedaten statt willkürlicher Gerätebreiten festgelegt.

CSS Grid und Flexbox schaffen natürlich anpassbare Layouts. Fließende Typografie mit CSS clamp() skaliert zwischen Mindest- und Maximalgrößen. Container Queries lassen Komponenten auf ihren eigenen Container reagieren und ermöglichen modulare, wiederverwendbare UI-Elemente.

Touchflächen von mindestens 48 × 48 px mit ausreichendem Abstand. Native Wischgesten, Pull-to-refresh und Zwei-Finger-Zoom für Bilder. Formularfelder mit passenden Tastaturen und Autofill. Mobile Bottom-Sheet-Navigation hält die wichtigsten Aktionen in Daumenreichweite.

Responsive Bilder mit srcset liefern die passende Dateigröße. Lazy Loading für Bilder und schwere Komponenten. Code-Splitting verhindert, dass Mobilgeräte reinen Desktop-JavaScript laden. Tests auf echten Geräten und Leistungsbudgets zielen auf Ladezeiten unter zwei Sekunden im 4G-Netz.

Eine wirklich responsive Website bietet mobil dieselben Informationen und Aktionen wie am Desktop, anders angeordnet. Abgeschnittene Abschnitte ergeben lediglich eine reduzierte Fassung. Google berücksichtigt vor allem die mobile Version; dort fehlende Inhalte können auch bei der Indexierung fehlen. Wir bauen einen gemeinsamen Inhalt mit anpassbarem Layout.

Telefonmodelle wechseln jährlich. Ein Layout für drei konkrete Geräte kann beim vierten versagen. Wir setzen Breakpoints dort, wo der Inhalt bei geringerer Breite tatsächlich leidet, statt Gerätewerte zu kopieren. So hält das Layout auch auf später erscheinenden Bildschirmen.

Eine ausgeblendete Spalte lässt die Tabelle passen, entfernt aber Daten: Mobile Nutzer sehen Preis oder Termin nicht und bemerken die Lücke nicht. Die Tabelle sollte im eigenen Container horizontal scrollen, mit fixierter erster Spalte, ohne die ganze Seite zu verschieben. Große Datensätze können als Kartenliste erscheinen.

Notch und Gestenleiste können einen unten fixierten Button verdecken. Bewegliche Browserleisten verändern die verfügbare Höhe und schneiden bildschirmhohe Abschnitte ab. Wir verwenden Safe-Area-Variablen und passende Höheneinheiten und prüfen am Gerät, weil Simulationen hier oft abweichen.

Ein per CSS verkleinertes 3000-Pixel-Bild braucht mobil dieselben Daten wie am Desktop, oft bei schwächerer Verbindung. Wir erzeugen mehrere Breiten in modernen Formaten und lassen den Browser wählen. Reservierter Platz verhindert störende Textsprünge und schlechte Werte für visuelle Stabilität.

Das Drei-Striche-Menü ist vertraut, doch sein Inhalt wird weniger sichtbar. Kontakt und Hauptaktion bleiben deshalb erreichbar. Oft liegt die Telefonnummer drei Schritte entfernt, obwohl mobile Besucher genau dafür kommen. Wir machen sie mit einem Tipp anrufbar und legen den Rest ins Menü.

Tablets verbinden Desktopbreite mit Touchbedienung; kleine Mausziele werden dadurch schwierig. Querformat am Telefon halbiert die verfügbare Höhe und kann höhenbasierte Abschnitte beschädigen. Tablets und Querformat werden separat getestet, nicht aus einem funktionierenden Hochformat abgeleitet.

Der Browser simuliert Abmessungen, aber nicht zuverlässig verdeckende Tastaturen, Touchverzögerungen, Ersatzschriftarten, schwache Verbindungen oder träges Scrollen. Wir prüfen auf echten iOS- und Android-Geräten, einschließlich eines älteren langsamen Modells. Dort zeigen sich Probleme, die Nutzer selten melden; sie verlassen einfach die Seite.