Responsive Webdesign

Responsive Webdesign, auch responsives Webdesign genannt, bezeichnet eine Denkweise im Gestaltungs- und Programmierprozess, die berücksichtigt, dass das Internet heutzutage nicht mehr nur vom hemischen Desktop-Computer abgerufen wird, sondern von einer Vielzahl neuer Geräte mit den unterschiedlichsten Auflösungen, wodurch sich das Design an die jeweils gegebene Bildschirmauflösung anpassen muss.
Hierbei kommt eine große Menge innovativer Techniken zum Einsatz, zum Beispiel HTML5, CSS3 und Media Queries sowie jquery, welche zusammen das Erscheinungsbild der Webseite an das jeweilige Endgerät anpassen können.
Vorteil des Responsive Webdesign gegenüber einer seperaten mobilen Webpage ist unter anderem, dass man die Inhalte nun nicht mehr auf zwei verschiedenen Seiten pflegen muss – dies erleichtert das Ändern, aber auch die Neuerstellung von Inhalten, dem sogenannten Content.

responsive Mac

Desktop

Auf dem Desktop oder sogar größeren Devices, wie zum Beispiel internetfähigen Fernsehern, sind die Elemente Header, Navigation und Inhalt wie von nicht responsiven Webseiten gewohnt angeordnet.

Hier kommen große Slider im Header als Eyecatcher optimal zur Geltung.

responsive iPad

Tablet

Auf dem Tablet verändert sich zum Beispiel die Breite des Headers, um der Navigation auf dem im Vergleich zum Desktop schmaleren Display mehr Platz zu geben.

Der Inhalt nimmt im responsive Webdesign nach wie vor den größten Bereich ein, um eine angenehme Lesbarkeit zu gewährleisten.

responsive iPhone

Smartphone

Auf den sehr schmalen Displays von Smartphones „fliessen“ die Elemente untereinander.

Benutzerfreundliche Funktionen wie responsive, ein- und ausblendbare Navigationen schaffen hier nicht nur mehr Platz für den Inhalt, sondern bieten darüber hinaus ein interaktives Erlebnis für den User.

not responsive

Nicht Responsive

Ist eine Seite nicht nach den Regeln des Responsive Webdesigns programmiert worden, so ist diese in der Regel zwar sichtbar auf Tablets und Smartphones.

Sie ist allerdings so winzig skaliert, dass man ohne ständiges Zoomen überhaupt nichts lesen kann und schnell den Überblick verliert – und damit die Motivation potentieller Kunden, sich auf ihrer Webpage weiter umzusehen, geschweige denn etwas in ihrem Onlineshop zu kaufen.

Responsive Webdesign in Aktion – hier und jetzt!

Auch unsere Webseite ist natürlich responsive und sie können dies tatsächlich ausprobieren – besuchen sie diese Webseite einfach mit ihrem Smartphone und ihrem PC parallel oder verkleinern sie einfach das Browserfenster auf ihrem Computer und laden die Seite neu.

Zu Teil 2: Über die Vorteile von Responsive Webdesign