RESS Server Architektur: Das bessere Responsive Web Design!

Nachdem wir uns in den ersten beiden Teilen dieser Kleinserie zuerst den Definitionen hinsichtlich der Ansätze RWD und RESS sowie den Vor- und Nachteilen des RWD-Konzepts gewidmet haben, folgt nun der dritte Teil, welcher die Stärken und Schwächen einer RESS Server Architektur näher vorstellt.

Die Weiterentwicklung einer RWD Architektur zu einer RESS Server Solution stellt aus diversen Gesichtspunkten einen enormen Mehrwert dar. Maßgeblich sind hier die folgenden Vorteile zu nennen:

Vorteile RESS

Allgemein:

  • Nutzung einer Device Database zur Device- und Feature Detection – optimale Ausgabe für das Endgerät
  • Einfaches Update der Device Database um neue Endgeräte, Browser und Betriebssysteme hinzuzufügen
  • Verringertes Datenvolumen – es wird nur der benötigte Inhalt ausgeliefert
  • Serverseitige Bildkompression und –transformation (z.B. in andere Bildformate)
  • Hohe Performance – durch serverseitige Verarbeitung und entsprechende Caching-Mechanismen
  • Seitenladeverhalten wird positiv beeinflusst durch:
    • Optimale CSS und Images
    • JavaScript Minimierung
    • Reduzierung von http-Requests
    • Reduzierung der Bytes der Webseite (GZIP)

Sichtweise Business:

  • Neue Endgeräte können leichter integriert werden, somit schnellere Marktdurchdringung und bessere Time-to-Market.
  • Saubere Trennung zwischen Front- und Backend, dadurch entkoppelte Entwicklung und Maintenance möglich
    • In der Konsequenz können dadurch aus Business-Sicht Anforderungen schneller im Frontend an die Nutzer ausgerollt werden.
    • Dadurch entsteht eine höhere Innovationsperformance
  • Serverseitige Integration von weiteren Komponenten möglich – wie z.B. A/B Testing Module, Analytics etc.

Optimales Setup für die Analyse von Kennzahlen und Ableitung von geeigneten Maßnahmen zur Steigerung der Conversion Rate.

Nachteile RESS

Eine RESS Server Architektur bedeutet für den Kunden in der Regel ein höheres initiales Investment. Um eine möglichst optimale RESS Architektur erfolgreich zu realisieren, müssen weitere Technologien betrachtet und evaluiert werden, um z.B. das Seitenladeverhalten zu beschleunigen, als auch die Skalierung und Komprimierung von Grafiken performant abbilden zu können.

Ergänzend zum RWD Konzept müssen die serverseitigen Komponenten selbst entwickelt werden oder durch bestehende Technologien am Markt abgedeckt werden. In beiden Szenarien muss sich der Kunde mit diesen Themen auseinandersetzen – unabhängig davon ob er bestehende Lösungen einkauft oder ggf. selbst entwickelt:

  • Erweiterung der Serverkomponente – mehr Intelligenz im Backend bedingt auch eine entsprechende Infrastruktur
  • Definition der serverseitigen Prozesse
  • Evaluierung von Technologien um z.B. Grafiken zu verarbeiten, JavaScripts zu minimieren, oder Seitenladeevents zu beeinflussen etc.
  • Know-how-Aufbau im Entwicklungsteam
  • Kostenbetrachtung im Hinblick auf die Wartung und den Support der eingesetzten Technologien
  • Kosten hinsichtlich der Anschaffung und Pflege einer Device Database

Fazit

Zusammenfassend lässt sich nun sagen, dass durch die beschriebenen Vorteile der RESS Server Architektur im Vergleich zu einem klassischen RWD-Ansatz besser auf neue Anforderungen und Nutzererwartungen eingegangen werden kann. Darüber hinaus ist ein positiver Effekt auf die Maintenance-Aufwände zu erwarten.

Dies kommt den Business-Zielen zugute, da die Nutzerzufriedenheit höher ist, was sich wiederum in der Conversion Rate (CVR) niederschlägt. Der Return on Invest ist hierdurch früher erreicht und die time-to-market für neue bzw. verbesserte Features verkürzt sich durch eine klare Trennung von Frontend- und Backend-Prozessen bzw. deren Logik. Ebenso sind der Betrieb und Wartung deutlich besser kalkulierbar. Anpassungen für neue Geräte und Browser fallen weniger aufwändig aus und sind damit deutlich schneller produktiv ausgerollt. Es entstehen keine, bzw. nur minimale Verzögerungen um neue Endgeräte zu bedienen. Die Total Cost of Ownership sind verglichen mit einem RWD-Ansatz günstiger und mit steigenden Erfahrungswerten langfristig planbar.

Und last but not least: Die Nutzer sind zufriedener und fühlen sich und ihre Erwartungen besser berücksichtigt. Dies wirkt sich positiv auf die Nutzungszahlen, als auch die Conversion Rate aus. Daher sollten die Erwartungen und der mögliche Impact vor einer Technologieauswahl analysiert und unter den vorgestellten Gesichtspunkten bewertet werden.

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.

Den Browser entlasten: Responsive Web Design mit serverseitigen Komponenten (RESS)

Responsive Web Design (RWD) – endlich in den Unternehmen angekommen und als Begriff etabliert ist die Technologie auch schon wieder überholt. RESS ist das neue Schlagwort mit dem man sich auseinandersetzen muss, will man seine Webseite nutzerfreundlich über alle verschiedenen Kanäle ausspielen. RESS, genauer gesagt Responsive Web design with server side components – was ist das? Was sind die Vorteile sowie die etwaigen Nachteile? Diese Fragen wollen wir in einer kleinen Serie von Blogeinträgen beantworten, indem der vergleichsweise junge Ansatz RESS mit dem klassischen RWD verglichen wird.

Im ersten Schritt möchten wir die beiden Konzepte definieren und die jeweilige Architektur dahinter vorstellen:

Definition Responsive Web Design (RWD)

Responsive Web Design bezeichnet ein Konzept, bzw. Vorgehensmodell, das die Ansätze wie liquid Design, Adaptive Images und Media Queries kombiniert, um abhängig vom Endgerät bzw. Browser die Darstellung der Webseite anzupassen.

Ziel ist es, eine Web-Ausgabe für alle Endgeräte zu realisieren. Die Web-Ausgabe wird dabei möglichst generisch gehalten – das heißt, dass es keine unterschiedlichen Prozesse auf den Endgeräten gibt und diese immer den vollen Inhaltsumfang erhalten. Der Browser des Endgeräts ermittelt und entscheidet „eigenständig“ welche Inhalte dargestellt werden. Diese werden via HTML5, Media Queries, JavaScript und CSS3 auf dem Client verarbeitet.

Architekturüberblick:

Bei der klassischen RWD Architektur wird aus den Backendsystemen ein einheitliches Frontend erzeugt, welches als Datenpaket einheitlich an die Endgeräte ausgeliefert wird. Es wird vollständig übertragen und auf dem Endgerät „ausgepackt“ und verarbeitet. Bei einer generischen Ausgabe werden die Prozesse aus dem Backend übernommen und endgeräteübergreifend dargestellt. Eine Adaption kann nur auf dem Endgerät erfolgen und setzt somit eine umfangreiche Applikationslogik im Frontend voraus. Hieraus ergeben sich Abhängigkeiten, die sich auf die Performance und Stabilität negativ auswirken.

Definition Responsive Web Design + server side components (RESS)

Bei RESS handelt es sich um eine Weiterentwicklung des klassischen RWD-Konzeptes hin zu einer RWD-Lösung mit serverseitigen Komponenten. Hier werden bestimmte Prozesse vom Server übernommen und damit der Browser entlastet, dazu gehören eine Clienterkennung, Aufbereitung und Modifikation von Bildern und die Anpassung der Inhalte. Durch diese serverseitigen Komponenten wird eine Client-Server-Kommunikation abgebildet, welche die spezifischen Eigenschaften des Endgeräts mit Hilfe einer Device Database ermittelt und mit dem Server austauscht. Somit ist der Server in der Lage die angefragten Inhalte endgerätespezifisch auszuliefern. Frontend- und Backendprozesse können sauber gekapselt werden – wodurch eine kontextabhängige Auslieferung an das Endgerät ermöglicht wird.

Bei der RESS Architektur wird in der Regel ein Progressive Enhancement Ansatz gewählt, um eine Basisversion für alle Endgeräte zu definieren. Aufbauend auf dieser Version wird mittels der Device und Feature Detection der Delivery Context ermittelt. Der Delivery Context setzt sich aus den folgenden Parametern zusammen: Hardwarehersteller, Betriebssystem und Browser inkl. der entsprechenden Version. Ausgehend vom jeweiligen Delivery Context kann der Server alle Features für das Endgerät unterstützen.

RESS_Chart_IllustrationB

Architekturüberblick:

Bei der RESS Architektur wird mittels der Device Database der Delivery Context aufgebaut, um Inhalte möglichst optimal für das jeweilige Endgerät aufzubereiten und auszuliefern. Durch die exakte Kenntnis der Eigenschaften des jeweiligen Clients werden nur die Elemente ausgeliefert, die vom Gerät dargestellt werden können. Dazu gehören zum Beispiel Bilder, die bereits auf dem Server passend skaliert wurden.

Damit wird nicht nur die Anzahl der übertragenen Daten deutlich reduziert sondern auch die Performance signifikant erhöht. Zudem müssen auf dem Gerät keine aufwendigen Prozesse gestartet werden – die rechenintensiven Operationen erfolgen ausschließlich auf dem Server. Dies führt zu einer schnelleren Übertragung, weniger Rechenleistung auf dem Endgerät und somit auch zu einem niedrigeren Stromverbrauch.

Studie: Reisebranche ist für die mobile Kundschaft schlecht gerüstet

Der vollständige Report zur Studie inklusive Handlungsempfehlungen kann unter travelstudie@sevenval.com bestellt werden.

  • Unzureichende Usability: Von zwölf untersuchten Reiseanbietern erreicht keiner die Gesamtwertung „gut“
  • Testsieger TUI erlangt in vier von sechs Untersuchungsfeldern eine gute Bewertung
  • Die kürzeste Ladezeit fällt bei Expedia an, der Zweitplatzierte im Performance-Test, Check24, findet jedoch die bessere Balance zwischen Informationsangebot und Performance
  • Die Reiseanbieter verpassen bisher die Chance sich als digitaler, mobiler Reisebegleiter über die Buchung hinaus zu empfehlen

Die Reisebranche gehört zu den Pionieren des E-Commerce, auf den wachsenden mobile Commerce via Smartphone ist sie aber nur unzureichend vorbereitet. Unser Team von Sevenval Consulting untersuchte in Zusammenarbeit mit der Agentur Anstrengungslos die Usability und Performance der mobilen Internetangebote von zwölf deutschen Reiseanbietern.

Dabei erreichte bei der Untersuchung der Usability keiner die Gesamtwertung „gut“. Der Testsieger TUI verpasste diese Bewertung jedoch nur knapp mit einer guten Bewertung in vier von sechs Untersuchungsfeldern.

Die ersten Usability Probleme entstehen schon bei der Google Suche. Diese wurde im Testverfahren mit den Suchwörtern „last minute“ durchgeführt.

Gesamtwertung Usability

Gesamtwertung der Usability von Reiseportalen für mobile Geräte

Viele Anbieter befolgen noch nicht die Google Richtlinien, die mit der Initiative „mobile friendly“ bekannt wurden und müssen bei der Einführung des nächsten Google Algorithmus ein schlechteres Ranking befürchten.

Mangelhaftes Filter- und Listendesign erschwert die Auswahl von Angeboten
Im weiteren Verlauf der im Testverfahren durchgeführten Urlaubsrecherche fiel vor allem mangelhaftes Filter- und Listendesign auf. Sortierfunktionen sind im Vergleich zu Desktop-Webseiten eingeschränkt oder gar nicht vorhanden. Die Navigation wird oft durch langes Scrollen erschwert. Wichtige Informationen wie Kundenbewertungen fehlen oder werden für Smartphones ungünstig dargestellt. Immerhin sieben Anbieter haben hier problematisch abgeschnitten.

Erhebliche Probleme im Buchungsprozess
5 von 12 untersuchten Anbietern wiesen erhebliche Usability-Mängel im Buchungsprozess auf. Fehlende mobile Optimierung der Eingabeelemente, unzureichende bis rudimentäre Behandlung von Eingabefehlern und gegenüber dem Desktop fehlende Zusatzangebote wie Versicherungen und Mietwagen waren einige der häufigsten Probleme. Am besten abgeschnitten hat hier HolidayCheck mit einem größtenteils vorbildlichen Buchungsprozess.

Cross-Device-Nutzung wird noch kaum unterstützt
Die Zahl der Nutzer, die mehrere Endgeräte im Einsatz haben, steigt stetig. Bei alltäglichen Aktionen wie Online Shopping wechseln laut einer Google Studie 90% dieser Nutzer ganz selbstverständlich zwischen verschiedenen Geräten wie z. B. Smartphone, Desktop-Rechner und Notebook hin und her. Nur fünf von zwölf untersuchten Reiseportalen können dieses Verhalten bisher unterstützen, davon drei mit gravierenden Mängeln.

Performance – im Durschnitt zwei Sekunden langsamer als die Online-Händler
Im Branchendurchschnitt wartet ein Smartphone-Nutzer mit einer UMTS-Verbindung 8,8 Sekunden bis er eines der Reiseportale verwenden kann. Expedia hat die kürzeste Ladezeit mit 4,8 Sekunden, erreicht dies aber mit einem recht kargen Informationsangebot. Eine brauchbare Balance zwischen Informationsangebot und Ladezeit erreicht der Zweitplatzierte Check24. Das Performance-Schlusslicht Bucher Reisen braucht knapp 14 Sekunden Ladezeit bis die mobile Website geladen ist. Hier liegt großes Optimierungspotential, denn die Kundenzufriedenheit und Buchungsrate sinkt ab einer Wartezeit von 4 Sekunden erheblich, dies wurde in verschiedenen Studien belegt.

Die Lösung von Bucher Reisen ist jedoch grundsätzlich richtig: Das Unternehmen bedient alle Nutzer unabhängig vom Endgerät über eine URL.

Dieser sogenannte One Web-Ansatz bietet sowohl technisch als auch im Marketing Vorteile und wird sicher weitere Verbreitung finden. Eine Geräteerkennung und eine anschließende optimierte Auslieferung der Inhalte für verschiedene Endgeräte ist dabei natürlich Voraussetzung.

Performance Wertung

Den Wachstumsmarkt mit einer mobile Strategie begegnen

Sascha Langfus, Leiter der Sevenval Consulting, vermisst ein gezieltes Vorgehen, um die Chancen des wachsenden M-Commerce zu nutzen: „Wir konnten bei keinem der Anbieter eine mobile Strategie erkennen, die mehr zum Ziel hat, als die Funktionen von Webseiten mehr schlecht als recht für mobile Geräte aufzubereiten. Die Unternehmen versäumen dabei die Chance sich von der Buchung über den Service am Reiseziel bis zum Rückflug als Reisebegleiter auf dem Smartphone anzubieten. Wir sehen hier ein großes Potential zur Kundenbindung, um sich aus dem homogenen Reiseangebot hervorzuheben.“

Über Sevenval Consulting

Das Team von Sevenval Consulting berät Unternehmen, die komplexe responsive Webprojekte zukunftssicher umsetzen möchten.

Zu den Beratungsleistungen gehören die Entwicklung einer umfassenden Front-End-Strategie sowie die konkrete Konzeption einer Web-Infrastruktur. Auf Wunsch folgt eine projektbegleitende Analyse der Umsetzung des neuen Online-Auftritts mit klaren Empfehlungen für das weitere Vorgehen. Dabei liegt der Fokus auf der inhaltlichen und technischen Weiterentwicklung von Webseiten, die für alle Geräte optimiert sind.

Durch Sevenval erfolgt eine parallele Bewertung

  • der Endkundenanforderungen (Joy of Use),
  • der Businessziele eines Unternehmens (Information, Abverkauf, Kundenbindung)
  • und deren Technologielandschaft (Systeme, Prozesse)

Sevenval Consulting erhöht so für seine Klienten die Qualität von Services, steigert die Conversion Rate und Kundenbindung, sowie den Return on Investment der Webinfrastruktur.

 

Short English Abstract: 

Sevenval paper on the quality of mobile travel websites
Travel sites are poorly equipped for mobile users

We analyzed the mobile web offerings of 12 travel service providers. Here is a first glance at the study’s results:

  • Insufficient Usability: Not one out of the 12 online travel companies tested received an overall rating of “good”.
  • TUI takes first place in usability tests after having scored well in four out of six fields of study.
  • While Expedia had the shortest loading times, Check 24 had the best balance between displayed information and performance.
  • Travel service operators are not reaching their full mobile potential, missing out on a large segment of the market.

“We were unable to recognize a mobile strategy in any company that went beyond delivering the identical functionalities already present on the desktop website. In our opinion, companies are missing out on their opportunity to become a smart phone travel companion. They have the chance to support consumers from initial booking, to departure, to providing information about local services at the final destination and assisting them with their return trip home. Within the M-Commerce sector, we see great potential for creating customer loyalty in order to stand out amongst the competition.” Sascha Langfus, Vice President Sevenval Director of Consulting
Please send an email to travelstudie@sevenval.com in order to receive the complete study (German only) including final recommendations.

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.

 

#GoldenRules: 7 Rules for a better website

Was macht eine (mobile) Webseite perfekt? Worauf muss man als Entwickler bei Design und Aufbau achten? Worauf als Marketing-Verantwortlicher, damit die Conversion am Ende stimmt? Entscheidend für den Erfolg einer Webseite ist heute mehr denn je das „Wie“ und gar nicht so sehr das „Was“. Damit sich Klicks, Views, Einkäufe und Buchungen im E-Commerce weiter positiv entwickeln, stellen wir in den kommenden Wochen auf Twitter unsere sieben goldenen Regeln vor, mit denen ein Webprojekt gelingt.

Dabei blicken wir auch in die Zukunft, denn sie beinhaltet sowohl den Blick auf die kommenden Consumer-Ansprüche als auch auf mögliche Entwicklungen der Anwender-Technik sowie der Programmierung, dem Hosting, bei Datenbanksystemen oder Lagerwirtschaft. Zu jeder Regel veröffentlichen wir Tipps und weitere Informationen.

Die Regel Nummer Eins: Sei so schnell wie möglich! Kurze Ladezeiten haben den direktesten Einfluss auf die Conversion. Startseiten, die länger als drei Sekunden laden, stellen die Geduld vieler Verbraucher bereits auf die Probe. Diese landen am Ende nicht an Ihrer Kasse, sondern bei der Konkurrenz.

Die zweite Regel lautet: Responsive Design, für jedes Gerät. Eine gute Webseite sollte in jeden denkbaren Display und Browser einwandfrei funktionieren.

Regel Nummer drei: Sei feature-orientiert! Warum? So kann man schneller Bugs ausmerzen, aber auch gewährleisten, dass die Seite für neuere Betriebssysteme genau wie für ältere Varianten optimiert läuft.

Die vierte Regel geht mit dieser Hand in Hand: Immer kompatibel bleiben! Aus diesem Grund lohnt es sich, die Platzhirsche der Mobile-Devices im Auge zu behalten. Trotzdem: Die Welt besteht nicht nur aus Galaxy- oder iPhone-Usern. Deshalb lohnt es sich, die Kompatibilität in vielen möglichen Varianten zu testen.

Für die prozessorientierten Denker gilt besonders Regel fünf: Behalte die Kosten im Auge und die Conversion hoch! Entwickler sollten sich auf die Umsetzung der digitalen Geschäftsstrategie konzentrieren und  Bug-Fixing und Updates im Front-End externen Anbietern überlassen.

Regel Nummer sechs: Mobile first! Experten wie Jeremy Keith sprechen sich für das Lean Management von Inhalten aus. Zuerst an den kleinen Screen denken! Welche Information ist am wichtigsten? Das hilft dem Nutzer Euer Angebot zu verstehen – auf allen Geräten. Denn auch die Desktop-Seite kann von dieser Schlankheitskur profitieren.

Die siebte Regel bescheren uns schließlich die User, die genau deshalb gerne wiederkehren: Biete hohe Qualität, zu jeder Zeit. Hier geht es nicht nur um die möglicherweise vertriebene Ware, sondern auch um sämtliche Usability-Gesichtspunkte wie Funktionalität, Funktion, serverseitige Laufsicherheit und auch der richtige Umgang mit Datenschutz oder der unternehmenseigenen Compliance.

Über die nächsten Wochen sammeln wir hier unter den einzelnen Regeln unsere und eure Tipps, Tricks und Cheat-Sheets. Wir bitten um tatkräftige Mithilfe in den Kommentaren und auf Twitter: Folgt uns unter @Sevenval und twittert eure Vorschläge für jede Regel unter #GoldenRules!

 

2nd Beacon Summit 2015

Picture the scene: Düsseldorf – Glorreich Theatre – the 2nd Beacon Summit.
This location boosted an artistic, flirtatious and service orientated atmosphere – just right for a bunch of beacon junkies, helping them to release their creative and business objectives onto the like minded community.

One of the speakers who captured the audience was Alexander Oelling from our partner, Sensorberg.  He took us on a journey – explaining the known and unknown challenges ahead, that each OEM & creative company need to be aware of before embarking on there beacon journey.
However my favourite guest speaker of the day was Dave Matthews, a tech guru from the US, heavily involved in consumer-focused inventions and bespoke solutions. He spoke energetically and positively of his relationship to beacon technology and its application into our future, of its fan base, working scenarios and case studies, in which all types of sending & receiving exist – all under the tech banner of “Beaconing“. Bring on the future!

For Sevenval the key wins were the various interested parties who invested their valuable and limited time to ask about our product, our place amongst the beacon world and how we see the development of the beacon road map ahead.

For a brief glimpse into the summit with all its glory and guest speakers, please visit: http://www.beaconsummit.de
A few pictures of the event can also be seen here via Facebook: https://www.facebook.com/inspirato.konferenzen/photos_stream

Lets see what 2015 has to offer the beacon community and the public – I sense a change ahead of us.

Keep Beaconing….
Rouven Van Dort & Leon Schlichte


Ihre Meinung ist gefragt!

Sevenval Consulting startet eine Umfrage zu mobilen Webangeboten der Reisebranche. Unter den Teilnehmern verlosen wir ein iPad Mini 3 in bestmöglicher Ausstattung im Wert von 609,- Euro. Zum Teilnehmen bitte hier klicken. Ihre Angaben werden selbstverständlich anonym behandelt. Sevenval Consulting unterstützt Unternehmen bei der Optimierung Ihres Webfrontends mit dem Fokus auf Strategie, Technologie und Performance.

Sevenvak Umfrage_GWS

Neu bei Sevenval: Alexander Leno

xing-profile-photo (1)

Name:
Alexander Leno

Position:
Financial Controller

Bei Sevenval seit:
01.01.2015

Meine größte(n) Stationen davor:
Lumo Graphics GmbH (Softwareentwickler für 3D-Visualisierung)

Mein Lieblingsgadget/Software:
DB-App

Warum ich dieses Gagdet/Software mag:
Zeigt mir an, wann die Bahn mal wieder Verspätung hat :-\

Meine letzte/ aktuelle Herausforderung bei Sevenval:
Vorbereitungen zum Jahresabschluss 2014

Auf diesen Kanälen kannst du mich finden (Skype, twitter, Xing. LinkedIn…):
Xing und LinkedIn

 

…einmal mit RESS bitte

RESS: Responsive Design + Server Side Components.

Mit der RESS-Methode kann Responsive Webdesign serverseitig optimiert werden. Prozesse der Contentauslieferung werden vom Client auf den Server verlagert und der Browser dadurch entlastet. Das zu übertragende Datenvolumen kann für mobile Geräte deutlich verringert werden.

Dies wird durch unsere Software Sevenval FIT ermöglichst. Diese erstellt einen präzisen Delivery Context, der die Eigenschaften des Browsers im Zusammenspiel mit Betriebssystem und Software beschreibt.

Responsive Contentauslieferung basiert oft nur auf einer Feature Detection

Dabei wird ein hybrides Verfahren genutzt, bei dem  Client-Side Feature Detection mit Server-Side Browser Detection kombiniert wird.
die verschiedenen Geräte wie Desktop-PCs, Laptops, Tablets und Smartphone, erkennt und dem RESS-Server ermöglicht Inhalte optimal auszuliefern.

ohne RESS SERVER:

RESS_Chart_IllustrationA

mit RESS Server

RESS_Chart_IllustrationB

RESS sorgt für ein schnelles Surferlebnis – auch bei mobiler Nutzung.