Responsives Design für eine komplexe Corporate Website

Bei unserem letzten Website-Relaunch vor fünf Jahren war die Welt noch einfach, Smartphones und Tablets spielten keine Rolle. Heute ist die Web-Welt komplizierter – aber zum Glück gibt es auch neue flexible Lösungen …

Wie bereits berichtet, arbeiten wir zurzeit am nächsten Relaunch der DATEV-Website. Die wichtigste Herausforderung im Jahr 2013 ist dabei aus unserer Sicht: Wie bekommen wir die täglich wachsende Zahl an unterschiedlichen Endgeräten in den Griff, mit denen unsere Website aufgerufen wird?

Die gute alte Zeit: 1024 x 768

Beim letzten Relaunch vor fünf Jahren war das noch kein Problem. Der Auftritt wurde für eine Bildschirm-Auflösung von 1024 mal 768 Pixeln optimiert, eine mobile Variante gab es nicht. Die führten wir – angesichts des rasanten Wachstums bei Smartphones –  dann vor zwei Jahren in Form von m.datev.de ein, da wir Smartphone-Nutzern nicht mehr zumuten wollten, sich auf dem kleinen Bildschirm durch die große Website zu frickeln. Unsere Webstatistik zeigt, dass die Entscheidung richtig war, wir haben jährliche Wachstumsraten bei den mobilen Zugriffen im dreistelligen Prozentbereich.

Heute gibt es also im Prinzip zwei Varianten der DATEV-Website, die mittels Browser-Weiche jeweils passend ausgeliefert werden. Doch ist diese Lösung auch in Zukunft tragfähig? Wir glauben nicht, denn:

  • Es gibt zwar nur eine Inhalts-Quelle für die mobile und stationäre datev.de, die beiden Varianten wandeln in Sachen Design, Benutzerführung und Technik aber auf unterschiedlichen Pfaden. Jede Änderung bedeutet daher Doppelaufwand, von der Konzeption über die Entwicklung bis zur Qualitätssicherung.
  • Zwei Varianten sind heute zu wenig. Die Welt (mobiler) Endgeräte wird zunehmend unübersichtlich, Smartphones und Tablets gibt es inzwischen in unzähligen (Zwischen-)Größen. Eine Browserweiche, die zwischen „groß“ und „klein“ unterscheidet, wird diesen Anforderungen nicht mehr gerecht.

Responsives Webdesign = Lösung aus einem Guss

Responsive Landingpage von DATEV
Responsive Landingpage von DATEV

Die bessere Lösung heißt Responsives Webdesign, bei dem sich die Website „automatisch“ an die Bildschirmgröße bzw. -auflösung des (mobilen) Endgeräts anpasst. Die Website reagiert sozusagen auf das Display, auf dem sie dargestellt werden soll, indem sie Design, Struktur und Funktionen jeweils endgerätespezifisch verändert.

Dass das bei kleinen Websites, Landing Pages und  einfachen Systemen wie zum Beispiel Blogs (wie diesem hier) gut funktioniert, ist inzwischen common sense und wurde auch bei DATEV schon erfolgreich praktiziert. Wir sind allerdings davon überzeugt, dass auch eine komplexe Corporate Website mit nahezu 10.000 Inhalten und einer verschachtelten Struktur responsiv gedacht und gebaut werden kann – und vielleicht sogar muss.

Die Vorteile liegen dabei auf der Hand: Es gibt nur eine Website statt vieler Derivate für unterschiedliche Endgeräte, ein Konzept, ein Design, das von vornherein alle Varianten berücksichtigt hat und entsprechend homogen ist, und eine Technologie. Kurz: Es gibt eine Lösung aus einem Guss.

Responsiv heißt: hoher Aufwand in der Konzeptphase

Der Aufwand, um diese Lösung zu erreichen, ist allerdings hoch, insbesondere in der Konzeptphase. Egal, was man tut: Man tut es auf mehreren Ebenen. Neben einem Grund-Design gibt es Design-Spezifika für verschiedene Endgeräte-Typen. Es gibt mehr als ein Navigations-Konzept. Die Informationsarchitektur bestimmter Seiten wie etwa der Startseite muss für jeden Endgerätetyp neu gedacht werden. An allen Ecken und Enden muss man umdenken, was man schon an Kleinigkeiten wie der Benennung einzelner Seitenelemente merkt: Bislang haben wir zum Beispiel von der „rechten Spalte“ auf unserer Website geredet. Künftig ist die „rechte Spalte“ einer Desktop-Darstellung vielleicht ein Block am Seitenende auf Tablets und gar nicht vorhanden auf Smartphones.

Den höheren Aufwand merkt man auch bei der evidenzbasierten, intersubjektiven Überprüfung des Konzepts, die wir in drei Benutzerlabor-Iterationen vorgenommen haben, über die ich bereits berichtet habe.

Nutzer-Erwartung und Responsives Design

Mobile Navigation im Benutzerlabor
Was erwarten Nutzer von einer mobilen Seite? Wir hatten mehrere Varianten im Benutzerlabor …

Doch es lohnt sich, diesen Aufwand zu betreiben, gerade die Erkenntnisse im Benutzerlabor waren und sind äußerst hilfreich. Auch hier ein Beispiel: Erwarten die Nutzer, auf einem Smartphone andere Website-Inhalte zu lesen als auf einem großen Bildschirm am Schreibtisch? Da waren wir uns nicht sicher. Klare Antwort aus dem Labor: Nein! Die Nutzer wollen mobil dieselben Informationen erhalten wie am Desktop-PC – aber unterschiedlich aufbereitet. Was am großen Bildschirm sofort lesbar sein soll, soll am kleinen Display erst per Klick ausgeklappt werden.

Auch die Nutzung etwa eines Shop-Bereichs unterscheidet sich stark je nach Endgerät: Kaum ein Proband möchte unsere komplexen Produkte auf einem Smartphone kaufen können – hier steht die Information im Vordergrund. Auch das lässt sich responsiv wunderbar lösen, da die Elemente pro Endgerät unterschiedlich angeordnet werden können – ein Kaufen-Button muss etwa auf einem Smartphone weniger prominent sein als in der Desktop-Version.

Der Aufwand lohnt!

Entscheidet man sich für einen responsiven Ansatz auch bei einer komplexen Corporate Website, wird man nach getaner Arbeit vielfältig profitieren, davon bin ich überzeugt. Natürlich werden Pflege, Wartung und Weiterentwicklung vereinfacht, das liegt auf der Hand.

Es gibt aber auch positive „Nebeneffekte“ – auch hier nur ein Beispiel: Responsive Website-Inhalte lassen sich perfekt in Apps einbauen. Was man bislang sehr aufwändig pro Plattform nativ programmieren musste, kann man nun relativ einfach hybrid verwenden: Eine schlanke native Rahmen-App bindet ausgewählte responsive Web-Inhalte ein. Das reduziert den Aufwand der App-Entwicklung erheblich und führt die häufig getrennten Welten Web und App im Unternehmen näher zusammen.

Mehr lesen

Dieser Beitrag ist der dritte Teil einer kleinen Artikel-Serie, die ich im Zusammenhang mit unserem Website-Relaunch geschrieben habe. Weitere Beiträge waren:

8 Gedanken zu “Responsives Design für eine komplexe Corporate Website

  1. Hi Christian,

    zunächst einmal vielen Dank für den Artikel!

    Ich beschäftige mich zurzeit ebenfalls mit dem Responsive Design und seinen Herausforderungen. Der Aufwand in der Konzeptphase ist in der Tat deutlich höher als bei der Optimierung einer standardmäßigen Website auf nur eine Auflösung.

    Wenn ich das richtig gesehen habe, dann ist der Relaunch der Datev Seite aber noch nicht vollzogen, oder? Ich wollte mir das Ergebnis mal anschauen in unterschiedlichen Auflösungen, aber die Seite, die ich dort finde, ist momentan noch nicht auf alle Endgeräte ausgerichtet, oder? Sieht auf jeden Fall noch nicht ganz optimal aus :-/

    Siehe:
    http://www.responsive-design-test.de/?url=www.datev.de

    Eine Möglichkeit zur Vorschau (außer in den von Dir gezeigten Screenshots) gibt es wohl noch nicht. Außerdem würde mich interessieren, auf welche Frameworks ihr bei der Erstellung zurück greift.

    Ich hoffe, dass die Seite vielleicht in Kürze online geht. So viele wirklich gut umgestzte Websites im Responsive Design habe ich bisher noch nicht gesehen.

    Würde mich über ein kurzes Feedback freuen!

    Vielen Dank und Grüße,
    Martin

    Gefällt mir

      • Hi Christian,
        super, vielen Dank. Habe ich mir mal direkt im Kalender notiert ;-) Bin gespannt, wie die neue Seite aussieht!
        Viele Grüße,
        Martin

        Gefällt mir

    • Hallo Martin,
      ich möchte kurz auf die Frage der Frameworks eingehen. So ein klassisches Framework/Toolkit kam nicht zum Einsatz, wir haben mit „echtem“ HTML/CSS/JavaScript gearbeitet, hierbei hat sich bewährt sich in der Optimierung für den Prototypen auf aktuelle Webkit-Browser (Chrome, Safari) zu beschränken, das spart viel Optimierungsarbeit, da diese Browser (fast) alle CSS3 und HTML5-Attribute unterstützen. Und: Die selben Browser-Engines laufen auf iOS/Android-Tablets und -Smartphones.
      Vom Grundgerüst haben wir ein HTML5-Template erstellt und das Stylesheet via SCSS und Compass-App erstellt. SCSS bietet den Vorteil, dass man wesentlich übersichtlicheres CSS schreiben kann und die für responsives Design essentiellen Media-Queries (http://www.w3.org/TR/css3-mediaqueries/) sehr hübsch und übersichtlich integrieren kann. Zudem kann man da mit Variablen arbeiten, so dass man z.B. den Radius für die abgerundeten Ecken zentral verändern kann (gleiches gilt natürlich auch für Farben, Schriftgrößen, Zeilenabstände, etc.).
      Schön ist auch, dass man per CSS3 einfache Animationen (wie Ein- oder Ausfahren) direkt im (S)CSS programmieren kann, so dass man sich mühsame JavaScript-Animationen sparen kann.
      Für die Navigation und die Speicherung der Berufsgruppe über Seiten hinweg kam ein einfaches selbst gestricktes JavaScript zur Verfügung, wir haben hier als JavaScript-Framework jQuery eingesetzt, da es sehr einfachen Zugriff auf das DOM bietet und per Erweiterungen z.B. auch Wischgesten, Tapevents, etc. für die Touch-Devices unterstützt.

      Ich hoffe das war jetzt nicht zu technisch, bei Nachfragen gerne noch mal posten.
      Viele Grüße
      Gert

      Gefällt mir

  2. Hi Gert,
    vielen Dank für die ausführliche Antwort und die ganzen technischen Hintergründe! Weitere Fragen habe ich nicht :-)
    Viele Grüße,
    Martin

    Gefällt mir

  3. Eins ist mal Fakt – Google ist Fan von responsive Designs (allen Geräten mobil oder Desktop) soll der GLEICHE Html Code zur Verfügung stehen um keine Rankingeinbußen zu spüren zu bekommen.
    Laut Matt Cutts rollt dieses Update in kürze aus, es ist fertig und genehmigt. Demnach ist jeder Artikel über responsive Design lesenswert und wichtig

    Gefällt mir

Und jetzt sag deine Meinung:

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s