Aus dem Leitblick Blog:
Benjamin Bellardita 23. Oktober 2012
Kategorien: MarketingTechnikTrends

Responsive Web-Design: Eine Webseite für alle Endgeräte

Vor ein paar Jahren surften wir durch das Internet mit einem Laptop oder einem Desktop PC, was es den Webdesignern und Programmierern einfach machte die Seite zu gestalten.

Webseiten wurden für eine Standard-Bildschirmauflösung konzipiert (1024 Pixel breit oder 1280 Pixel breit) und wurden somit auf allen Endgeräten gut wiedergegeben.

Doch die Zeiten in denen Designer mit einer festen Bildschirmauflösungen arbeiten konnten sind vorbei. Der Internetnutzer von Heute hat eine Vielzahl an internetfähigen Geräten zur Auswahl. Zu den Klassikern, dem Laptop und dem Desktop-PC, sind Smartphone, Tablet und Fernseher hinzugekommen. Und auch die Endgeräte der ersten Stunde können heute in den unterschiedlichsten Bildschirmgrößen vorkommen. Vom 13“ Ultrabook bis zum 27“ LED-Monitor ist auch hier alles dabei. Daraus resultiert eine Vielfalt an Bildschirmauflösungen, die größer ist als je zuvor und die Webseiten somit vor eine neue Herausforderung stellt.

Diese Herausforderung für eine moderne Internetpräsenz ist es somit nicht nur in den unterschiedlichsten Bildschirmauflösungen dargestellt zu werden, sondern sie muss für alle Auflösungen optimiert sein. Eine Vorgehensweise diese Flexibilität einer Webseite zu erreichen, bezeichnet man im Webdesign als Responsive Design.

Wikipedia.de definiert Responsive Design als „eine Praxis im Webdesign, bei der der grafische Aufbau, insbesondere die Strukturierung der einzelnen Elemente, wie z. B. Navigationen und Texte, von Webseiten dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes erfolgt.“

Doch was heißt das im Klartext?
Am Besten betrachten wir hierfür ein Responsive Design im Einsatz.
Ein gutes Beispiel ist die Internetseite von foodsense (www.foodsense.is).
Damit Sie das Responsive Design im Beispiel einfach nachvollziehen können, gibt es einen kleinen Trick: Verkleinern Sie Ihr Browser-Fenster einfach manuell. So simulieren Sie für die Webseite eine kleinere Auflösung und können die Veränderungen live mitverfolgen.

Öffnet man die Webseite auf einem Endgerät mit einer Auflösung ab 1280 Pixel Breite, sehen wir eine schöne, aber technisch unauffällige Webseite mit großen Bildern und einem klassischen Aufbau: Links ein Menü, in der Mitte Inhalte und eine große Slideshow mit einem weiteren Menü.

Responsive Web-Design - Desktop-Ansicht

Verringern wir die Auflösung nun Schrittweise, erkennen wir, dass sich die Webseite Stück für Stück ein wenig verändert. Die erste große Änderung ist ab einer Breite von 1028 Pixeln zu erkennen, wenn sich das Menü von Links nach ganz Oben verschiebt. Verringern wird die Auflösung weiter, wird sich auch die Webseite weiter anpassen. Aus dem Menü, das ursprünglich aus Grafik und Text bestand, wird nun ein reines Text-Menü. Der Anfangs in vier Spalten geteilte Inhalt wird zu erst zweispaltig und am Ende sogar zu nur noch einer Spalte.

Responsive Web-Design - iPad-Ansicht

Die Webseite ist somit für alle Besucher gleichermassen nutzbar, egal mit welchem Endgerät sie diese gerade aufrufen.

Mein Fazit: Auch wenn bisher nur wenige Webseiten unter Berücksichtigung von Responsive Design entwickelt wurden, wage ich die Prognose, dass wir hier vor einer kleinen Revolution stehen. Webdesigner werden beim Planen von Webseiten nicht mehr das Zepter in der Hand haben und eine Standardauflösung bestimmen können, sondern sie müssen sich den Gegebenheiten des Markts anpassen und die Konzepte unter Berücksichtigung der unterschiedlichen Endgeräte erstellen. Wir werden also in der Zukunft häufiger Webseiten vorfinden, die für unsere verschiedenen Endgeräte optimiert sind und sich dadurch immer ohne Einschränkungen bedienen lassen.

Benjamin Bellardita bei Google+

Hinterlasse eine Antwort