Was ist responsives Design?

Sonja K.
2024-10-03
Avatar-Foto

Responsives Design ist ein Ansatz zur Webseitengestaltung, bei dem Webseiten so entwickelt werden, dass sie sich automatisch an die Bildschirmgröße des Geräts anpassen, auf dem sie angezeigt werden.

Responsives Design Beispiele für verschiedene Bildschirmgrößen

Beispiel für responsives Design: 3-2-1 Anordnung von Elementen auf Desktop-Tablet-Mobil

Folgende Elemente passen sich dabei automatisch an den verfügbaren Platz auf dem Bildschirm an:

  1. Layout
  2. Bilder
  3. Typografie (Schrifteigenschaften)
  4. Navigation (Menüs)

Ziel des responsiven Designs ist eine optimale Benutzererfahrung (Lesbarkeit, Erscheinungsbild, Ladezeit etc.) auf einer Vielzahl von Geräten zu gewährleisten.

Ok, danke. Wie erstelle ich eine responsive Webseite?

Sonja K.
2024-10-04
Avatar-Foto

Um eine responsive Webseite zu erstellen, sind folgende Aspekte für flexible Layouts essenziell:

  • Prozentuale statt feste Werte: Breite (width) = 80% statt 800 px
  • Haltepunkte (Breakpoints) für Mobile (bis 768px), Tablet (769px - 1024px), Desktop (ab 1025px)
  • Flexible Container/Raster (Grid): Block-Layout = Flex oder CSS Grids

Responsives Design Beispiele - Block Eigenschaft als Flexbox

Beispiel für responsives Design: Flex Einstellung eines Containers (GeneratePress Theme)

Weitere Beispiele für Layout-Methoden habe ich auf CodePen zum Herauskopieren vorbereitet. 

In Sachen Bildoptimierung bitte folgende Checkliste nutzen:

  • Bessere Ladezeit durch Bildkompression: Hilfreiche Tools sind Optimizilla oder TinyPNG
  • Flexible Breiten für Bilder durch prozentuale Werte
  • Moderne Bildformate wie WebP: bessere Komprimierung bei gleichbleibender Qualität

Bei Typografie sind diese drei Punkte am wichtigsten:

  • Relative Einheiten für Schriftgrößen wie em oder rem für eine flexible Anpassung auf verschiedenen Geräten.
  • Die Zeilenhöhe und Zeilenlänge für kleinere Bildschirme optimieren
  • Schriftgrößen wie folgt auf Bildschirmgrößen abstimmen:

Responsives Design Beispiele - Schriftgrößen nach Bildschirmgröße

Beispiel für responsives Design: Empfohlene Schriftgrößen nach Gerät

Abschließend noch ein paar Tipps zur Navigation:

  • Mobile Menüs (Burger) oder Dropdowns verwenden
  • Ausreichend große Buttons und Abstände für eine bessere Klickbarkeit
  • Keine Hover-Effekte auf Touch-Geräten, da sie dort nicht funktionieren.

Schreibe einen Kommentar