Responsive Webdesign ist eine Herausforderung. Und eine große Chance. Ein Interview, das erklärt, warum man nicht mehr daran vorbeikommt.
Ihr habt im ersten Interview-Part RWD als Methode beschrieben. Könnt ihr das näher erläutern?
Christian: Der Web Designer und Developer Ethan Marcotte hat das mal definiert und beschrieben, wie anpassungsfähige Webseiten entwickelt werden können. Demnach besteht RWD aus drei Komponenten. Zum einen wird ein flexibles Gridsystem zugrunde gelegt. Gridsysteme kennt man aus klassischen Printmedien, wie Magazinen oder Tageszeitungen. Ein Gridsystem ist im Grunde genommen nichts anderes als ein Rastersystem zur Strukturierung der Inhalte. Eine Seite wird in eine vorher definierte Anzahl an Spalten und Zwischenräumen unterteilt und die eigentlichen Inhaltselemente werden in den Spalten angeordnet. Flexible Gridsysteme passen sich dann der Displaygröße der Geräte an. Diese Anpassungsfähigkeit erfordert aber auch Medien, also Bilder, Videos usw., die sich dynamisch anpassen. Denn wenn diese Medien in den Spalten des Gridsystems angeordnet werden, und sich das Gridsystem der Displaygröße anpasst, muss das natürlich auch für die Medienelement der Seite gelten. Das ist der zweite Baustein. Der dritte Baustein ist dann eher technologische Natur, denn um die beiden zuvor genannten Bausteine umzusetzen müssen sogenannte Media Queries eingesetzt werden. Das ist eine Technologie, mit der es möglich ist, das Layout einer Seite in gewissem Maße an das Display des Endgeräts anzupassen. Man kann beispielsweise auf die Auflösung bzw. die Größe des Viewports oder auch auf die Orientierung (Hochformat, Querformat) der Geräte reagieren und die Seitenelemente dementsprechend umstrukturieren.
Marco: Diese drei Komponenten sind sehr flexibel, keine statischen Einheiten. Was wir früher gemacht haben, war das wir etwas konzipiert und gemalt haben, das immer eine feste Größe hatte. Wie bei einer Anzeige du hast Din A4 zur Verfügung und dann gestaltest du das in Din A4. Im digitalen Umfeld existieren aber keine festen Formate. Du kannst nicht mal mehr sagen, ob du ein Hoch- oder Querformat hast. Das bedeutet eine komplett andere Arbeitsweise für Designer und Konzepter. Die komplette Statik, die wir früher hatten ist verschwunden und ist einer totalen Flexibilität gewichen. Das wirkt sich auch auf den Content aus der Content-Wildwuchs des letzten Jahrzehnts muss strukturiertem, Device-unabhängigem Content weichen.
RWD bringt also nicht nur technologische Implikationen mit sich, sondern hat also auch weitreichende Auswirkung auf den Content?
Marco: Das ist eigentlich der erste ganz wichtige Punkt, wenn man ein RWD-Projekt angeht: Man muss eine funktionierende Content Strategie aufsetzen dir muss klar sein, was ist der Content, den ich kommunizieren möchte und was davon ist wirklich, wirklich wichtig und aus welchen Gründen. Das impliziert auf Unternehmensebene, dass ganz viele Stakeholder befragt werden müssen und der Content dann priorisiert werden muss. Gegebenenfalls muss auf dieser Basis ein Ansatz gefunden werden, der bestimmt, welcher Content auf welcher Ebene des Angebots zugänglich gemacht wird. Der zweite wichtige Punkt ist, dass Content in Device-unabhängiger Form vorliegen muss, da wir ja nicht wissen, wo er dargestellt wird und welche Attribute er enthält.
Christian: Es gibt dazu einen Bericht von Marc Boulton, der in England die Seite fürs CERN umgesetzt hat. Der hat beim ersten Meeting den Kunden gefragt „Was ist euer Content, den ihr transferieren wollt?“ und der hat darauf geantwortet „Eigentlich wollen wir allen Menschen sagen, dass die Welt anders funktioniert als wir je gedacht haben“. Das ist natürlich eine sehr schwierige Aufgabe. Boulton hat sich daraufhin mehrere Monate lang mit dem Thema Content Strategie auseinandergesetzt zusammen mit CERN um herauszufinden, welche die Dinge sind, die wirklich auf oberster Ebene kommuniziert werden müssen und welche vielleicht in einer tieferen Navigationsebene besser aufgehobenen sind, weil sich nur eine Handvoll Physiker weltweit dafür interessiert.
Man hierarchisiert also den Content, man sammelt ihn, pickt die Essentials raus, fängt dann an zu priorisieren und danach käme erst die Form?
Marco: Richtig. Design ohne Inhalt ist halt eher Kunst als tatsächliches Interaktionsdesign. Letzteres hat die Aufgabe, den Content zu transportieren. Die Form wird dann durch das jeweilige Device bestimmt.
Content first das ist dann ein wesentliches Unterscheidungskriterium, oder? Bei herkömmlichen Projektabläufen waren Konzept, Design und Development eher wasserfallartig hintereinander gesetzt.
Marco: Ja, bislang macht man beispielsweise sehr oft Designs mit Blindtexten oder mit Platzhalter-Bildern und das geht jetzt nicht mehr und war auch nie besonders schlau. Stell dir vor, der Designer packt an eine Stelle 200 Zeichen, weil er das ganz schick findet und irgendwann ist der Kunde mit dem Text fertig und liefert 70.000 Zeichen … deshalb sitzt in RWD Projekten im Idealfall gleich von Anfang an das ganze Team gemeinsam an einem Tisch.
Christian: Eine typische Vorgehensweise ist, dass Konzept, Design und Development sich zusammensetzen und erst mal einen Prototyp entwickeln, der quasi kein Design hat. Das kommt dann erst sukzessive mit der weiteren Ausgestaltung dazu.
Marco: Weil wir dann erst sehen, okay, so verhält sich das Ding jetzt auf den Geräten, also muss der Button oben hin und der muss etwas kleiner werden. Wir schneiden unsere Entscheidungen also immer auf den jeweiligen Nutzungskontext zu.
Christian: Ansonsten hast du ja auch das Problem, dass du diese verschiedenen Displaygrößen hast von sehr groß bis sehr klein. Und du müsstest im Design alle Größen, alle Zwischenstufen abbilden das kann der Designer erstens nicht in der ihm zur Verfügung stehenden Zeit leisten, zweitens ist das absolut unwirtschaftlich und in keinem Budget der Welt erlaubt.
Zusammengefasst: Wie würdet ihr in Bezug auf RWD-Projekte die Herausforderungen auf Agenturseite beschreiben?
Marco: Die Arbeitsprozesse ändern sich stark. RWD-Projekte entstehen im agilen Workflow, man sitzt in Teams, die aus allen beteiligten Gewerken bestehen zusammen, weil man ständig Entscheidungen treffen muss. Vorher war es meistens so, dass man eine Palette an Entscheidungen getroffen hat und diese dann weitergegeben hat. Das geht jetzt nicht mehr wegen der benötigten Flexibilität und der Varianz. Heute ist es so, dass man auf einmal feststellt, dass die Teasertextlänge, die vorher definiert wurde, gar nicht mehr passt und dann muss man ran und eine Entscheidung treffen. Und solche Entscheidungen trifft man im Stundentakt, wenn man am Prototyp sitzt. Hinzu kommt, dass sich die einzelnen Gewerke bereichsübergreifende Skills aneignen müssen. Beispielsweise muss ein Designer auch CSS-Stylesheets lesen und bearbeiten können und Konzepter müssen wissen, welche Funktionalitäten in welchen Browsern funktionieren und in welchen nicht.
Jetzt mal ketzerisch gefragt, bringt das nicht auch eine Try-and-Error-Mentalität mit sich, die ganz schön Aufwand produziert? Ein Texter kann ja nicht ständig 100 Texte oder mehr anfassen, um mal eben die Teasertexte zu überarbeiten …
Christian: Genau das ist jetzt besser als früher. Früher ist immer gleich die ganze Seite zersprungen, wenn der Text doch mal länger ausfiel, weil wir ja von festen Größen ausgegangen sind. Jetzt sind wir in allen Bereichen flexibel. Textlängen können zwar in verschiedenen Bereichen immer noch dazu führen, dass der Ansatz nicht mehr funktioniert, höchstwahrscheinlich ist es aber nicht so. Ein anderer Ansatz könnte es aber auch sein, für bestimmte Geräteklassen einzelne Textbausteine auszublenden, wenn der Text doch mal zu lang werden sollte. Am wichtigsten ist aber, dass alle Entscheidungen zugunsten des Nutzers getroffen werden und nicht deshalb, weil die eine oder andere Seite etwas durchsetzen will.
Vielen Dank für das Interview.