Responsive Webdesign und welches Potenzial hier immer noch verschenkt wird – Patrick Lobacher im Gespräch
Feb 28 2015

Responsive Webdesign und welches Potenzial hier immer noch verschenkt wird – Patrick Lobacher im Gespräch

Responsive Webdesign und welches Potenzial hier immer noch verschenkt wird – Patrick Lobacher im Gespräch

Smartphones, Tablets & Co. haben unsere Gewohnheiten, wie wir im Web surfen, radikal verändert. Immer mehr Endgeräte mit den unterschiedlichsten Display- und Browser-Formaten strömen auf den Markt - und stellen die Darstellungstechniken von Websites vor komplett neue Herausforderungen. Die Zeiten, in denen Websites mit statischen Inhalten für eine fixe Anzeige optimiert wurden, sind längst vorbei. Die Lösung: Responsive Webdesign. Doch was verbirgt sich eigentlich hinter dem viel gebrauchten Hype-Wort der letzten Jahre? Reine Technik oder doch eher ein Prozess?

Kein anderer dürfte es besser wissen als Patrick Lobacher. Der Geschäftsführer der +Pluswerk AG, einer der führenden Agenturnetzwerke Deutschlands, ist Autor zahlreicher Fachbücher zu dem Thema und erfahren im Management von Responsive Design-Projekten. anders und sehr (Internetagentur Stuttgart) hat den Experten um eine Einschätzung des Themas gebeten.

Patrick Lobacher

Herr Lobacher, vielen Dank, dass Sie sich Zeit für ein Gespräch genommen haben. Responsive Webdesign - ein geradezu schillernder Begriff. Was ist die Grundidee dahinter?

Die Grundidee dahinter ist, dass eine Website in allen möglichen Zugangsgeräten (Desktop, Tablet, Mobile, ...) eine hochwertige Benutzererfahrung (User Experience) bietet - heute und in der Zukunft. Dazu muss sich die Website dem Gerät und der Umgebung, in der das Gerät verwendet wird, anpassen - dies wird als „responsive“ bezeichnet. Dabei wird unter dem Begriff deutlich mehr verstanden, als die klassische Definition von Ethan Marcotte aus dem Jahr 2010.

Warum sollten Unternehmen heutzutage auf Responsive Webdesign setzen?

Einerseits ist nur so sichergestellt, dass ein Webangebot auf allen Zugangsgeräten optimal angesehen und genutzt werden kann. Andererseits sorgt ein Vorgehen gemäß Responsive Design für einen besseren Content, bessere Usability und letztlich auch bessere Performance (sofern die Umsetzung gut gemacht wurde). Die Conversion steigert sich erheblich und auch Google honoriert Responsive Webdesign -Auftritte mit einem höheren Ranking.

Was hat es mit dem Content-First-Prinzip auf sich?

Um einen Webauftritt optimal für alle Zugangsgeräte zu konzipieren, wird man schnell feststellen, dass man sinnvollerweise beim Kleinstmöglichen anfängt und sich dann langsam auf immer größere Geräte steigert. Dabei kann man - je nach Gerät und Geräteklasse - die Funktionalitäten und natürlich auch den Content selbst anreichern.

Man nennt dieses Vorgehen Progressive Enhancement. Geht man so vor, heißt der Startunkt auch Mobile First. Hier hat man wenig Platz, daher muss dem Content ein besonderes Augenmerk zugeteilt werden. Somit konzentriert man sich also am Anfang eines Responsive Webdesign-Prozesses immer auf Content First - also auf den Inhalt der kleinstmöglichen Geräteklasse.

Responsive Webdesign: Eine Mischung aus Strategie und Technik

Kann man Responsive Webdesign nicht auch später noch nachrüsten?

Nein, dies ist aus diversen Gründen nicht möglich, bzw. auch nicht sinnvoll. Natürlich kann man eine Website optimieren, sodass diese auf Tablets und Smartphones sichtbar und bedienbar ist - dies würde ich persönlich aber nicht als „responsive“ bezeichnen, sondern eben nur als „optimiert“.

So ist klassischer Content eben auf die Betrachtung auf einem Desktop angelegt - sowohl von der Informationstiefe, wie auch von der Informationsmenge her. Menüs (und andere Navigationselemente) werden meist inflationär verwendet, da „ja genug Platz ist“. Will man zudem auch die Performance optimal gestalten, muss auch der Quellcode schon initial mit dem Fokus darauf erstellt werden. 

Wie verändert sich der Workflow durch Responsive Webdesign?

Der Workflow muss sich grundsätzlich vom linearen Vorgehen zu einem iterativen, inkrementellen ändern. Früher hat man zuerst ein Design entwickelt und dies mit dem Kunden abgestimmt. Dann hat der Frontend-Entwickler dieses in HTML/CSS umgesetzt und getestet. Nach der Integration in ein CMS hat der Kunde begonnen den Content einzupflegen.

Dies funktioniert aufgrund der Gerätevielfalt und der sich daraus ergebenden Freiheitsgrade nicht mehr. Der Responsive Design -Workflow enthält daher folgende Schritte: Content Strategie, Content Wireframe, Content erstellen, Content Testing, Atomic Design, Linear Design, Prototyping, Device Testing. Dieser Workflow wird in kleinen Iterationen gegangen und anschließend für die nächsten Elemente erneut durchlaufen, bis das Ergebnis zufriedenstellend ist.

Workflow Responsive Webdesign

Welche technischen Mittel stehen aktuell zur Verfügung?

Grundsätzlich gibt es zahlreiche Hilfsmittel, um den Prozess bestmöglich zu begleiten. Angefangen von Tools zum Wireframing (wie Axure, Balsamiq), über Formate zur Content-Erstellung (wie Markdown, AsciiDoc, ...) und Tools zur automatischen Umwandlung HTML (Pandoc, Jekyll, Dexy, ...) gibt es Hilfsmittel zur Erstellung des Atomic Designs (Patternlab) und zum Testen. Weiterhin existieren vorgefertigte Frameworks, um ein Basis-Grid hinter Responsive Webdesign zu erstellen (Singularity, Foundation, Bootstrap, ...) und auch Anbieter wie Adobe haben die Zeichen der Zeit erkannt und mit Edge Reflow ein leistungsfähiges Tool für den Bereich Responsive Webdesign auf den Markt gebracht.

Ist Photoshop nicht mehr zeitgemäß für Responsive Webdesign-Projekte?

Photoshop und ähnliche Tools haben einen entscheidenden Nachteil - sie erstellen statische Layouts in einem Medium, welches nicht zur Betrachtung im Web vorgesehen ist. Früher war zumindest das Zielformat und das Format des Layouts nahezu identisch - so wurde lange Zeit auf 960 Pixel Breite gestaltet.

Heute hat man theoretisch alle Breiten zwischen 200 und 5000 Pixel zu bedienen - hierfür kann man nicht mehr ernsthaft designen. Zumal auch der Content selbst den Unterschied machen kann - beispielsweise hat eine reale Überschrift verschiedene Längen, sie ist ggf. sogar zweizeilig, wenn das Display nur klein genug ist. Dann muss entschieden werden, was mit dem Design genau an dieser Stelle passieren soll.

Dies ist durch statisches Design längst nicht mehr abbildbar. Daher geht man hier - aus Sicht des Designs - einen anderen Weg: Man erstellt ein atomares Design - also zuerst einzelne Elemente, Farben, Schriften und Grundelemente. Diese werden dann sofort im Zielformat - also HTML/CSS/JavaScript umgesetzt und getestet. Erst in diesem Zustand - auch Prototyping genannt - wird das Layout langsam immer kompletter und es funktioniert vor allem. Form follows Function ist hier wichtiger denn je.

„Heute hat man theoretisch alle Breiten zwischen 200 und 5000 Pixel zu bedienen“

Welche Testverfahren gibt es und wie werden sie praktisch umgesetzt?

Grundsätzlich sollte man auf richtigen Geräten testen, da diese oft Bugs besitzen, die man nicht simulieren kann. Da dies aber meist sehr aufwändig ist, kann man Tools wie Adobe Edge Inspect verwenden, welches es ermöglicht, dass die Website oder die Interaktion auf der Website automatisch an alle angeschlossenen Geräte gesendet wird. Somit hat man eine Vielzahl von Geräten im Überblick.

Ein weiteres Verfahren sind automatisierte Frontend-Tests über z.B. Selenium - hier werden bestimmte User Journeys (z.B. Menü ausklappen und Seite anwählen, Button klicken, Formular ausfüllen, ...) vordefiniert und dann bei jeder Veränderung des Quellcodes der Website automatisiert getestet. Sobald in einem der Geräte und/oder Browser eine Fehlermeldung aufgetreten ist, wird diese sofort gemeldet. Solche Testverfahren sind natürlich auch im laufenden Betrieb einer Website oder eines Webshops sinnvoll. 

Welche Auswirkung haben Responsive Webdesign-Projekte für die Gestaltung von Vertragsmodellen?

Die Vertragsgrundlage muss sich natürlich auch ändern, da in klassischen Verträgen oft als Referenz entweder ein Pflichtenheft und/oder ein Photoshop-Design herangezogen wird, damit das „Werk“ (Vertragvertrag) ordentlich spezifiziert wird. Dies kann im Responsive Webdesign natürlich nicht gemacht werden. Man muss also ein Vertragswerk finden, welches einerseits den iterativen/inkrementellen Weg abbilden kann und andererseits für beide Vertragspartner ein minimales Risiko festschreibt. Man verwendet hierfür den sogenannten Agilen Festpreis Vertrag und passt diesen entsprechend dem Projekt an.

„Responsive Webdesign als Begriff wird sicherlich in den nächsten Jahren verschwinden“

Wie viele Breakpoints sind sinnvoll?

Diese Frage kann man seriöser Weise nicht pauschal beantworten. Breakpoints werden immer dann sinnvoll, wenn man größere Änderungen am Layout vornehmen will - man also Content-Choreography durchführen will. Und dies ist immer dann sinnvoll, wenn es der Content verlangt. Der Content bestimmt also die Breakpoints und nichts anderes. Meist wird aber bei der Content-Anordnung auf bewährte Pattern (z.B. 3-Spalter, 2-Spalter) zurückgegriffen.

Daher kann man vage postulieren, dass es sehr wahrscheinlich zu mindesten 2 Breakpoints kommen wird, um große Screens, mittlere und kleine, voneinander zu unterscheiden. Es ist aber auch gut möglich, dass man nur mit einem Breakpoint auskommt oder sogar eine Trennung in Major- und Minor-Breakpoints vornimmt. Am Major-Breakpoint finden dann größere Veränderungen statt und am Minor-Breakpoint eventuell nur kleinere. In der Praxis betrachtet man den Content (der ja zuerst erstellt wird) auf einer kleinen Breite und vergrößert solange die Breite, bis man das Gefühl hat, dass man nun einen Breakpoint benötigt.

Wie ist abschließend gesehen Ihre Einschätzung: Responsive Webdesign nur ein Hype oder die Zukunft des Web?

Responsive Webdesign als Begriff wird sicherlich in den nächsten Jahren verschwinden - ähnlich wie Web 2.0 vor ein paar Jahren. Der Prozess und die Technik werden aber die Basis des zukünftigen Webs ausmachen. Die Gerätevielfalt nimmt zu und auch die möglichen Zugangspunkte zum Web. Hier bildet Responsive Design die Basis für eine höchstmögliche User Experience. Zurzeit werden bereits „neue“ Begriffe, wie „adaptive Webdesign“ als Weiterentwicklung von Responsive Webdesign gehandelt - dies drückt aber lediglich aus, dass natürlich auch Responsive Webdesign allumfassend gesehen werden sollte.

Herr Lobacher, wir danken Ihnen für das Gespräch!

Mehr Hintergründe zu Responsive Web Design hier:

anders und sehr ist eine Full-Service Internetagentur aus Stuttgart. Wir bieten Responsive Webdesign aus Überzeugung an und können die genannten Benefits nur bestätigen. Seit 15 Jahren konzipieren, programmieren, designen und vermarkten wir Websites, Online-Shops und Portale in TYPO3 und Magento - natürlich auch für das Mobile Web.

Sie wollen wissen, wie Responsive Webdesign in der Praxis umgesetzt wird? Dieses Projekt zeigt, wie es geht.