Stichworte | Thomas Borghoff Web Engineering

Responsive Website

»Responsiv« gestaltete Websites passen sich dem Ausgabemedium an, sie »antworten«, sprich: reagieren auf unterschiedliche Bildschirmgrößen und sind auch über verschiedene Arten von Ausgabegeräten gut bedienbar.

Beispiele für responsive Techniken

Eigentlich ein alter Hut

Vorläufer der responsiven Seiten waren die fluiden Seiten. Bis in die 90er-Jahre und bis zum Aufkommen immer größerer Bildschirme wurden Websites meist für fixe Breiten zwischen 800 und später 1024 Pixel entwickelt. Ganz ernsthaft. Websites waren vielmehr auch digitale Drucksachen – jedes Element wurde pixelgenau platziert. Die Ambition des Entwicklers bestand vor allem darin, unterschiedliche Browser dazu zu bringen, die Website stets gleich aussehen zu lassen.

Als dann die Bildschirme immer größer wurden, war dieses Konzept am Ende, die Inhalte sollten sich also ausbreiten. Dies nannte man sodann »fluides Verhalten«, ein Verhalten, dass vor allem von Graphikern aufs Äußerste bekämpft wurde, da so natürlich keine genaue Positionierung von Inhalten mehr möglich war.

Und dann kamen die Smartphones

Zwar gab es auch schon früher diverse kleinere Geräte, doch erst mit dem iPhone im Jahr 2007 waren diese in der Lage, Websites einigermaßen ordentlich anzuzeigen. Allerdings waren nun all die Websites viel zu groß für den kleinen Bildschirm, so dass man »pinchen«, also pfetzen oder kneifen musste, um die Inhalte so anzuzeigen, dass man sie lesen konnte.

Mit zunehmender Verbreitung des Smartphones wurde es schließlich praktisch unumgänglich, auch für diese Geräte einfache, bedien- und -tatschbare Websites anzubieten. Manche Unternehmen entwickelten spezielle Mobilversionen Ihrer Websites, oft mit nur eingeschränkten Inhalten, ein anderer Weg war es, responsive Wesbites zu entwickeln, bei welchen ein identischer Inhalt lediglich anders dargestellt wurde.

Mobile first als Entwicklungs- und Denkansatz

So entstand die große Frage, wie man eine bestehende Website schrumpfen konnte. Die Antwort lautete: praktisch nicht. Dies liegt vor allem daran, dass eine Website auf dem Smartphone mehr oder minder linear – vertikal von oben nach unten – funktioniert, während die Website am Desktop, also am Bildschirm auf dem Schreibtisch, zweidimensional und flächig aufgebaut ist, somit auch eine horizontale Ordnung ermöglicht.

Da es nun auch wesentlich einfacher ist, lineare Ordnungen in zweidimensionale zu überführen als umgekehrt, lautet der betreffende neue Entwicklungsansatz »mobile first«. Dies hat somit nichts mit einer Fixierung auf Smartphones als bevorzugtem Gerät zu tun, sondern viel mehr mit der inneren technischen Struktur einer Website, von der Sie als Nutzer:in nichts mitbekommen, zumindest nicht, solange diese keine Unstimmigkeiten oder Stolpersteine enthält.