Responsive Webdesign

Mit Responsive Webdesign lassen sich Webseiten auf unterschiedlichen Monitorgrößen unterschiedlich anzeigen lassen. Hier ist ein Bild von einem Smartphone, einem Tablet und einem 16:9 Monitor

Das World Wide Web im Wandel der Zeit –  wo früher die Webseiten den gängigsten, oder zumeist kleinsten Bildschirm angepasst wurde ist nun ein breites Feld an unterschiedlichen Bildschirmgrößen vorhanden. Die Anforderungen sind gestiegen, da nun in der Zeit der Smartphones und Tablets viele mobil surfen. Als responsive Webdesign bezeichnet man jene Gestaltung, die dafür ausgelegt ist sich dem entsprechenden Ausgabegerätes-, oder Mediums anzupassen.

der Grundstein des responsive Webdesign

Am Anfang war die Seitengestaltung einer Webseite relativ einfach, da man einfach nur nach den gängigsten Bildschirmgrößen im Wandel der Zeit gestaltet hat. Solche Formate sind z.B. 800×600, oder 1024×768 Pixel. Nach diesen Größen konnte man sich richten, sodass die Webseiten in der Zeit der Tabellen-Layouts in sich starr waren. Hatte man einen kleineren Monitor, als den aktuellen Standard, musste man seitlich scrollen. Doch mit der Zeit kamen die Widescreen-Monitore immer mehr zum Einsatz, obwohl noch einige ihre alten 4:3 Monitore beibehalten haben, wodurch das Webdesign schon schwieriger wurde. Man wollte, dass die Webseiten auf jedem Monitor sichtbar sein sollten, sodass bei Widescreen-Monitoren sehr viel Platz nach rechts und links gelassen wurde. Zur gleichen Zeit wurden die Tabellen-Layouts durch CSS Definitionen abgelöst, um Quelltext und Design voneinander trennen zu können. Dadurch wurden die Möglichkeiten erweitert, sowie der Grundstein gelegt, um dynamische in der Breite variable Webseiten gestalten zu können.

als das Internet mobil wurde

Mit der Zeit der internet-fähigen Mobiltelefone, mussten sich Webdesigner etwas einfallen lassen, da die Bildschirme um ein vielfaches kleiner wurden. Es ähnelt wie dem Blick durch eine Lupe: man kann nicht die ganze Seite betrachten, sondern nur einen kleinen Ausschnitt. Einige Mobiltelefone haben diese Webseiten auf eine entsprechende Größe skaliert, wobei alles so klein wurde, dass nichts mehr lesbar war. Da gingen einige Webdesigner daher eigene CSS Deklarationen für Mobiltelefone zu schreiben. Demnach hatte man nicht nur viele Bugixes für ältere Browser, sondern auch noch eine weitere CSS Datei für internet-fähige Handys. Man wollte lieber eine Webseite für alle Geräte schreiben und nicht X-Beliebige Webseiten jedes einzelne Gerät schreiben, dass diese aufrufen kann. Responsive Webdesign wurde gefordert, da die Seite sich mehr denn je den Geräten anpassen muss.

Responsive Webdesign: die Lösung für alles

Mit dem responsive Webdesign hat man einen Alles-Könner entwickelt. Webseiten, die sich der Device-Größe entsprechend anpassen müssen auch geschickt konstruiert werden. Man muss sich vorab Gedanken darüber machen, in welcher Reihenfolge die Inhalte untereinander auf dem Smartphone erscheinen sollen, damit dementsprechend die Floats für das Erscheinungsbild auf größeren Monitoren konzipiert werden können. Stichwort hierfür ist die „mobile First“-Strategie. Außerdem muss man beachten, wie man seine Grafiken einbindet, da eine Webseite auf einem großen Monitor mit nur kleinen Grafiken auch nicht wirklich gut aussieht. Die Bilder müssen demnach frei skalierbar sein, je nachdem wie sich das Fenster verändert.

nützliche Weblinks zum responsive Webdesign

Responsive Webdesign hat schon ein klein wenig mit Magie zutun wenn man bedenkt, dass CSS manchmal tut was es will.

Ersten Kommentar schreiben

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*


Time limit is exhausted. Please reload CAPTCHA.