Responsive Webdesign erklärt

Alter Wein in neuen Schläuchen? Zur Geschichte des Responsive Webdesigns

Studiert man Literatur zum Thema „Responsive Webdesign“ werden häufig aktuelle Web-Technologien wie HTML5 und CSS3 als Grundlage für die Umsetzung responsiver, also flexibel reagierender, Websites genannt. Das ist jedoch nur zum Teil richtig. Denn pures HTML ist bereits seit seinen Ursprüngen Anfang der 90er Jahre responsiv: Inhalte passen sich, bis auf einige Ausnahmen, der verfügbaren Breite des Ausgabegerätes an. Denn die von Tim Berners-Lee erdachte Auszeichnungssprache war ursprünglich lediglich für den Austausch wissenschaftlicher Texte gedacht und recht simpel gestrickt.

HTML-Seite ohne Style

Demo: Ungestyltes, reines HTML ist von Haus aus schon recht responsiv. Sieht nur nicht besonders toll aus.

Mit der rasch zunehmenden Verbreitung des Internets wurden Websites schnell auch für Unternehmen interessant. Da dort jedoch die Optik einer Webseite einen deutlich höheren Stellenwert als bei wissenschaftlichen Texten besaß, nutzte man anfangs HTML-Tabellen, später so genannte Stylesheets (CSS), für das Layout einer Seite. Dadurch wurden Inhalte in Boxen mit häufig fester Breite eingepfercht und um die Anpassbarkeit an verschiedene Ausgabegrößen war es geschehen. Da damals Computer mehrheitlich jedoch nur als klobige Kästen mit noch klobigeren Bildschirmen existierten, spielte diese Einschränkung keine große Rolle: Man achtete einfach darauf, dass die definierte Breite in Pixel kleiner als die Breite der am häufigsten im Einsatz befindlichen Monitore war. Und weil lange Zeit eine Auflösung von 1024 x 768 Pixel das Maß der Dinge war, wurden Seitenbreiten von um die 960 Pixel zum Quasistandard. Auf Bildschirmen mit geringerer Auflösung oder in kleinen Browserfenstern entstanden dann horizontale Scrollbalken.

HTML-Seite ohne Style

Demo: Bei einer Seite mit fixer Inhaltsbreite, sind Teile des Inhalts auf kleinen Bildschirmen nur noch mittels horizontalen Scrollbalken erreichbar.

Auch dafür gab es Lösungen: Statt Breiten von Inhaltsbereichen fest zu definieren, verwendete man Prozentangaben – die Geburtsstunde der so genannten „Fluiden Layouts“. Allerdings hatten Fluide Layouts so ihre Tücken: Definiert man beispielsweise zwei nebeneinanderstehende Spalten mit je 49% Breite, so wurden diese Spalten auf kleinen Bildschirmen (oder kleinen Browserfenstern) so schmal, dass die darin befindlichen Texte kaum noch lesbar waren. Also musste man neben den Prozentangaben zusätzlich Minial- und Maximalwerte in Pixel festlegen – und brachte damit zwangsläufig auch wieder horizontale Scrollbalken auf kleinen Ausgabegeräten ins Spiel.

Gastautor: André Herdling von Visionen & Kreationen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.