Der Begriff „Responsives Webdesign“ ist allgegenwärtig. Wir sind mit dem „reagierenden Design“ vertraut und begegnen ihm auf unseren Smartphones und Tablets. Zusammengefasst können wir uns darunter einen gestalterischen und technischen Ansatz zur Erstellung von Webseiten vorstellen, so dass diese Webseiten auf Eigenschaften des jeweils benutzten Endgeräts reagieren können.

Wie die Idee entstand

Erstmals wurde die Bezeichnung „Responsives Webdesign“ von Webdesigner und Entwickler Ethan Marcotte im Mai 2010 in einem Artikel für das Magazin „A List Apart“ verwendet. In dem Artikel nimmt er Bezug zur responsiven Architektur. Diese verfolgt das Ziel – anstatt unveränderbarer Räume zu gestalten, deren jeweiliges Erleben fest abgesteckt ist – eine „schlaue“ Architektur zu erschaffen. Eine Architektur, die sich in Form, Farbe und Temperatur den Gegebenheiten anpasst.

Marcotte lebt in Boston, ist ein beliebter und erfahrener Redner und betreibt den Blog „Unstoppable Robot Ninja“

Schon 2010 war absehbar, dass die Nutzung mobiler Endgeräte innerhalb der nächsten drei bis fünf Jahre stark wachsen würde. Angesichts dieser Entwicklung sah Ethan Marcotte die Notwendigkeit, ein Webdesign zu entwickeln, welches sich ganz ähnlich der Architektur individuell anpassen kann. Er stellte sich der Frage: „Wie können wir – und unsere Designs – uns anpassen?“

Diese Vermutung hat sich bestätigt. Die Nutzung des mobilen Internets hat sich seit 2010 von 22,9 Millionen auf 49,6 Millionen Nutzer mehr als verdoppelt (© Statista 2014).

Ein Design mit vielen Facetten

Technische Basis hierfür sind neuere Webstandards wie HTML5, CSS3 und JavaScript – insbesondere die mit CSS 3 eingeführten Media Queries. Sie erlauben unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften des Ausgabemediums. Schließlich sind sowohl das Erscheinungsbild als auch die Bedienung einer Webseite stark vom jeweiligen Endgerät abhängig. Angefangen bei Größe und Auflösung des Displays bis hin zu variierenden Eingabemethoden. Beispielsweise können folgende Eigenschaften als Kriterien herangezogen werden:

• Größe des Gerätes
• Bildschirmauflösung
• Orientierung (Hoch- oder Querformat)
• Eingabemöglichkeiten (Tastatur, Fingergeste „Touch“, Sprache)

Ein wichtiger Aspekt bei der Entwicklung eines responsiven Designs ist, dass auf verschiedene Endgeräte ausgerichtete Webseiten-Designs als Facette eines einzelnen Designs betrachtet werden.

Ganzheitliche Kommunikation

Seither befindet sich responsives Webdesign auf dem Vormarsch. Denn unabhängig von der bereits angesprochenen Flexibilität handelt es sich dabei um einen kosteneffizienten Ansatz zur ganzheitlichen Kommunikation. Auch der Pflegeaufwand wird verringert, da Inhalte für jegliche Endgeräte nur einmalig zur Verfügung gestellt werden müssen.

Weitere Vorteile sind:

• Traffic: es müssen keine unterschiedlichen Seiten analysiert werden
• Verlinkung: der Link ist nicht abhängig vom Endgerät, eine Link-Angabe genügt
• Programmieraufwand: bis auf die Inhaltspflege fällt nach Realisierung des responsiven Webdesigns kaum noch Programmieraufwand an

Responsive Webdesign in ÖV_digital

Angesichts dieser Kenntnisse war „Responsives Webdesign“ schon früh eine funktionale Anforderung an ÖV_digital. Mit der technischen Entwicklung wurde die codecentric AG beauftragt, seitens der OEV ist René Leban zuständig. Die Koordination liegt aktuell bei Marc Clemens (codecentric AG), als Product Owner fungiert Pascal Theis.

Technische Umsetzung

Bei der Umsetzung wird zwischen einem HTML-Projekt und einem OpenCms-Projekt unterschieden. Im HTML-Projekt wird das Design von Pixelpark in HTML übersetzt. Die Basis der HTML-Umsetzung bildet das in der ersten Projektphase ausgewählte Framework Zurb Foundation. Zur Abbildung der erwarteten Funktionalität wird das Framework von codecentric und René Leban erweitert.

Die CSS-Styles werden mithilfe einer Stylesheet-Sprache als Präprozessor erzeugt. SASS ermöglicht unter anderem die Verwendung der von Zurb Foundation genutzten Funktionen. Der Präprozessor bietet die Möglichkeit, ein CSS modular zu entwickeln und damit langfristig die Wartbarkeit zu erhöhen.

Nach der Entwicklung des HTML-Designs wird dieses im OpenCms-Projekt integriert. Gegebenenfalls werden die entsprechenden Backend-Services angebunden. Die technische Grundlage bildet hier Java7, das Projekt läuft auf einem Tomcat7 als Servlet-Container.

Responsives Regelwerk

In dem für ÖV_digital entwickelten responsiven Regelwerk wurden generelle Regeln zum responsiven Verhalten der einzelnen Module aufgestellt. Die Anordnung der Module kann sich von Device-Ebene zu Device-Ebene ändern. Die Reihenfolge und demnach die hierarchische Anordnung bleibt dennoch durchgehend unverändert.

Die Module werden nach Displaygröße unterschieden. Insgesamt gibt es drei Varianten:
Small: Smartphones
Medium: Tablets oder Subnotebooks
Large: Desktop PCs und Laptops

Wir sprechen also von festen Größen. Ein Smartphone beispielsweise übermittelt hochkant immer die Breite 320px. Die Skalierung auf die entsprechende reale Smartphone-Auflösung geschieht im Smartphone. Dadurch muss berücksichtigt werden, dass:

• Bilder in entsprechender Auflösung vorliegen
• Icons über einen Icon-Font abgebildet werden
• alle Elemente relativ zueinander formatiert werden