Lieber Nutzer, diese Seite wird nur mit JavaScript korrekt dargestellt. Bitte schalten Sie JavaScript in Ihrem Browser ein.
Sie sehen sonst nur eine minimale Version.

Information der Werbeagentur für responsives Webdesign

Beate Fritsche
Staatlich geprüfte Gestalterin
Telefon: +49(0)2351-6746920

Körnerstraße 5a
58507 Lüdenscheid

Die verschiedenen Ansichten vom statischem zum responsivem Layout


Das Design muss nicht nur auf den heutigen Geräten funktion­ieren, sondern auch auf den künftigen Produkten, deren Anzeige­größen wir heute noch gar nicht kennen. Das responsive Webdesign liefert das jeweils richtige Media Querie an das richtige Endgerät aus.

Das feste Layout

Bei einem festen Layout werden Abmess­ungen in Pixel angegeben, ist dadurch fix. Bei kleineren Displays wird ein Teil abge­schnitten oder das ganze Layout verkleinert (Mobilgeräte).

Das elasti­sche Layout

Ein elastisches Layout, auch fluides genannt, wird in Prozenten der Display­breite angegeben. Bei kleineren Displays ändert sich die Abmessung des Layouts, Texte und Bilder behalten aber ihre Größe.

Das adaptive Layout

Ein adaptives Layout ist vom Grund­aufbau ein festes Layout, das aber in mehreren Versionen vorhanden ist und so eine sprung­weise Anpassung erfolgen kann.

Das respon­sive Layout

Ein responsives Layout vereint das elastische mit dem adaptivem Layout. Es hat auch mehrere Sprünge, in der sich das Layout ändert, ist aber elastisch in der Display­breite und zusätz­lich mit skalier­baren Inhalten wie Text und Bilder ausge­stattet, holt sich so das Beste aus den anderen Layouts und vereint es.

Durch ein fließendes Layout­raster, anpassungs­fähigen Inhalt, Anpassung von Schrift­größen und Bildern, sowie den Layout­umbruch durch Media Queries hat das responsive Web­design den Vorteil, auf jeder Display­größe gut auszu­sehen und den Platz optimal zu nutzen. Doch sollte man schnelle Lade­zeiten nicht aus dem Auge verlieren, da viele Geräte über das WLAN im Hause laden, was die Durch­satz­geschwindig­keit einschränkt. Bei Touch­geräten fallen zu dem noch einige Möglich­keiten der Inter­aktionen aus.

Das Hover-Element zum Beispiel, an dem sich ganze Menüs ausrichten oder der Rechts­klick und auch die Flash­animat­ionen. Dafür sind einige Einfinger- und Zweifinger-, sogar Vierfinger­wisch­bewegungen dazu gekommen, sowie Doppel-Tapps und Dauer-Tapps. Aber man kann nicht davon ausgehen, dass diese Funktionen allgemein bekannt sind, noch als solche ohne Hinweise, für die Ausführung erkannt werden.