NCA Social Media
Erstellt:
Aktualisiert:
Autor:
Roland Golla
Grüne isometrische Geräte Smartphone, Tablet und Laptop verbunden

Was ist Responsive Design?

Responsive Design ist ein Ansatz im Webdesign, bei dem sich Layout, Bilder und Schrift automatisch an Bildschirmgröße, Zoomstufe und Gerät anpassen. Der Begriff stammt von Ethan Marcotte, der ihn 2010 mit drei Bausteinen beschrieb: flexible Raster, flexible Bilder und Media Queries.

Für die Barrierefreiheit ist Responsive Design mehr als Smartphone Optimierung. Wer im Browser auf 400 Prozent zoomt, sieht auf dem Desktop dieselbe schmale Ansicht wie auf einem Smartphone. Ein sauber responsives Layout erfüllt deshalb einen großen Teil des WCAG 2.2 Kriteriums Reflow fast nebenbei.

2026 gehören dazu auch Container Queries, fließende Typografie und Rücksicht auf Nutzereinstellungen wie größere Schrift, weniger Bewegung oder dunkle Farben.

Inhalt

Barrierefreie Layouts bauen lassen: NCA als Partner

Responsive Layouts entstehen bei NCA mit modernem CSS statt starrer Frameworks. Barrierefreiheit denken wir dabei von Anfang an mit, statt sie am Ende nachzurüsten. Jede Breite, die wir planen, prüfen wir auch automatisiert, damit kein Breakpoint beim nächsten Release bricht.

Bei bestehenden Seiten finden wir die Stellen, an denen Layouts bei schmalen Breiten, großer Systemschrift oder im Querformat brechen, und bauen die betroffenen Komponenten um. In neuen Projekten setzen wir auf Container Queries und barrierefreie Astro Komponenten. Mobile Menüs bekommen eine saubere Tastaturnavigation, und wir achten darauf, dass umsortierte Layouts die logische Reihenfolge nicht zerstören. Grundlage ist unsere Arbeit im barrierefreien Webdesign, abgesichert durch automatisiertes Accessibility Testing mit Viewport Tests in der Pipeline.

Lass uns sprechen
Finde das passende Angebot für dein Projekt
Anfrage-Konfiguration
Starten Sie Ihre Anfrage
Projektart
Infos
Nachricht

Eliminierung technischer Schulden mit PHPStan, Rector PHP und PHPUnit. Über 20 Jahre Praxiserfahrung in skalierbaren Backends.

CORE EXPERTISE

Gesetzliche Konformität & Inklusion. Optimierung von Performance und Conversion durch radikal nutzerzentriertes, universelles Design.

BFSG COMPLIANT

Skalierbare KI-Systeme mit echtem Code Ownership. CI/CD, Backup-Strategien und Infrastruktur, die mit deinem Team wächst.

ENTERPRISE READY

Mehr als Smartphone Optimierung

Responsive Design wird oft auf Smartphones reduziert. Für die Barrierefreiheit geht es um etwas anderes: Eine Seite muss mit den Einstellungen und Hilfsmitteln der Nutzer funktionieren, nicht nur mit der Bildschirmgröße.

  • Bildschirmlupe: Wer nur einen Ausschnitt sieht, braucht Layouts, in denen Zusammengehöriges nah beieinander steht.
  • Größere Schrift: Viele Menschen stellen am Smartphone größere Systemschrift ein. Das Layout muss mitwachsen.
  • Ausrichtung: Inhalte dürfen nicht auf Hoch oder Querformat festgelegt sein. Manche Menschen haben ihr Tablet fest am Rollstuhl montiert.
  • Bedienung per Touch: Klickziele müssen groß genug sein, auch für Menschen mit Tremor.
  • Nutzereinstellungen: Reduzierte Bewegung, dunkles Farbschema und erhöhter Kontrast lassen sich per CSS abfragen und respektieren.

Ausrichtung, Reflow und Zielgröße nach WCAG 2.2

Mehrere Erfolgskriterien betreffen direkt das responsive Verhalten einer Seite. Alle hier genannten liegen auf Stufe AA und sind damit für BFSG und European Accessibility Act relevant.

  • 1.3.4 Ausrichtung (AA): Inhalte funktionieren im Hoch und im Querformat, außer eine Ausrichtung ist zwingend nötig.
  • 1.4.4 Textgröße ändern (AA): Text lässt sich auf 200 Prozent vergrößern, ohne dass Inhalt verloren geht.
  • 1.4.10 Reflow (AA): Bei 320 CSS Pixeln Breite kein horizontales Scrollen.
  • 1.4.12 Textabstand (AA): Größere Zeilen und Buchstabenabstände zerstören das Layout nicht.
  • 2.5.8 Zielgröße, Minimum (AA): Neu in WCAG 2.2. Klickziele sind mindestens 24 mal 24 CSS Pixel groß oder haben genug Abstand zueinander.

Dazu kommt 3.2.3 Konsistente Navigation (AA): Wenn die Navigation auf dem Smartphone in ein Menü wandert, muss sie trotzdem überall gleich aufgebaut sein.

Wie sich Responsive Design seit 2010 entwickelt hat

Responsive Design hat sich seit 2010 stark weiterentwickelt. Die vier Stufen zeigen, wo ein Projekt steht und was der nächste sinnvolle Schritt ist.

Vom festen Layout zum getesteten Responsive Design

Level Merkmale Werkzeuge
1 Feste Breite Layout in Pixeln, horizontales Scrollen auf kleinen Geräten und beim Zoomen Keine, Desktop Layout
2 Media Queries Breakpoints für Smartphone, Tablet und Desktop, flexible Bilder CSS Media Queries, Flexbox
3 Intrinsisch Container Queries, fließende Schrift mit rem, Grid ohne feste Breiten, Nutzereinstellungen respektiert CSS Grid, Container Queries, clamp, prefers Abfragen
4 Getestet Viewports, Reflow und Zielgrößen laufen als automatisierte Tests in der Pipeline Cypress mit cy.viewport, axe core, GitHub Actions

Responsive Design 2026: Code Beispiele

Container Queries statt nur Media Queries. Eine Karte passt sich an den Platz an, den sie bekommt, nicht an die Fensterbreite. So funktioniert sie in der Seitenleiste genauso wie im Hauptbereich. Alle modernen Browser unterstützen das.

Code: 
          
.card-list {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 30rem) {
  .card {
    grid-template-columns: 10rem 1fr;
  }
}

Klickziele groß genug. WCAG 2.2 verlangt mindestens 24 mal 24 CSS Pixel. Für Touch empfehlen sich eher 44 Pixel.

Code: 
          
button,
.nav a {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 1rem;
}

Nutzereinstellungen respektieren. Wer im System reduzierte Bewegung eingestellt hat, bekommt keine großen Animationen.

Code: 
          
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Viewports automatisiert testen. Mit Cypress lassen sich mehrere Größen in einer Schleife prüfen, inklusive der 320 Pixel für Reflow.

Code: 
          
const viewports = [[320, 640], [768, 1024], [1280, 800]]

describe('Responsive Layout', () => {
  viewports.forEach(([w, h]) => {
    it(`hat bei ${w} Pixeln kein horizontales Scrollen`, () => {
      cy.viewport(w, h)
      cy.visit('/')
      cy.document().its('documentElement.scrollWidth').should('be.at.most', w)
    })
  })
})

Responsive Stolperfallen für Menschen mit Behinderung

  1. Inhalte auf dem Smartphone ausgeblendet. Was mobil fehlt, fehlt auch bei 400 Prozent Zoom auf dem Desktop.
  2. Hamburger Menü ohne Tastaturbedienung. Der Menü Button ist ein div, hat keinen Namen oder lässt sich nicht per Escape schließen.
  3. Zu kleine Klickziele. Icon Links mit 16 Pixeln, die eng nebeneinander stehen.
  4. Ausrichtung gesperrt. Apps oder Seiten, die nur im Hochformat funktionieren.
  5. Sticky Elemente auf kleinen Viewports. Header, Cookie Banner und Chat Button nehmen gemeinsam den halben Bildschirm ein.
  6. Reihenfolge per CSS verdreht. Mit order oder Grid umsortierte Inhalte passen nicht mehr zur Reihenfolge im HTML, die Tastatur und Screenreader nutzen.

We're designing work meant to be viewed along a gradient of different experiences.

Ethan Marcotte, Webdesigner und Erfinder des Begriffs Responsive Web Design – A List Apart, Responsive Web Design

Warum Responsive Fehler in der Planung entstehen

Unsere wichtigste Erkenntnis: Die meisten Responsive Fehler entstehen nicht im CSS, sondern in der Planung. Wenn Entwürfe nur für Desktop und Smartphone existieren, fehlen alle Zwischenstufen, die Nutzer mit Zoom, Split Screen oder Tablet sehen. Wir planen deshalb in Komponenten statt in Seiten und testen über die ganze Bandbreite.

Responsive Layouts hängen eng mit der Tastaturnavigation zusammen, etwa bei mobilen Menüs, und mit der logischen Reihenfolge, wenn CSS Inhalte umsortiert. Für Lesbarkeit sorgen barrierefreie Schriftarten und guter Farbkontrast.

Die Grundlagen liefern CSS und Barrierefreiheit und das Universal Design. Für Tests helfen der Lighthouse Accessibility Audit und unsere Übersicht der Accessibility Testing Tools.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
Erreichen Sie unsere Spezialisten zu barrierefreien Webdesign

Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.

Kostenlose Demo Jetzt anrufen

Häufige Fragen zu Responsive Design

Mobile First, Container Queries und Klickziele: wie responsive Layouts auch barrierefrei werden.

Was ist Responsive Design 2026?

Responsive Design ist ein Ansatz, bei dem sich Layout, Bilder und Schrift automatisch an Bildschirmgröße, Zoom und Gerät anpassen. Ursprünglich bestand es aus flexiblen Rastern, flexiblen Bildern und Media Queries. 2026 gehören auch Container Queries, fließende Typografie und die Rücksicht auf Nutzereinstellungen dazu.

Ist Responsive Design 2026 Pflicht für Barrierefreiheit?

Nicht als Begriff, aber in der Wirkung. WCAG 2.2 verlangt Reflow bei 320 CSS Pixeln, Textvergrößerung auf 200 Prozent, freie Ausrichtung und ausreichend große Klickziele. Diese Anforderungen lassen sich praktisch nur mit einem responsiven Layout erfüllen. Über BFSG und EAA sind sie für viele Unternehmen Pflicht.

Was hat Responsive Design 2026 mit Zoom zu tun?

Sehr viel. Wer im Browser auf 400 Prozent zoomt, sieht auf einem 1280 Pixel breiten Fenster eine Ansicht von 320 Pixeln. Das Layout bricht dabei auf den mobilen Breakpoint um. Ein sauberes mobiles Layout ist deshalb die beste Grundlage, um das WCAG Kriterium Reflow zu erfüllen.

Was sind Container Queries 2026?

Mit Container Queries reagiert eine Komponente auf die Breite ihres Elternelements statt auf die Fensterbreite. Eine Karte kann so in einer schmalen Seitenleiste anders aussehen als im breiten Hauptbereich. Alle modernen Browser unterstützen sie. Für Komponentenbibliotheken in Astro, React oder Vue sind sie ein großer Fortschritt.

Wie groß müssen Klickziele 2026 sein?

WCAG 2.2 verlangt im neuen Kriterium 2.5.8 mindestens 24 mal 24 CSS Pixel oder genug Abstand zu benachbarten Zielen. Ausnahmen gelten etwa für Links im Fließtext. Für Touch Bedienung sind 44 Pixel ein guter Richtwert. Größere Ziele helfen besonders Menschen mit Tremor oder eingeschränkter Feinmotorik.

Darf ich die Bildschirmausrichtung festlegen?

Nur wenn eine bestimmte Ausrichtung zwingend nötig ist, etwa bei einer Klavier App oder einem Scheckscan. Ansonsten verlangt WCAG 1.3.4, dass Inhalte im Hoch und im Querformat funktionieren. Manche Menschen haben ihr Gerät fest montiert und können es nicht drehen.

Was ist Mobile First?

Mobile First bedeutet, das Layout zuerst für schmale Bildschirme zu entwickeln und es dann für größere Bildschirme zu erweitern. Das hilft der Barrierefreiheit, weil die schmale Ansicht dieselbe ist, die Nutzer bei starkem Zoom sehen. Wichtige Inhalte werden so von Anfang an für die schwierigste Situation geplant.

Darf ich Inhalte auf dem Smartphone ausblenden?

Davon raten wir ab. Inhalte, die mobil ausgeblendet werden, fehlen auch Menschen, die am Desktop stark zoomen und dadurch die mobile Ansicht sehen. Besser ist es, Inhalte umzuordnen, einzuklappen oder in Menüs zu verschieben, aber erreichbar zu lassen.

Wie mache ich ein mobiles Menü barrierefrei?

Der Menü Button muss ein echter button sein, einen verständlichen Namen haben und den Zustand mit aria-expanded melden. Das geöffnete Menü muss per Tastatur bedienbar sein und sich per Escape schließen lassen. Nach dem Schließen gehört der Fokus zurück auf den Button. Mit Cypress lässt sich das automatisiert prüfen.

Was ist prefers-reduced-motion?

Das ist eine CSS Abfrage, die erkennt, ob Nutzer in ihrem System reduzierte Bewegung eingestellt haben. Menschen mit vestibulären Störungen oder Migräne reagieren auf Animationen und Parallax Effekte empfindlich. Mit prefers-reduced-motion könnt ihr Animationen für diese Nutzer abschalten oder stark reduzieren.

Warum ist CSS order ein Risiko?

Mit order, Grid Bereichen oder flex-direction lassen sich Inhalte optisch umsortieren. Tastatur und Screenreader folgen aber der Reihenfolge im HTML. Wenn beide stark voneinander abweichen, springt der Fokus scheinbar wild über die Seite. Das kann die WCAG Kriterien zur Reihenfolge verletzen.

Wie teste ich Responsive Design auf Barrierefreiheit?

Prüft die Seite bei 320 Pixeln Breite, bei 200 und 400 Prozent Zoom, im Querformat und mit größerer Systemschrift. Bedient mobile Menüs per Tastatur und schaut auf die Größe der Klickziele. Für Regressionen eignen sich Cypress Tests mit mehreren Viewports und axe core in der CI Pipeline.