Produkt 1
Adaptive Beschreibung
19,99 €
Performance
Reduzierte Bewegung, Zoom, Anpassungsfähigkeit
Respektierung von Bewegungspräferenzen
Schlechtes Beispiel
Standard-Animationen
Springende Karte
Diese Animation wird ständig ausgelöst
Gutes Beispiel
Respektvolle Animationen
Respektvolle Karte
Leichte Animation nur beim Hover
Erklärung: Benutzer können ihr System so konfigurieren, dass Animationen reduziert werden. Diese Präferenz muss respektiert werden, um Übelkeit und Ablenkungen zu vermeiden.
Zoom- und Unterstützung großer Schriftgrößen
Schlechtes Beispiel
Feste Oberfläche
Produkt 1
Kurze Beschreibung
19,99 €
Produkt 2
Kurze Beschreibung
24,99 €
Gutes Beispiel
📏 Textgröße: 100%
Adaptive Oberfläche
Produkt 2
Adaptive Beschreibung
24,99 €
Erklärung: Die Oberfläche muss bis zu 200% Zoom funktionsfähig und lesbar bleiben. Texte müssen sich an die Schriftgrößenpräferenzen des Benutzers anpassen.
Adaptives und responsives Design
Schlechtes Beispiel
Feste Desktop-Oberfläche
Logo
Kontaktieren Sie uns
Unsere Kontaktdaten
Friedensstraße 123
10115 Berlin
+49 30 12 34 56 78
Gutes Beispiel
Adaptive Oberfläche
Logo
Kontaktieren Sie uns
Erklärung: Die Oberfläche muss auf allen Geräten und Ausrichtungen funktionieren, mit angemessen dimensionierten Steuerelementen für Touch.
Lazy Loading: Nur sichtbare Ressourcen laden
Schlechtes Beispiel
❌ Alles auf einmal laden (Eager Loading)
Konkretes Beispiel: Eine E-Commerce-Website mit 50 Produkten lädt alle Bilder sofort, auch die am Seitenende, die der Benutzer möglicherweise nie sehen wird.
📚 Technischer Begriff: Eager Loading = sofortiges Laden aller Ressourcen
- 📥 Problem 1: 50 Bilder × 200 KB = 10 MB sofort heruntergeladen
- ⏱️ Problem 2: 8-15 Sekunden Wartezeit, bevor die Seite angezeigt wird
- 📱 Problem 3: Verbraucht unnötig mobiles Datenvolumen
- 🔋 Problem 4: Belastet den Prozessor und entlädt den Akku
📄 HTML (20 KB)
🎨 CSS (50 KB)
⚙️ JavaScript (200 KB)
🖼️ Bild 1 sichtbar (200 KB)
🖼️ Bild 2 sichtbar (200 KB)
🖼️ Bild 3 am Seitenende (200 KB)
🖼️ Bild 4 am Seitenende (200 KB)
🖼️ Bild 5 am Seitenende (200 KB)
⏱️ Gesamte Ladezeit: 8 Sekunden
📊 Verbrauchte Daten: 1,27 MB (davon 600 KB unnötig)
Gutes Beispiel
✅ Progressives Laden (Lazy Loading + Cache)
Konkretes Beispiel: Dieselbe E-Commerce-Website lädt zunächst sichtbare Inhalte, dann nachfolgende Bilder nur, wenn der Benutzer scrollt.
📚 Technische Begriffe: Lazy Loading = verzögertes Laden • HTTP Cache = temporärer Browser-Speicher
Optimierungen testen:
📄 HTML (20 KB) - Geladen
🎨 CSS (50 KB) - Geladen
⚙️ JavaScript (200 KB) - Geladen
🖼️ Bild 1 sichtbar (200 KB) - Geladen
🖼️ Bild 2 sichtbar (200 KB) - Geladen
🖼️ Bild 3 (beim Scrollen geladen)
🖼️ Bild 4 (beim Scrollen geladen)
🖼️ Bereits gesehenes Bild (im Cache, 0 KB)
⏱️ Anfängliche Ladezeit: 2 Sekunden
📊 Eingesparte Daten: 600 KB (47%)
💡 Auswirkung auf Barrierefreiheit:
Geschwindigkeit (FCP)
Schnellerer First Contentful Paint = Seite sofort sichtbar
Mobile Daten
Wesentlich für Benutzer mit begrenztem Datenvolumen oder langsamer Verbindung (3G)
Akku
Weniger Netzwerkübertragung = erhebliche Energieeinsparung
Alte Geräte
Weniger zu verarbeitende Ressourcen = funktioniert auf alter Hardware
Erklärung: Lazy Loading (verzögertes Laden) ermöglicht es, Bilder und Ressourcen nur dann zu laden, wenn der Benutzer sie benötigt, anstatt beim Laden der Seite alles auf einmal herunterzuladen.