Die meisten glauben das es nur Responsives Webseiten oder stattische gibt. Es gibt noch einige mehr Ansätze eine Webseite darzustellen
Adaptives Web Design (AWD)
Fangen wir mit Adaptiven Design an. Dies war der Ansatz nach fest definierten Webseiten eine bessere Kompatibilität für unterschiedliche Geräte zu produzieren. Es werden Breakpoints benutzt die ab einer bestimmten Breite des Browsers hart eine andere Art von Template laden und dadurch Benutzer der Seite einen harten Designsprung zeigen.
Vorteile von AWD
- Es kann gut mit klassischen Mockups, Wireframe und Skizzen gearbeitet werden, da feste Abmessungen existieren
- Viel gestalterischer Freiraum, da mit einem starren Raster gearbeitet wird
- Technisch recht unkompliziert umzusetzen
- Inhalte müssen nur für klar definierte Abmessungen optimiert werden, aber nicht vollkommen flexibel sein
- Zeitsparendere Umsetzung
Nachteile von AWD
- Es wird nur für bestimmte Viewports / bestimmte Geräte optimiert
- Häufige Fehldarstellungen auf abweichenden Endgeräten
- Aufwändige Zielgruppenanalyse um die relevanten Viewports zu bestimmen
- Häufig mehr CSS-Code als notwendig
Responsive Web Design (RWD)
Responsives Design ist viel auffändiger als AWD, da man versucht dauerhaft für je größer werdende Ansicht die perfekte View darzustellen ohne großartig das grundlegende Design zu verändern. RWD arbeitet auch mit Breakpoint auf Breiten. Technisch ist dies auch komplexer umzusetzen, da Bilder die z.B. im Desktop über die gesamte Breite gehen im Mobil in einem quadratischen Format anmuten. Hier muss auch der Redakteur und das System diese Brücke möglich machen.
Vorteile von RWD
- Jede Displaygröße wird optimal berücksichtigt
- Es wird kein Platz verschenkt
- Die Information steht im Vordergrund
- Zukünftige mobile Endgeräte werden automatisch mit abgedeckt
Nachteile von RWD
- Mockups, Wireframes und Skizzen stoßen an ihre Grenzen. Häufig muss mit Prototypen gearbeitet werden um Kunden das Verhalten der Website zu zeigen
- Komplexer in der Gestaltung
- Komplexer in der technischen Umsetzung
- Komplexer in der Anpassung der Seiteninhalte
- Zeitintensivere Umsetzung