Mobile, Pads und Netbooks verändern die Ansprüche an eine Website. In Zukunft werden wir bei der Konzeption einer Website, eine Vielzahl von Devices berücksichtigen müssen €“ mit unterschiedlichen Auflösungen, Fähigkeiten und Bedienkonzepten. Doch wie muss modernes Webdesign auf diese Herausforderung reagieren?

Eine vielversprechende Antwort bei der zukünftigen Gestaltung von Websites heißt: Responsive Design. Im Kern lässt sich der Gedankengang hinter Responsive Design wie folgt Zusammenfassen:

Wenn die Anzahl unterschiedlicher Endgeräte zunimmt, gibt es nur eine ökonomische und ergonomische Konsequenz: die Benutzeroberfläche einer Website muss sich flexibel auf die Anforderungen des Endgerätes anpassen.

Das Ende der absoluten Kontrolle

Hinter dieser Antwort verbirgt sich ein radikaler Paradigmenwechsel im Webdesign. Designer von Benutzeroberflächen lieben in der Regel feste Rahmenbedingungen. Denn innerhalb von fest definierten Umgebungen lässt sich das Design und damit das Erscheinungsbild einer Website perfekt kontrollieren. Absolute Kontrolle ist bei vielen Grafikern geradezu ein zwanghafter Trieb. Dies resultiert in ein Designprinzip mit starren Rastern. Ein Prinzip, auf das seit Jahrtausenden unsere westliche Kunst und Grafik basiert. Eine feststehende Gestaltungsfläche wird über virtuelle Linien in ein harmonisches Flächensystem aufgeteilt €“ das Gestaltungsraster. Ein perfektioniertes Gestaltungssystem, angewandt von malenden Mönche bis zum neuzeitlichen Grafikdesigner. Das Raster gibt dem Gestalter seit Urzeiten Sicherheit: feste Regeln, absolute Kontrolle über Proportion und Harmonie.

Paradigmenwechsel Responsive Design

Hinter dem Begriff Responsive Design verbirgt sich daher eine kleine Revolution. Responsive Design ist das Ende der absoluten Kontrolle über feststehende Raster. Ein Blatt Papier hat eine feste Proportion. Dagegen sind die Proportionen von Bildschirmdisplays von Smartphones, Pads, PCs und Laptops höchst unterschiedlich. Ein Design mit festen Proportionen wird dieser Vielzahl digitaler Ausgabebedingungen nicht gerecht. Für Screendesigner bedeutet dies: verabschiedet euch vom Gedanken der absoluten Kontrolle über Proportion und Harmonie.

Responsive Design erfordert Denken ohne starre Grenzen

Wer sich mit Responsive Design beschäftigt muss daher zuerst die Barrieren im eigenen Denken überwinden: gutes Webdesign verhält sich interaktiv. Ändern sich die Spielregeln durch ein bestimmtes Endgerät so ändert sich das Design. In der digitalen Welt gibt es eben kein feststehendes A4 Format. Für viele Designer eine schwere Kost. Wer in festen Rastern denkt, kann mit relativen Umgebungen schlecht umgehen. Eine Hürde, die für manchen Designer unüberwindbar ist. Wer versucht für jede Möglichkeit eines Endgerätes eine optimale feststehende Oberfläche zu definieren wird scheitern. n unterschiedliche Endgeräte resultieren zwangsläufig in n unterschiedliche Designraster. Dies ist der ökonomische Overkill für Webdesign.

Ökonomisches und ergonomisches Webdesign

Responsive Design bietet eine mögliche Antwort zur Lösung dieses Dilemmas. Ein Designprinzip, dass eine möglichst optimale Annäherung der Gestaltung an flexible Rahmenbedingen sucht. Die Betonung liegt hierbei auf optimale Annäherung. Denn das Optimum wird dabei nur selten erreicht. Die Unwägbarkeit und der Umgang mit dem Suboptimalen wird zum Kern der Gestaltung. Tschüss feste Raster, tschüss Pixelvermesser, tschüss oldschool Design. Dafür herzlich Willkommen ihr Benutzer mit Laptop, PC, Netbook, Pad, iPhone, Blackberry und Android.

Prinzipien Responsive Design

Welche Kernprinzipien zeichnen Responsive Design aus? Meiner Meinung nach sind folgende Dinge zu beachten:

• Relative Bildschirmbreite: es gibt kein festes Maß für Displaybreiten, aber Schwellenwerte auf die Design annähernd optimal funktionieren soll, z.B. 800px, 1024px oder 1200px Breite. Das Design unter, zwischen oder über solchen Schwellenwerten interpoliert flexibel das Layout zum nächsten optimalen Schwellenwert.
• Flexible Raster statt starre Layouts: Layoutraster sollen sich proportional zur Auflösung verändern.
• Flexible Grafiken und Schriften: % Maßeinheiten ersetzen die absolute Einheit des Pixels. Dies gilt für alle Vermaßungen, insbesondere Grafiken, Schriften etc.
• Mobile ist nicht gleich PC: die Benutzeroberflächen für Touchdisplays erfordern geeignete Navigationselemente €“ reduziert auf das Wesentliche.

Beispiele für Responsive Design

Wie sieht Responsive Design in der Praxis aus? Anbei ein paar praktische Beispiele, die mir gut gefallen:

http://lapse.org/
http://www.barrelofmonkeys.org/
http://earthhour.fr/
http://calebacuity.us/

Einfach die Größe des Browserfensters verändern und beobachten, wie das Layout der Website dynamisch reagiert.

Viel Spaß beim Testen.