Warum klassisches Responsive Web Design (RWD) nicht das Maß aller Dinge ist!

Nach dem wir zuletzt die Methoden RWD und RESS kurz verglichen haben, vertiefen wir hier die Betrachtung vom klassischen Responsive Web Design. Mit dem Aufkommen einer neuen Generation von Endgeräten mit unterschiedlichsten Spezifikationen und Bildschirmgrößen hat sich Responsive Web Design als Standard bei der Umsetzung eines Webauftritts etabliert. Dennoch ist dieser Ansatz kein Allheilmittel und es gibt Anforderungen und Herausforderungen, welche mit Hilfe von klassischem Responsive Design nicht optimal gelöst werden können. Nachfolgend werden die jeweiligen Vor- und Nachteile des Ansatzes dargestellt und bewertet.

Vorteile RWD

Das RWD-Konzept bietet viele Vorteile gegenüber Einzelentwicklungen, oder „Sonderkanälen“ für dedizierte Endgeräte. Dies sind unter anderem die folgenden Punkte:

  • Es muss nur eine generische Content-Basis für alle Endgeräte erstellt werden
  • Kein Spezialkanal notwendig (t.example.com, m.example.com,…)
  • Einheitliche Inhalte und Prozesse für alle Endgeräte (z.B. synchroner Warenkorb)
  • Gebündelte Suchmaschinen-Optimierung (für eine URL)
  • Querverlinkungen sind möglich (Newsletter von PC, Tablet, Smartphone…)
  • Einmalige Entwicklung für alle Endgeräte
  • Eine zentrale Präsentationsschicht
  • Sparsame Anforderungen an die Serverlandschaft

Nachteile RWD

Bereits 2011 hat Luke Wroblewski die Nachteile von RWD dargestellt und gilt als „Mitbegründer“ des RESS Ansatzes (Responsive Web Design mit server-seitigen Komponenten). Die Nachteile stellen sich wie folgt dar:

Generell:

  • Es wird eine allgemeingültige Basis für alle Endgeräte vorgesehen – die Qualität der Anpassung ist nicht optimal.
  • Die Darstellung übernimmt das Endgerät, bzw. der Browser. Mittels unterschiedlicher Techniken muss dieser Client entscheiden, welche Inhalte wie angezeigt werden können.
  • Die Adaption kann und muss allein auf dem Client erfolgen.
  • Die Prozesse sind auf allen Endgeräten gleich – und werden ohne Anpassung aus dem Backend übernommen
  • Es werden immer alle Daten übertragen, unabhängig davon ob sie dargestellt werden können oder nicht.

Sichtweise Business:

  • Durch die einheitliche Content-Auslieferung für alle Endgeräte, werden mehr Daten übertragen als für das jeweilige Endgerät nötig sind. Aufgrund der längeren Übertragungszeiten und intensiveren Rechenleistungen verzögert sich die Darstellung auf dem Endgerät.
  • Funktionen werden auf allen Endgeräten gleich abgebildet (keine optimierte Version für das Endgerät des Anwenders, z. B. Touch Eingaben wie Slider o. ä.).
  • Wegen der schlechteren Performance sinkt erfahrungsgemäß die Akzeptanz beim Kunden – die Folge sind Abbrüche, oder eine rückläufige Entwicklung der Conversion Rate (potenzieller Umsatzverlust!)
  • Hohe Investitionen, wenn RWD unternehmensweit eingeführt werden soll. Prozesse müssen neu definiert und aufgesetzt werden. Die Konzeption über sämtliche Ausgabekanäle hinweg ist aufwändig, insbesondere die Harmonisierung der Backendlandschaft (CRM, CMS, ERP, etc.) stellt eine große Herausforderung dar.
  • Durch die steigende Anzahl von neuen Endgeräten, Browsern und Betriebssystemanbietern gestaltet sich die Pflege der RWD Lösung aufwändiger (erhöhte Maintenance).
  • Dadurch, dass immer die komplette Webseite an die anfragenden Endgeräte ausgeliefert wird, muss sichergestellt werden dass keine unerwünschten Nebeneffekte bei neuen Endgeräten auftreten.
  • Die Analyse, wo die Inkonsistenz auftritt und wie der Fehler behoben werden kann führt zu erhöhtem Entwicklungs- und Testaufwand.
  • Die Wartbarkeit der Webseite wird sukzessive erschwert, da der Code durch neue Adaptionsregeln immer komplexer wird.

Fazit

Nach Lesen des Artikels macht es den Anschein, dass das klassische Responsive Web Design ein Auslaufmodell sei, was jedoch so nicht stimmt. Vor allem für Blogs, kurzfristige Kampagnenseiten oder den Webauftritt für KMUs  ist dieses Konzept nach wie vor passend und zeitgemäß.

Größeren Konzernen sowie Unternehmen, welche über den Webauftritt Transaktionen abwickeln, könnte eine solche Umsetzung jedoch Schwierigkeiten bereiten.  Mangelhafte Anpassungen und schlechte Performance einer Webseite werden von E-Commerce-Kunden umgehend bestraft: Laut Kissmetrics verlassen 40 % aller Nutzer eine Webseite, die länger als drei Sekunden lädt. Jede Sekunde Verzögerung verringert die Conversion Rate eines Webshops um sieben Prozent. Infolgedessen führt dies natürlich auch zu einem Imageverlust des Unternehmens.

Des Weiteren sollte man vor der Umsetzung eines Webprojekts die Gesamtkosten betrachten und sich nicht von Initialkosten blenden lassen. Es stellt sich die Frage, welche Betriebskosten anfallen. Welche Kosten entstehen, wenn die Webseite an ein neues Smartphone oder ein Browser-Update angepasst werden muss? Welche Bugs und Anpassungen können inhouse gelöst werden und was muss manuell gemacht werden?

Wer für alle Geräte eine optimale Darstellung ohne Bugs anstrebt, braucht eine RESS-Lösung, um die Betriebskosten für diese Ansprüche niedrig zu halten.

Rapid Prototyping mit Sketch und Co

Effizient vom Wireframe zum interaktiven Prototypen

Warum prototyping?
Um Kunden plattformübergreifend an digitale Services zu binden, ist eine gute User Experience unverzichtbar. Da dabei bereits kleine Nutzer-Interaktionen entscheidend sind, sollten sie bereits ab Projektbeginn durch interaktive Prototypen getestet werden. So werden Businessziele und Nutzererwartungen zeitnah überprüft und mögliche Risiken vermieden.

Kunden schrecken jedoch oft vor den vermeintlich erheblichen Mehraufwänden zurück und verlassen sich ausschließlich auf die Expertenmeinung des UX-Designers. Bei der Produktentwicklung zusammen mit Dienstleistern ist dies ein Fehler. Nur die echte Nutzer-Interaktion liefert valide Daten und versetzt den UX-Designer in die Lage, Stolpersteine aus dem Weg zu räumen.

Warum rapid?
Mit den Start-Ups sind Software-Entwicklungsmethoden wie  “Lean Startup” oder ”Lean UX” entstanden. Idealerweise können in jeder Projektphase mit funktionalen Prototypen Ergebnisse präsentiert und überprüft, UX und Design effizient und zeitnah getestet, verbessert und weiterentwickelt werden.

Übliche Tools ermöglichen jedoch keine effiziente Arbeitsweise, sondern liefern in sich geschlossene Arbeitsergebnisse, welche fachübergreifenden Aufwand erzeugen. Der Konzepter erstellt Wireframes in seinem Lieblingstool und exportiert sie als PDF für den Visual Designer, der sie in Photoshop überträgt, erstellte Screens vermaßt und weitere, für Retina-optimierte Screens auch sehr große Dateien anlegt, um Grafiken für diverse Device-Klassen zu produzieren. Es vergeht wertvolle Zeit. Jede Änderung summiert die Aufwände.

 

Sketch als Mittel der Wahl
SketchApp
Sketch ist dem ersten Anschein nach nur ein vektorbasiertes Zeichenprogramm, näher betrachtet jedoch ein perfektes Tool für die effiziente Erstellung UND Gestaltung von Wireframes. Der Designer überträgt die Wireframes nicht erst in Photoshop, sondern gestaltet sie direkt in Sketch. Er setzt Symbole und Styles wiederkehrend ein und eine zentrale Änderung wirkt sich auf alle Instanzen aus. Iterative Konzeptänderungen erfordern keine Nachbearbeitung im Design, da Styles und Symbole für neue und geänderte Wireframes verfügbar sind.

Der Gestaltungsprozess ist weniger aufwändig und weniger fehleranfällig. Per Mirror-App lassen sich Screendesigns schon bei der Erstellung auf dem Device testen. Konzeption und Design arbeiten nicht mehr getrennt in ihren jeweils eigenen Programmwelten nebeneinander her oder gar aneinander vorbei. Im selben Programm hauchen sie dem Wireframe Branding und User Experience ein. Beim Responsive Web Design halten sogenannte Artboards für diverse Device-Klassen die Dateigröße schlank. Auch die Zusammenarbeit mit den Entwicklern ist integriert, da Sketch auf einen Klick sämtliche Grafiken in den für diverse Device-Klassen erforderlichen Auflösungen exportiert, auch mit CSS-Eigenschaften.

Für Interessierte gibt es hier eine umfangreiche Linksammlung.

 

Wie entsteht aus Sketch ein Prototyp?

 + Sketch Plugins
Interaktive Prototypen lassen sich per Sketch-Plugins realisieren. Zu empfehlen, wenn ein Team auf ein Produkt und dessen Optimierung fokussiert ist. Für Dienstleister macht das nicht wirklich Sinn. Wer seinen eigenen Workflow abbilden will, erzeugt mit der Weiterentwicklung eines Plug-Ins unverhältnismäßige Aufwände.
Mehr zum Thema Plugin-Entwicklung ist hier nachzulesen.

 

++ FramerJS (http://framerjs.com/)
framer

Die JavaScript Bibliothek FramerJS ermöglicht den Import von offenen Sketch-Dateien. JavaScript-Kenntnisse vorrausgesetzt, lassen sich schnell Interaktionen oder Animationen erstellen. Design-Änderungen in Sketch werden sofort im Prototypen sichtbar.

Meines Erachtens ist Framer das mächtigste Tool im Zusammenspiel mit Sketch, welches jede Möglichkeit der Interaktivierung von Nutzerinteraktionen bietet.

 

+++ inVision (http://www.invisionapp.com/)
invision


Einen intuitiven Zugang bietet im Zusammenspiel mit Sketch die Web-App inVision. Mit der SaaS-Lösung kann man schnell und ohne eine Scriptsprache zu erlernen, hochgeladene Dateien per Drag and Drop in interaktive Prototypen verwandeln. Interaktionen und Animationen sind allerdings eingeschränkt, werden aber sukzessive vom Hersteller erweitert.

Seit kurzem lassen sich offene Sketch-Dateien importieren, was wiederum für den Einsatz von Sketch innerhalb des UX-Design Prozesses spricht. Stakeholder, Projektteam oder Probanden können den Prototypen diskutieren oder testen. Chat- und Kommentar-Funktionen machen es zu einem effizienten Feedback-Instrument.

 

Fazit
Sketch ist für Konzepter, Visual- und Interaction Designer ein sehr effizientes Tool für die Erstellung von Wireframes und User Interfaces.

Im Vergleich zu gängigen Tools der Grafikproduktion wie Photoshop und Co,vermissen “eingefleischte” Profis sicherlich Funktionen.
Die Sketch-Entwickler-Community verfolgt aber einen m.E. sehr innovativen Ansatz und hält die Programm-Features bewusst schlank, so dass das Tool perfekt zugeschnitten für die Produktion von Wireframes und User Interfaces daher kommt und schnell erlernbar ist.

Auf der Prozessebene ist Sketch eine wirkliche Innovation. Das Anwenden fachlich übergreifender Workflows, bis hin zur Zusammenarbeit mit Frontend-Entwicklern, ermöglicht ein integrierteres Arbeiten zwischen allen Beteiligten und erzeugt im Projekt-Team weniger Reibungsverluste in der Kommunikation.

Wer als Kreativer nicht vor JavaScript zurück schreckt, sollte sich unbedingt mit FramerJS vertraut machen. Jede Art der Nutzerinteraktion (Micro-Interactions) lässt sich hiermit am Besten realisieren und testen.

Für schnelle Produkt-Präsentationen und Feedback-Schleifen ist Sketch in Kombination mit inVision das Mittel der Wahl, allerdings mit – gerade im Zusammenhang von Rapid Prototyping.

 

Software-Update: Sevenval FIT mit neuen Performance Features

Unser aktueller Release Sevenval FIT 14.0.2 enthält eine große Anzahl von Features, Verbesserungen und Fixes, die ihr im Changelog nachlesen könnt.
Besonders zu erwähnen sind die Verbesserungen an der AC Stage: Neben dem neuen fallback effect swap bei nicht vorhandenem slide, unterstützt die Stage nun autosize und funktioniert im OSS Browser.
Des Weiteren haben wir ein neues Performance Feature: Automatisches JavaScript und CSS Inlining, welches sich ganz einfach über die config.xml einschalten lässt. Darüber hinaus haben wir den Delivery Context um request properties wie frontend-url, host und port sowie pointer events und einen allgemeinen CSS prefix erweitert.