8 March 2017
0 Comments

Responsive Webdesign

2010 sah der Webdesigner Ethan Marcotte, wie die »Responsive Architecture«, reaktionsfähige Gebäude bzw. Gebäudeelemente entwirft, die auf äußere Einflüsse zu reagieren, um eine wechselseitige Beziehung - Mensch und Gebäude - zu realisieren. Auf diesem Hintergrund erkannte er, dass bisher übliche statischen Websites nicht in der Lage sind, auf die steigende Anzahl verschiedener Display-Größen und Geräte angemessen zu reagieren. So entstanden die Grundlagen für eine neue Praxis des Webdesigns.
Mit der Präsentation des iPhones, dem ersten Gerät mit großem Touchscreen 2007, das zudem mit einem voll funktionsfähigen Webbrowser ausgestattet war, begann ein neues Zeitalter - für Nutzer von Webangeboten und Webentwickler.
Dieses Gerät konnte nun also auch Websites wie auf einem Desktop-Browser anzeigen und sorgte erstmals für ein akzeptables Surferlebnis auch auf mobilen Handgeräten. Seither schritt die Entwicklung mit Sieben-Meilen-Stiefeln voran, andere Hersteller zogen nach und schon wenige Jahre später konnte man sich ein Mobiltelefon ohne Touchscreen und Internetzugang nicht mehr vorstellen. Um die grundlegenden Veränderungen zu verstehen, lohnt noch einmal der Blick zurück:
Bis dato wurde Webangebote meistens über "Schreibtisch"-Computer und Bildschirme, bzw. Laptops mit mitlerweile diesen ebenbürdigen Displays besucht. Die Websites hatten meist eine fixe Seitenstruktur, basierend auf einem Raster, ausgehend von einer festen Breite von 960 Pixeln. Auch wenn es schon immer möglich war, Websites für Endgeräte mit anderen Bildschirmen flexibel zu gestalten, wurde diese Möglichkeit jedoch nur selten genutzt, entweder aus Bequemlichkeit oder aber weil kein großer Bedarf an flexiblen Designs bestand. Die gängige Arbeitspraxis der Webdesigner, Websites in einem Bildeditor »statisch« zu entwerfen und anschließend das Ergebnis programmtechnisch genauso statisch 1:1 umzusetzen, trug ihr Übriges dazu bei.
Und was ist nun »Responsive Webdesign«?
Übersetzt könnte von »reaktionsfähigem Webdesign« gesprochen werden. Der Begriff wurde 2010 vom amerikanischen Webdesigner Ethan Marcotte geprägt. Er bezog sich dabei auf einen recht neuen Bereich der Architektur namens »Responsive Architecture«, der es sich zum Ziel setzt, reaktionsfähige Gebäude bzw. Gebäudeelemente zu entwerfen, die in der Lage sind, auf äußere Einflüsse zu reagieren. Nicht nur wir Menschen sollen uns an unsere Umgebung anpassen, eine reaktionsfähige Architektur sorgt eher für eine wechselseitige Beziehung, in der Mensch und Gebäude aufeinander reagieren. Dieser Gedanke gefiel Ethan gut: Die bisher üblichen statischen Websites waren nicht in der Lage, auf die steigende Anzahl verschiedener Display-Größen und Geräte angemessen zu reagieren.

Nutzerzahlen und -gewohnheiten Ein Webangebot, dass nicht auch über das Handy oder Tablet genutzt werden kann, ist und wird bedeutungslos.

Und wie funktioniert »Responsive Webdesign«?
Das anpassungsfähige Webdesign basiert auf HTML5 und CSS3. Mittels der sogenannten "Media Queries" werden die Eigenschaften und Fähigkeiten der Geräte abgefragt und das Layout reagiert darauf. Bilder skalieren sich entsprechend, die Schriftgrößen passen sich dem Gerät an und vermeintlich unwichtigere Elemente weichen je nach Priorisierung der Inhalte. Das Layout erkennt auch, ob ein Gerät im Hoch- oder Querformat gehalten wird. Ein zweispaltiger Text fließt beispiels- weise bei einer Drehung ins Hochformat in eine Spalte und ist somit auf einem kleinen Display besser lesbar. Damit diese Automatismen einwandfrei funktionieren, werden alle Inhalte der Webseite zunächst in Workshops mit dem Betreiber nach Prioritäten genau sortiert. Es werden daraufhin Bereiche definiert, die auf kleineren Displays ausgeblendet oder weiter nach unten geordnet werden können. Durch diese Strukturierung und Herangehensweise wird es möglich, dass sich Inhalte dynamisch auf die jeweils verfügbare Breite und Höhe anpassen, um eine optimale Lesbarkeit zu garantieren.
Neue Entwicklungsanforderungen
Auftraggeber sollten jetzt zu Mitgliedern des Entwicklungsteams werden. Die Vielzahl der Displays (Handy, Tablet - jeweils horizontal und vertikal nutzbar - und Desktop-PC’s mit unterschiedlichen Bildschirmen) ist das traditionelle Vorgehen, Entwürfe in statischer Form mit Layoutprogrammen zu entwickeln (und ggf. in Papierform auszudrucken) kein gangbarer Weg mehr: Entwicklungsprozesse, die bislang davon ausgingen, dass, wenn der Auftraggeber eine grafische Vorlage positiv bewertet, in Folge so gut es es geht auf das Web zu übertragen, funktioniert nicht mehr zufriedenstellend. Auftraggeber und Designer/Entwickler sollten heute im ständigen Dialog miteinander stehen und sich gegenseitig Verbesserungen und Anregungen zuspielen, auf denen der jeweils andere aufbauen kann.

  • Ignatiy Alexandrov

    Nam liber tempor cum soluta nobis eleifend option congue nihilmperdiet doming id quod mazimplacerat facer possim assum.Typinon habent claritatem insitam

0 Comments

LEAVE A COMMENT

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Bild-CAPTCHA
Geben Sie die Zeichen ein, die im Bild gezeigt werden.