Online-Marketing-Blog Heroshot

Fachbegriffe einfach erklärt: Responsive Design

Schlauen Sie sich auf

22.10.2012

Fachbegriffe einfach erklärt: Responsive Design

Seit einiger Zeit sorgt der Begriff des Responsive Design für Aufsehen im Bereich Webdesign, also im Bereich der Gestaltung und Programmierung von Webseiten. Was aber verbirgt sich hinter diesem Begriff? Dieser Blogartikel erklärt den Begriff.

Was ist Responsive Design?

Responsive Webdesign kann am Besten als "reaktionsfähiges Webdesign" übersetzt werden. Das Ziel: Der (grafische) Aufbau einer Webseite, v.a. deren Navigationselemente und Texte sollen dynamisch an die technischen Besonderheiten desjenigen Gerätes angepasst werden, mit dem die Webseite gerade aufgerufen und betrachtet wird. Anders gesagt: Das Design einer aufgerufenen Webseite soll auf dasjenige Gerät reagieren, mit dem die Webseite aufgerufen wird.

Warum ist das wichtig?

Die Notwendigkeit für ein reaktionsfähiges Webdesign leuchtet sofort ein: Bildschirmgröße, Auflösungen der Bildschirme oder Eingabemöglichkeiten von PCs, Notebooks, Smartphones, Tablets (wie dem iPad), oder TV-Geräten variieren extrem stark. Entsprechend stark variieren dann auch das grafische Erscheinungsbild und die Bedienung einer Webseite abhängig vom jeweiligen Endgerät. Und genau letztere Variabilität soll nun eben durch das Responsive Design vermieden bzw. zumindest in geordnete Bahnen gelenkt werden. Und da die Anzahl der verschiedenen v.a. mobilen Endgeräte zunehmend stark ansteigt, besteht hier tatsächlich Handlungsbedarf.

Wie funktioniert Responsive Design?

Wie aber erfolgt nun die Anpassung des Erscheinungsbildes und der Bedienung einer Webseite an das jeweilige Endgerät? Die Idee ist eigentlich ganz einfach: Das endgültige Erscheinungsbild und die finale Bedienung einer aufgerufenen Website werden beim Responsive Design nicht – wie bei klassisch programmierten Webseiten – einmalig und statisch festgelegt und definiert, sondern dynamisch erst beim Aufruf einer Webseite anhand des von einem Besucher benutzten Internet- Browsers spezifiziert.

Konkret werden Seitenaufbau und Bedienung unter Verwendung so genannter "Media Queries" (Medienabfragen) bestimmt. Mit einer Medienabfrage wird anhand einer Liste von technischen Kriterien dasjenige Endgerät bestimmt, mit dem eine Webseite aufgerufen wird. Beispiele solcher technischen Kriterien sind die Bildschirmgröße, die Auflösung des Bildschirms, unterstützte Betrachtungswinkel (Querformat, Hochformat) oder Eingabemöglichkeiten (Maus, Tastatur, Sprache, Finger).

Abhängig vom identifizierten Endgerät werden dann bestimmte Designentscheidungen getroffen, z. B. wird die Schriftgröße einer Webseite vergrößert oder verkleinert und die Navigationselemente und Texte der Webseite werden automatisch neu angeordnet.

Interessante Links