Responsive Design, im Tech-Kontext.
Responsive Design passt Raster, Typografie und Bilder an die Breite des Geräts an. Ein Layout in mehreren Ansichten statt getrennter Mobil-Website.
Responsive Design ist der Ansatz, eine Seite so zu bauen, dass sich Raster, Typografie und Bilder an die verfügbare Breite anpassen, statt getrennte Fassungen für Telefon und Rechner zu pflegen. Technisch tragen das flexible Einheiten, Flexbox und Grid, Media-Queries und srcset für Bilder. Da der überwiegende Teil des Traffics vom Telefon kommt und Google mobil indexiert, ist die schmale Ansicht die eigentliche Hauptfassung. Häufige Fehler: feste Pixelbreiten in Tabellen und Code-Blöcken, die den ganzen Seiteninhalt seitlich scrollen lassen, zu kleine Tippflächen, und Inhalte, die auf dem Telefon ausgeblendet werden und damit auch aus der Bewertung fallen.
Beispiele aus dem Mittelstand
- Eine Preistabelle scrollt auf dem Telefon in einem eigenen Container, statt die ganze Seite nach rechts zu ziehen.
- Eine Referenzgalerie bricht ohne einen einzigen Breakpoint um, weil das Raster mit einer Mindestbreite pro Karte arbeitet.
/* Karten brechen ohne Breakpoint um */
.raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1.5rem;
}
/* Breite Inhalte scrollen im eigenen Container, nie im Seitenkörper */
.tabelle-huelle {
overflow-x: auto;
}Folge-Fragen
Warum scrollt meine Seite auf dem Telefon seitlich?
Fast immer wegen eines Elements mit fester Breite, meist Tabelle, Code-Block oder Bild. In den Entwicklerwerkzeugen die Breite des Körpers prüfen.
Wie viele Breakpoints brauche ich?
So wenige wie möglich. Wer mit flexiblen Rastern arbeitet, kommt oft mit zwei aus.
Darf ich Inhalte auf dem Telefon ausblenden?
Vorsichtig sein. Was mobil verborgen ist, zählt bei mobiler Indexierung inhaltlich kaum. Besser kürzen als verstecken.
Wie groß müssen Tippflächen sein?
Als Faustregel etwa die Fläche einer Fingerkuppe mit Abstand zum Nachbarelement. Zu enge Buttons erzeugen Fehlklicks.
Responsive Design in der Praxis.
Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.
UX, Struktur und Copy