Responsive Webdesign

Bei dem englischsprachigen Begriff "Responsive Webdesign" handelt es sich um einen Designansatz für Webseiten, bei welchem die Darstellung der Seite sich in Abhängigkeit vom Medientyp und Parametern wie z.B. Abmessungen oder Seitenverhältnis verändert.

Eine Grundvoraussetzung für eine programmiertechnische Umsetzung ohne JavaScript ist eine CSS3 Unterstützung des Browsers, welche ab 2012 fast alle Browser erfüllen; der IE 9 von Microsoft soll CSS3 inzwischen erfüllen, die vorherigen Versionen allerdings nicht oder nur ansatzweise. 

Eine programmiertechnische Umsetzung in Verbindung mit der Programmierung von clientseitigem Quellcode in Javascript (z. B. in Verbindung mit der Javascript Bibliothek jQuery) ermöglicht weitaus mehr Tricks und noch raffiniertere Gestaltungskonzepte, allerdings scheitert deren Darstellung im Browser, wenn der Nutzer aus welchen Gründen auch immer das JavaScript deaktivert hat und/oder es wegen zentraler Einstellungen durch Administratoren in manchen Unternehmen gesperrt wurde.

Technische Neuerung: CSS3 / Media Queries

Die große Neuerung in der Programmierung ist die Einführung der sogenannten Media Queries, dh. Medienabfragen. Das Prinzip besteht darin, nur die CSS Quellcodezeilen zur Ausführung zu bringen und/oder sogar nur die CSS Stylesheet Dateien zur Formatierung von Inhalten und Definition von Layout-Elementen in der Darstellung zu berücksichtigen, welche für dieses Gerät mit dem aktuellen Browser, der aktuellen Darstellungsgröße und Orientierung (quer- oder hochkant) erforderlich ist. 

Vorteile und Nachteile von Responsive Webdesign

Responsive Design hat den den Vorteil, dass eine einzelne Seite einer Webseite mit immer dem selben Link referenziert und mit verschiedenen Geräten in verschiedenen Varianten so dargestellt werden kann, dass jeder Besucher die dort angebotenen Inhalte bzw. Informationen sehen kann. Wenn die Templates einmal korrekt geplant und realisiert wurden, muss man sich im Grunde genommen über die Endgeräte keine Sorgen mehr machen. Das ist deshalb interessant, weil heute niemand weiß, welche Auflösungen mitunter Smartphones oder Tablets oder neuartige andere Geräte in 12 Monaten haben werden. 

Responsive Design hat den Nachteil, dass die Planung, Konzeption, der Entwurf, die Programmierung und das Testen derartiger Designkonzepte naturgemäß aufwendiger ist als die bisherige Zeichnung statischer Layouts mit anschließender Programmierung. Man muss seit 2012 in Verbindung mit diversen verschiedenen Geräten, Abmessungen, Browservarianten, Betriebssystemen sowie auch aktiviertem oder deaktivem JavaScript schlichtweg damit leben, dass Webseiten auf jedem Gerät anders aussehen.

Auswirkungen von Responsive Webdesign auf Designbüros und Agenturen

Wer sich bewusst ist, dass selbst im Jahr 2012 viele ältere Webdesigner im unteren Drittel des Preissegments noch immer keine CSS Layouts fehlerfrei planen können und junge Designer und Entwickler im Gegenzug wenig Erfahrung mit der zuweilen veralteten Infrastuktur in Unternehmen und damit fehlender Unterstützung neuer Features von CSS3 haben, der kann schnell erkennen, dass die Planung und Programmierung von Responsive Webdesign Designtemplates mancheinen entweder überfordert oder Agenturen Ihr Preiskonzept überdenken müssen, denn Responsive Webdesign erfordert zwingend mehr Aufwand und mehr Hirnschmalz.

Varianten im Responsive Webdesign in Verbindung mit pixelgenauem Gestaltungskonzept oder Fluid Layouts

Als wenn man mit den Neuerungen infolge der vielen heute vorhandenen Endgeräte im Mobile Webdesign und dem Thema Responsive Webdesign bis hin zu barrierefreien Webseiten nicht längst genug um die Ohren hätte, gibt es desweiteren noch zwei völlig verschiedene Ansätze in der Planung von Layouts bei Webseiten:

Pixel-orientierte Abmessungen: Diese Variante von Entwürfen ist vor allem bei Designern beliebt, weil Grafikprogramme nun einmal beim Anfertigen des Entwurfs eine klare Position für Linien, Flächen und Texte erwarten.

Fluid Webdesign: Hierbei handelt es sich um Layouts mit prozentuallen Längen-, Höhen- bzw. Breitenangaben. Statt ein Layout mit 320px-320px-320px anzugeben gibt man 33%-33%-33% an, wo mit auch schon das Problem erkannt wird: Uns fehlt 1% bei fehlender Angabe der Dezimalstellen. Fluide Designkonzepte haben im Layout tendentiell falsche bzw. um 1px verschobene Abmessungen. Darüber hinaus besteht bei prozentuellen Abmessungsangaben die Problematik, dass sich das Seitenverhältnis bei Bildmaterial nicht verändern darf und zudem selbst bei Einhaltung des Seitenverhältnisses plötzlich das Rendering der Grafik dem Browser überlassen wird. Hat das Originalbild sehr kleine Abmessungen führt eine Vergrößerung infolge prozentueller Maßangaben bei großen Bildschirmen dazu, dass das Bild schnell verpixel, unscharf oder schwammig aussieht. 

Auswirkungen auf Auftraggeber

Auftraggeber müssen seit 2012 zunehmend damit leben, dass Entwürfe nicht mehr pixelgenau umgesetzt werden können und/oder der Testaufwand sich durch die Anzahl der Darstellungsvarianten und Endgerätvarianten um ein Vielfaches vergrößert. Zudem gilt es im Vorfeld abzustimmen, welche Varianten überhaupt mit einem Entwurf und einer verschiedenen Darstellung berücksichtigt werden. 

Siehe auch:

Media Queries