Was Responsive Webdesign (RWD) ist, glaubt wohl jeder mehr oder weniger gut zu wissen. Beschäftigt man sich allerdings etwas eingehender mit dem Thema, wird klar, wie viele unterschiedliche Ansätze und Strategien es in Sachen RWD gibt. Wenn ein Kunde sagt, er benötige einen responsiven Webauftritt für sein Unternehmen, ist ihm oft nicht wirklich klar, was er braucht und was sinnvoll ist. Hinzu kommt, dass viele Agenturen und CSS-Style-Guides Seiten als "responsive" anpreisen, ohne dabei genaue technische Möglichkeiten, Systemkonzepte oder Systemversionen aufzuzeigen.

Wenn man den Anforderungen eines Projekts wirklich gerecht werden will, ist es mit dem Schlagwort vom Responsive Webdesign allein noch nicht getan. Worauf es ankommt, ist einen genauen Blick auf die Anforderungen des Unternehmens und sein IT-Architekturumfeld zu werfen.

Responsive Webdesign als Reaktion auf Innovation

2010 hat Ethan Marcotte mit seinem Artikel „Responsive Webdesign“ auf „A List Apart“ den Grundstein für eine Diskussion in der Webdesigner- und Entwicklerszene gelegt, die seitdem zu vielen Richtungen, Meinungen und Strategien geführt hat. Grundidee von RWD war es, auf die aufkommenden unterschiedlichen Displaygrößen zu reagieren. Das 2007 eingeführte iPhone hatte mit seinem funktionstüchtigen Webbrowser neue mobile Möglichkeiten eingeleitet. Seitdem sind die Anforderungen an Displaygrößen und Auflösungen immer vielfältiger geworden. Zumal Web Content nicht nur auf Smartphones dargestellt werden muss, sondern inzwischen auch auf Tablets, Smart-TV-Geräten und IoT-Devices. Auf Grund dieser Entwicklung hat auch Google seit November 2016 die „Mobile-first Indexing“ Strategy forciert, welche das Ranking von responsiven Webseiten begünstigt. RWD soll somit neben einer optimalen User Experience auch als ein wichtiger Faktor für langfristige relevante Suchmaschinen Rankings stehen. Um RWD-Anforderungen umzusetzen, müssen unterschiedliche technische Möglichkeiten sowie RWD-Strategien im Zusammenhang mit den Businessanforderungen evaluiert, priorisiert und implementiert werden.

Verschiedene Responsive-Webdesign-Ansätze

Es gibt eine ganze Reihe von Responsive Webdesign-Technologien und -Ansätzen, die aktuell häufig verwendet werden und oft sogar Ausgangspunkt einer Change-Strategie sind. Welche dieser RWD-Ansätze sinnvoll sind, hängt im Wesentlichen vom Business Case bzw. Szenario eines Unternehmens ab. Statt nur eine der verfügbaren Optionen zu verwenden, ist es allerdings oft üblich, mehrere Ansätze parallel zu verfolgen: Man spricht dann von einer Multisystem- statt einer Singlesystem-Strategie. Welche Strategie sinnvoll ist, hängt von individuellen Unternehmens-Faktoren ab, von personellen und finanziellen Ressourcen sowie von der übergeordneten Unternehmensstrategie.

Die Erfahrung zeigt allerdings, dass durchaus ein branchen- bzw. szenario-abhängiger Zusammenhang besteht. Dies ist nicht zuletzt dann der Fall, wenn ein Unternehmen im Wettbewerb bestehen will und deswegen das Medium „Online“ für sich nutzen möchte. E-Commerce-Unternehmen beispielsweise verfolgen darum häufig eine Multisystem-Strategie: mit einer Responsive Website, einer mobilen Website und einer nativen App.

• Responsive Website: Eine responsive Website ermöglicht es, Web Content einheitlich anzuzeigen. Umgesetzt wird sie mit aktuellen Web-Standards wie HTML5, CSS3 Media-Queries oder etwa mit AngularJS, dem wohl populärsten Framework zum Erstellen von Single-Page-Anwendungen. Das flexible Layout sorgt für eine optimale, benutzerfreundliche Darstellung auf Desktop, Tablet oder Smartphone. Bei einer Responsive Website sind die Inhalte auf allen Wiedergabemedien meist identisch – es muss nur ein Kanal im zentralen Content Management System gepflegt werden.

• Mobile Website: Die mobile Website ist eine Variante der klassischen Website, die durch Design, Layout und Usability eine optimale User Experience auf mobilen Geräten wie Smartphones und Tablets garantieren will. Die kleinere Bildschirmauflösung bietet allerdings weniger Raum etwa für eine komplexe Menüführung oder großformatige Inhalte. Eine mobile Website wird parallel zur klassischen Webpräsenz ausgearbeitet, implementiert und administriert. Alle Elemente – sei es Content, Mediamaterial oder Funktionalitäten – sind entsprechend für die klassische Website und die mobile Website getrennt zu erstellen und zu administrieren.

• Mobile bzw. native App: Eine mobile App wird oft auch als native App bezeichnet. Der Hauptunterschied zur mobilen Website ist, dass eine native App erst auf das mobile Gerät heruntergeladen und installiert werden muss. Native Apps sind speziell für ein Betriebssystem (iOS, Android, Windows etc.) erstellt. Nur mithilfe solcher nativen Apps lassen sich spezielle Geräteeigenschaften wie z.B. Push-Nachrichten, die Kamera oder der Lagesensor in vollem Umfang nutzen. Sind die Anforderungen sehr komplex, grafisch anspruchsvoll oder performance-kritisch, führt an der Erstellung einer nativen App kein Weg vorbei.

• Responsive Retrofitting: Responsive Retrofitting beschreibt die – leider zu häufig angewendete – Strategie, die bestehende Desktop-Only-Webpräsenz einfach für kleinere Bildschirmauflösungen von mobilen Endgeräten anzupassen, um sie dort lesbarer zu gestalten. Oft wird dieser Ansatz auch als Desktop-First-Strategie bezeichnet. In vielen großen Unternehmen besteht genau diese Ausgangssituation: Bei ihnen ist eine schon lange existierende Webpräsenz mit viel Content im Einsatz – diese Webpräsenz völlig neu zu konzipieren und zu implementieren, wäre mit einem enormen Kosten- und Ressourcenaufwand verbunden. Oft wird in diesem Szenario darum die bestehende Website lediglich transformiert, um den verschiedenen User Touch Points eine optimale Darstellung zu bieten.

• Mobile First-Strategie: Während Responsive Retrofitting vom Desktop ausgeht und die mobile RWD-Lösung gleichsam nachreicht, beschreitet die Mobile First-Strategie den genau gegenläufigen Weg. Hier wird zuerst für mobile Geräte und erst im Anschluss für Desktop-Bildschirmgrößen entwickelt. Der Fokus von Mobile First liegt auf der Navigation, der Performance und den relevanten Inhalten. Da der Internetzugriff mit mobilen Geräten von der Ausnahme immer mehr zur Regel geworden ist, entscheiden sich gerade Unternehmen, die möglichst viele End User erreichen müssen, für eine Mobile First-Strategie. Dabei vermeiden Seiten, die von Anfang an sehr performant gestaltet sind, die klassischen Probleme des Responsive Designs. Nachteil von Mobile First ist, dass sich komplexe Webpräsenzen nur schlecht abbilden lassen und dieser Ansatz eine komplette Neuerstellung der Website verlangt – mit entsprechender Ressourcenbindung und Kosten.

• Content First-Strategie: Entwickler Alan J. Perlis wusste es schon vor über 30 Jahren: „It is better to have 100 functions operate on one data structure than 10 functions on 10 data structures.“ Anders gesagt: Im Zentrum sollten die Inhalte stehen – denn Anwendungen werden geschaffen, um Informationen zu liefern. Genau diesen Ansatz verfolgt die Content First-Strategie. Content First ist interdisziplinär und benötigt die Zusammenarbeit und das Wissen vieler Unternehmensbereiche wie Marketing, Product Management, Public Relations, aber auch das Zusammenspiel von Usability und Frontend-Design. Content First soll gewährleisten, dass ein User, ob unternehmensintern oder -extern, optimal durch die Website geführt wird, um zur richtigen Zeit die richtigen Informationen aufnehmen zu können. Dies lässt den RWD-Gedanken nicht außer Acht, stellt aber doch den Content und dessen Auffinden in den Vordergrund – geräteunabhängig. Der Content First-Ansatz findet sich oft bei unternehmensinternen oder content-intensiven Seiten, etwa bei Nachrichten- oder Presseseiten.

• 1. Fünf Tipps für Responsive Webdesign
     User greifen zunehmend mit Smartphone und Tablet-PC aufs Internet zu. Responsive Webdesign kann Homepage und Auftritt im Web dafür optimieren.
  2. Die Größe macht’s:
     Passen Sie die Schriftgröße an die Größe des kleineren Smartphone-Displays an.
  3. Mobil setzt auf Kontraste:
     Maße und Kontraste von Links und Buttons müssen bei mobilen Endgeräten deutlich größer sein. Zum einen wegen oftmals ungünstiger Lichtverhältnisse, zum anderen durch die Nutzung von Touchscreens.
  4. Abspecken:
     Bei mobilen Geräten und den aktuellen Übertragungsraten können einige Hundert Kilobyte für größere Bilddateien das Laden der Website erheblich verzögern. Experten raten daher zum sogenannten Adaptive-Images-Ansatz. Dabei werden mit Hilfe von PHP und Javascript automatisch verschiedene Bildgrößen für die verschiedenen Display-Größen erzeugt.
  5. Interface-Besonderheiten nutzen:
     Die verschiedenen Endgeräte haben unterschiedliche Interface-Eigenheiten. Deren Nutzung erlaubt dem User ein noch einfacheres Browsen, zum Beispiel wird Klicken am Desktop zu Swipen auf Tablet und Mobile, dafür sollten Telefonnummern auf dem Smartphone mit Call-on-Click-Funktion hinterlegt werden.
  6. Weiße Fläche:
     Je nach Display-Größe (Tablet vs. Smartphone) muss der Whitespace verkleinert oder vergrößert werden.

Anforderungen der Business Cases

Verschiedene Business Cases bringen unterschiedliche RWD-Anforderungen mit sich. Im Rahmen des Anforderungsmanagements dient ein Business Case dazu, die finanzielle und strategische Dimension eines Projekts zu betrachten. Alle Faktoren werden dabei zueinander in Beziehung gesetzt. So lässt sich gewährleisten, dass ein Business Case für ein Unternehmen wirtschaftlich und strategisch geeignet ist und auch zukünftige Anforderungen oder Innovationen abbilden kann. Die folgenden Business Cases sind branchenübergreifend.

• Multichannel Business Case: Der Multichannel Business Case ist ein Szenario, das in Unternehmen immer öfter anzutreffen ist. Solch ein Mehrkanal-Szenario gestaltet sich technisch und konzeptionell meist sehr komplex. Denn hier sind mehrere Strategien und Technologien gemeinsam anzutreffen, aus RWD-Sicht ist es also eine Multisystem-Strategie. Mit einer Multichannel-Strategie will ein Unternehmen seine bestehenden oder potenziellen User – ob im B2C- oder B2B-Bereich – auf mehreren verschiedenen Wegen erreichen können. Dabei geht es einerseits um den Leistungsfluss, also den Vertrieb bzw. die Distribution von Leistung, andererseits um den Informationsfluss, also um die Kommunikation mit den Usern oder Kunden. Bei einem klassischen Multichannel Business Case findet man verschiedene POS sowie stationäre Geschäfte. Es werden diverse Cross-Media-Funktionalitäten von Web über Mobil, E-Mail, Print und Social Media Channels genutzt. In diesem Szenario spielt Responsive Webdesign in Kombination mit einer Social Media-Integration eine große Rolle. Im Idealfall wird ein Multichannel Business Case mit einem leistungsfähigen Web Content Management System (WCMS) als zentralem Werkzeug gesteuert. Nur so ist es möglich, die verschiedenen Kanäle zu lenken, Mediamaterial bereitzustellen und User Generated Content zu managen. Dabei müssen Multichannel-Strategien nicht immer mit einem E-Commerce Business Case identisch sein. Auch McDonald‘s beispielsweise tritt mit seinen Kunden durch viele Online- und Offline-Kanäle in Verbindung – stationär, via Web oder mithilfe von nativen Apps.

• Multilanguage Business Case: Zu diesem Szenario, das in weltweit agierenden Unternehmen anzutreffen ist, gehört nicht allein Mehrsprachigkeit. Meist geht es um ein System, das neben diversen Sprachen vor allem auch länderspezifische Anforderungen zentral abbildet. Zu diesen Anforderungen können Währungen, rechtliche Vorgaben sowie das Administrieren weltweiter Berechtigungen und unterschiedlicher Workflows zählen. Zudem müssen verschiedene Mandanten (Standorte) ihren regionalen Usern und Kunden länderspezifischen Content bereitstellen können. Auch ein Managen unterschiedlicher Produkt- oder Dienstleistungsinformationen (Texte, Bilder, Online-Marketing-Einstellungen) gehört dazu. Die hohen technischen Anforderungen dieses Business Cases verlangen ein leistungsfähiges WCMS. Sehr oft wird in diesem Szenario eine Responsive Website-Strategie verfolgt. Denn will man beispielsweise native Apps mehrsprachig anbieten, ist dies wegen rechtlicher und grafischer Erfordernisse oft sehr aufwendig und kostenintensiv.

• Marketing Business Case: Der typische Marketing Business Case beschreibt eine große Unternehmenssite, die umfangreiche Dienstleitungen und Produktinformationen darstellt. Oft handelt es sich hier um Multi-Brand-Konzerne mit unterschiedlichen, getrennten Subwebseiten und völlig unabhängigen Webauftritten. Marketing ist das zentrale Element dieses Business Cases. So gibt es auch sehr hohe Anforderungen im Bereich Analytics. Die verschiedenen Social Media-Kanäle werden genutzt, viel User Generated Content generiert und generell eine große Menge an Content (Text und Media) verwaltet. Um User und Kunden optimal anzusprechen, ist in diesem Szenario oft eine Multisystem-Strategie im Einsatz, mit teilweise responsiven Webseiten, mobilen Webseiten und nativen Apps. Ein Beispiel für solch einen Marketing Business Case liefert die Metro Group mit ihren Vertriebsmarken Media Markt, Saturn, Real und Galeria Kaufhof.

• E-Commerce Business Case: Electronic Commerce (kurz: E-Commerce) beschreibt den Kauf und Verkauf von Waren und Dienstleistungen mithilfe des Internets. Viele E-Commerce-Unternehmen sind rein online aufgestellt und haben gar keine stationären Anlaufpunkte. Dies und der charakteristische Check-Out-Prozess in Form von Bestellung und Bezahlung als bindendes rechtliches Geschäft unterscheiden das E-Commerce- vom Multichannel-Szenario. Hier wird jede Art von geschäftlicher Transaktion (wie Verkauf oder Kauf von Waren und Dienstleistungen) und elektronischen Geschäftsprozessen (z.B. Werbung, After-Sales-Services, Onlinebanking) digital abgebildet und dem User bereitgestellt, ob im B2C- oder B2B-Kontext. Von den hier aufgezeigten Business Cases ist das E-Commerce-Szenario das komplexeste technologische Konstrukt. Dieses Szenario bewegt sich nicht nur sehr nah an den Trends, in vielen Fällen setzt es sie sogar. Zalando beispielsweise hat in der Vergangenheit viele technische Neuerungen etabliert und Maßstäbe gesetzt: bei Responsive Webdesign, Integration mobiler Endgeräte, nativen Apps und Social Media. Wegen der hohen Komplexität und dem Einsatz verschiedenster digitaler Kanäle ist im E-Commerce-Szenario ein leistungsfähiges, zentrales Content Management- und Digital Asset Management-System unumgänglich.

• Internal Business Case: Der Internal Business Case beschreibt ein rein internes oder auch Intranet-Szenario. Die Plattform ist dabei meist nur für interne und autorisierte Mitarbeiter zugänglich, nicht für externe User. Hohe Anforderungen an Sicherheitsstandards und an Freigabeprozesse für die konzernweiten, abteilungsübergreifenden Informationen machen ein solides, umfangreiches Content Management- und Administrations-System nötig. Hier zählen mobile Websites oder native Apps selten zu den Kanälen. Auch bei diesem Szenario ist das Thema RWD wichtig, um vor allem den extern erreichbaren Unternehmensbereich darstellen zu können.

Fazit: die Anforderungsmatrix

Anhand einer Standardmatrix lassen sich die zuvor dargestellten Responsive-Webdesig-Technologien und -Strategien sehr gut auf die beschriebenen Business Cases abbilden. Welcher Responsive Webdesign-Ansatz für ein spezifisches Unternehmen sinnvoll ist, hängt letztlich nur von einem Faktor ab: dem strategischen Business Case, den das Unternehmen mit RWD-Technologie unterstützen will.

Für jedes Unternehmen und jeden Business Case lässt sich schließlich ein Setup finden, das aus Sicht der IT-Architektur optimal ist. Und noch etwas machen die beschriebenen Business Cases deutlich: Mit einer einzelnen Responsive Webdesign-Technologie ist es selten getan. Will man seinen typischen Business Case unterstützen – ob Multichannel, E-Commerce, Marketing, Multilanguage oder Internal – braucht es praktisch immer eine Multisystem-Strategie, die Kombination von zwei oder mehr RWD-Ansätzen. (hal)