Fixed Design / fixiertes Layout
Eine Struktur für alle Auflösungen.
Wie der Name bereits andeutet, ist bei dem Ansatz das Design fixiert und auf eine feste Breite festgelegt. Durch das fixieren der Breite ist der Browser nicht in der Lage die Struktur, Texte oder Bilder der Seite zu verändern. Es wird daher auf allen Endgeräten die gleiche Darstellung geliefert und es wird sichergestellt das zu keiner Zeit irgendwelche Überlagerungen oder Verzerrungen entstehen.
Vorteile
- Text zu Bild Relationen bleiben immer gleich und sorgen für ein strukturiertes Design.
- Texte bleiben auf allen Auflösungen gut leserlich.
- Schnellere Planung des Desings.
- Einfachere und schnellere Gestaltung da nur ein Design angelegt werden muss.
- Bessere Kontrolle über Inhaltselemente (Bilder, Texte) da diese statisch auf der Seite integriert werden.
Nachteile
- Schriftgrößen sind fix und passen sich nicht der Auflösung an.
- Bei kleineren Auflösung kann es passieren das man horizontal Scrollen muss.
- Bei größeren Auflösung entstehen viele Lücken.
- Die Seite passt sich nicht dem Viewport / der Auflösung des Besuchers an.
- Darstellung wird lediglich auf eine Auflösung optimiert.
Fluid Design / flüssiges Layout
Fließendes Design durch variable Breiten und fixe Höhen.
Beim Ansatz des Fluid Design wird die Breite prozentual zum Viewport ausgerichtet während die Höhe weiterhin anhand von Pixeln definiert wird. Durch eine prozentuale Definition der Darstellung passt diese sich von der Breite an die Auflösung der jeweiligen Besucher an wodurch ein horizontales Scrollen auch bei kleineren Auflösungen verhindert wird. Bei größeren Auflösung wird durch die prozentuale Struktur der Viewport optimaler genutzt da die Struktur auch nach oben skaliert.
Vorteile
- Volle Nutzung des Viewports durch prozentuale Strukturierung.
- Unkomplizierte Umsetzung da es nur eine Darstellung gibt welche skaliert.
- Kein horizontales Scrollen mehr bei kleineren Auflösungen.
- Benutzerfreundlicher da es sich an die Auflösung des Besuchers anpasst.
Nachteile
- Kompliziertere Informationsdarstellung da die Schrift ebenfalls skaliert.
- Komplexere Gestaltung als beim fixed Design Ansatz.
- Nicht alle Zustände können in der Gestaltungsphase abgebildet werden.
- Darstellung könnte im Breitbildformat zu Verzerrungen von Bildern und Strukturen führen.
Elastic Design / elastisches Design
Ein skalierendes Design durch variable Breiten und Höhen.
Das elastische Design ist sowohl in der Breite als auch in der Höhe variabel und skaliert sich proportional zur Größe des Viewports. Bei der elastischen Darstellung basieren die Raster, Zeilen und Spalten auf prozentualen Werten, em oder rem. Seiteninhalte sowie Grafiken müssen bei dieser Darstellung extrem flexibel sein da diese sich ebenfalls prozentual verändern.
Vorteile
- Optimale Platznnutzung dank der prozentualen Seitenverhältnisse.
- Inhalte werden immer proportional und so groß wie möglich abgebildet.
- Unkomplizierte und schnelle Planung
Nachteile
- Komplexere Umsetzung aufgrund der prozentualen Seitenverhältnisse.
- Ungewöhnlich für Besucher da diese dieses Layout nicht gewohnt sind.
- Seiteninhalte & Medien können möglicherweise nicht optimal dargestellt werden.
Adaptive Design
Ein Design optimiert für jedes Gerät.
Beim Adaptiven Design werden fester Rasterstufen (Breakpoints) definiert. Je nachdem mit welchem Gerät, bzw. welcher Auflösung der Besucher die Seite aufruft, liefert der Server die passenden Inhalte zurück. Dies hat den Vorteil, dass nicht benötigte Inhalte auch nicht geladen werden wodurch beim Adaptiven Design eine gute Performance erreicht.
Durch die verschiedenen Rasterstufen kann die User Experience besser gesteuert werden, da die Darstellung dafür optimiert wurde, bedeutet aber im Gegenzug auch eine schwierigere und komplexere Content-Strategie.
Vorteile
- Rasterstufen Regeln die Darstellung für die jeweiligen Auflösungen.
- Bessere Kontrolle durch vordefinierte Größen.
- Bessere Performance da nur benötigte Inhalte geladen werden.
- Planung und Optimierung der User Experience vereinfacht.
Nachteile
- Höherer technischer Aufwand da verschiedene Darstellung existieren.
- Optimierung für vordefinierte Auflösungen / Breakpoints.
- Darstellungen müssen für alle Auflösungen angepasst werden um Fehler zu vermeiden.
- Darstellungen müssen manuell getriggert werden.
Responsive Design
Ein Design das sich an alle Auflösungen anpasst.
Beim responsive Design passt sich das Design automatisch der Auflösung bzw. dem Viewport des Besuchers an. Strukturen, Texte und Medien wie Bilder passen sich dabei flexibel der jeweiligen Bildschirmgröße an um eine optimale Darstellung zu gewährleisten. Inhalte die bei kleineren Auflösungen nicht mehr in eine Zeile passen werden dabei in die nächste Zeile verschoben.
Durch die flexibel Anpassungen müssen jedoch auch mehrere Daten geladen werden, da diese natürlich jederzeit zur Verfügung stehen. Dies kann unter Umständen zu Performance-Problemen führen.
Vorteile
- Berücksichtigung jeder Auflösung.
- Keine Spiegelung der Seite für mobile Geräte notwendig.
- Technisch einfacherer zur realisieren.
- Einfachere Pflege da alles an einem Ort gepflegt wird.
- Zukunftsorientiert da theoretisch auch zukünftige mobile Endgeräte abgedeckt werden.
Nachteile
- Aufwendigere, längere Planung durch fließende Darstellung.
- Initial höherer Aufwand bei der Planung des Designs.
- Keine Optimierung für gerätespezifische Auflösungen.
- Mögliche Leistungseinbrüche sowie längere Ladezeiten.