Responsive Webdesign

Webseiten werden auf Handys, Tablets, Laptops und riesigen Monitoren angezeigt. Responsives Design bedeutet: Eine Seite passt sich an jede Bildschirmgröße an. Dazu gehören vier Bausteine.

1. Viewport-Meta

Ohne diese Zeile im <head> zeigen Handys die Seite als verkleinerte Desktop-Ansicht:

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Flexible Einheiten und Bilder

• Breiten in %, fr, rem oder mit max-width statt fester Pixel
• Bilder: max-width: 100%; height: auto;
• Schrift mit rem und clamp()

3. Media Queries

Mit @media gelten Regeln nur unter bestimmten Bedingungen:

Mobile First

Schreibe zuerst das Design für kleine Bildschirme und erweitere es mit min-width für größere. Das ist einfacher, schneller auf Handys und wartbarer.

Übliche Breakpoints (richte sie nach deinem Inhalt, nicht nach Geräten):

Weitere Bedingungen

@media (max-width: 600px) { ... }               /* höchstens 600px breit */
@media (min-width: 600px) and (max-width: 900px) { ... }
@media (orientation: landscape) { ... }         /* Querformat */
@media (hover: hover) { ... }                   /* Gerät kann "hovern" (Maus) */
@media (pointer: coarse) { ... }                /* Touch: größere Ziele */
@media (prefers-color-scheme: dark) { ... }     /* Dunkelmodus des Systems */
@media (prefers-reduced-motion: reduce) { ... } /* weniger Animation gewünscht */
@media (prefers-contrast: more) { ... }         /* höherer Kontrast */
@media print { ... }                            /* beim Drucken */

Dunkelmodus:

Ein Drucklayout versteckt Navigation und Werbung:

@media print {
  nav, .werbung, button { display: none; }
  body { font: 12pt/1.4 Georgia, serif; color: black; background: white; }
  a::after { content: " (" attr(href) ")"; }
}

4. Flexible Layouts

Flexbox und Grid erledigen vieles ohne Media Queries:

Typisches Muster: Menü wird zum Burger

Container Queries

Media Queries reagieren auf das Fenster. Container Queries reagieren auf die Größe des Elternelements, ideal für wiederverwendbare Komponenten:

Touch-Bedienung

• Klickziele mindestens 44 × 44 px groß, mit Abstand
• hover nicht als einzigen Weg zu Inhalten (Handys haben kein Hover)
• Auf Formularfelder passende types und inputmode setzen
• <meta name="viewport"> nie mit user-scalable=no einschränken (Zoom muss möglich bleiben)

Testen

1. Browser-Entwicklerwerkzeuge (F12), dann Geräte-Symbol: Größen und Geräte simulieren
2. Fenster verkleinern; Zoom auf 200 %
3. Auf echten Handys testen
4. Hoch- und Querformat prüfen