Definition Elastic Layout
Beim Elastic Layout wird im Webdesign sowohl Höhe (height) als auch Breite (width) der Webseite in Prozentwerten festgelegt. Das heißt, die Webseite im Elastic Layout passt sich sowohl in der Höhe, als auch in der Breite proportional der Größe des jeweilige Browserfensters an. Dadurch kann die Schrift schnell verzerrt und unleserlich werden, was wohl der Hauptgrund dafür sein dürfte, dass das Elastic Layout in der Praxis äußerst selten Anwendung findet.
FAQs zum Elastic Layout
Was ist ein Elastic Layout?
Ein Elastic Layout (elastisches Layout) ist ein Webdesign-Konzept, bei dem die Breite von Containern und Elementen in relativen Einheiten definiert wird, die sich auf die Schriftgröße des Nutzers beziehen. Wenn ein Nutzer die Schriftgröße in seinem Browser erhöht, wächst das gesamte Layout proportional mit, um das visuelle Gleichgewicht zwischen Text und Designelementen beizubehalten.
Fixed vs. Fluid vs. Elastic: Was sind die Unterschiede?
Diese drei Ansätze steuern die Flexibilität einer Website unterschiedlich:
- Fixed (Fest): Verwendet statische Pixel-Werte (px). Das Layout ändert sich nicht, was auf kleinen Schirmen zu Scrollbalken führen kann.
- Fluid (Flüssig): Nutzt Prozentangaben (%). Das Layout passt sich der Breite des Browserfensters an.
- Elastic (Elastisch): Nutzt schriftbasierte Einheiten (em/rem). Das Layout passt sich der Schriftgröße an, unabhängig von der Fensterbreite.
Welche Maßeinheiten werden genutzt?
Die technische Basis für Elastic Layouts sind em und rem:
- em: Bezieht sich auf die Schriftgröße des Elternelements.
-
rem (root em): Bezieht sich auf die Schriftgröße des Root-Elements (meist das
<html>-Tag).
In modernen Projekten wird meist rem bevorzugt, da es Vorhersagbarkeit bietet und Verschachtelungsfehler vermeidet.
Warum ist es gut für die Barrierefreiheit?
Elastic Layouts sind ein massiver Gewinn für die Accessibility. Menschen mit Sehbehinderungen stellen oft eine größere Standardschriftart in ihrem Betriebssystem oder Browser ein. Ein elastisches Layout respektiert diese Wahl und verhindert, dass Text aus seinen Boxen "herausfällt" oder sich überlappt, da die Boxen mit dem Text mitwachsen.
Wann sollte man ein Elastic Layout einsetzen?
Elastische Layouts eignen sich besonders für inhaltsgetriebene Seiten wie Blogs, Magazine oder Dokumentationen. Heute werden sie oft als hybride Ansätze genutzt: Die Grundstruktur ist flüssig (Fluid) für die Responsivität auf verschiedenen Geräten, während Abstände, Polsterungen (Padding) und Textcontainer elastisch (Elastic) sind, um die Lesbarkeit zu garantieren.
letzte Aktualisierung: 18. Januar 2026
Regelmäßig Tipps und Tricks rund ums Onlinemarketing.