Wie der One Web-Ansatz den Webseiten-Betrieb erleichtert

“There is no mobile web. There are plenty of mobile devices. And equally there is no desktop web. It is just the web. So that’s why I always bang this drum: one web.”

Jeremy Keith, BD Conference 2011

 

Beim Surfen im Netz werden viele verschiedene Geräte mit unterschiedlichen Browsern und Betriebssystemen genutzt – die technische Fragmentierung nimmt stetig zu. Dies stellt eine wachsende Herausforderung für Webseiten-Betreiber dar. Wir empfehlen daher langfristig einen One Web-Ansatz umzusetzen, der Silos wie spezifische Seiten für Smartphones und Tablets (M-Dot Sites und T.Dot Sites) auflöst.

Dies erleichtert nicht nur die Auslieferung von Webseiten bei zunehmender mobiler Internetnutzung, sondern erleichtert außerdem den gesamten Betrieb der IT. Vom Marketing Manager bis hin zum Backend Developer – alle Mitwirkenden eines Webseiten-Projektes können ihre Arbeit so effektiver erledigen und die Webseite ist zukunftssicher aufgestellt.

Sevenval_Infographic_OneWeb2015

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.

One Web-Lösung mit Sevenval FIT14

Neuer Webauftritt für netzclub gewährleistet geräteunabhängiges,  schnelles Surfen 

  • Die neue netzclub Webseite ist optimal für sämtliche mobile Endgeräte wie Smartphones, Desktop und Tablets konfiguriert
  • One Web-Lösung heißt eine URL für alle, automatische Anpassung an den Kunden statt umgekehrt
  • Die Software Sevenval FIT14 sorgt für responsives Design auf höchstem Niveau und schnelle Ladezeiten

netzclub, der werbefinanzierte Mobilfunk-Tarif von Telefónica in Deutschland, stellte letzte Woche seine neue Webseite live. Die von uns entwickelte One Web-Lösung bietet über eine URL für alle Surfer hohe Performance und Usability, egal von welchem Gerät sie die Webseite aufrufen.

Die Grenzen zwischen Smartphone, Tablet und Laptop verschwinden zunehmend, Verbraucher wechseln mehrmals täglich zwischen verschiedenen mobilen Endgeräten.

Mit dem One Web-Ansatz hat netzclub eine progressive Lösung gewählt, die der rasanten Entwicklung neuer Webtechnologien gerecht wird und eine zukunftssichere Basis für  responsives Design auf höchstem Niveau bietet. Die Webseiten von netzclub werden für alle Bildschirmgrößen, Betriebssysteme und Gerätearten optimiert, so dass das hohe Niveau der User Experience auch beim Gerätewechsel erhalten bleibt. Der Webauftritt des Unternehmens ist über eine URL erreichbar. Dahinter steckt Sevenvals Software FIT14, dessen RESS Server für die beschriebene Kompatibilität verantwortlich ist.

„Erstens verdrängen Zugriffe von mobilen Geräten den klassischen Webseiten-Aufruf vom Desktop-PC, zweitens wechseln Verbraucher mehrmals täglich zwischen verschiedenen Geräten und drittens nimmt die Gerätevielfalt zu. Die optimale Darstellung von Webseiten in jeder Situation und für jeden Nutzer ist daher technisch komplex. Wir vereinfachen diese Komplexität indem wir alle Möglichkeiten des responsiven Designs in unserem Software-Produkt FIT 14 bündeln und auf einfache Art zugänglich machen.  Unser Frontend-Server sorgt dafür, dass die Endgeräte beim Surfen entlastet werden und Content nur in passender Form ausgespielt wird“, so Jan Webering, CEO von Sevenval Technologies. „Wir freuen uns, dass netzclub diese Lösung gewählt hat und bedanken uns für das Vertrauen.

Weekly #52 – Rolands Rundown – Tech news of the week

Apple Website setzt auf Responsive Webdesign mit serverseitiger Unterstützung

Neben der großen und heiß ersehnten Präsentation zum iPhone 6 und der Apple Watch, gab es für Web Developer noch eine weitere wichtige Neuigkeit:

Apple optimiert seinen Webautritt das erste Mal komplett für mobile Endgeräte. Bisher wurde auch auf Smartphones & Co die Desktop-Seite ausgeliefert. Apple betonte damit wohl, dass iPhones auch mit Desktop-Webseiten gut zurecht kommen. Bisher gab es von Apple nur einzelne Landingpages, die für mobile Geräte optimiert waren.

apple_mobile_site

Für die jetzige Umstellung geht das Unternehmen über reines clientseitiges Responsive Webdesign hinaus und nutzt auch serverseitige Komponenten (RESS). Der dafür eingesetzte Sever-Breakpoint liegt bei 768 Pixel Bildbreite, was bedeutet, dass iPads immer noch die Desktop-Seite anzeigen. Besucht man apple.com mit Apples Tablet sieht man deshalb das vollständige Menü und ein zweispaltiges Design. Smartphone-Nutzern wird stattdessen ein „Burger“-Menü, bei Apple mit zwei Strichen dargestellt, und ein einspaltiges Layout angeboten.

Mit dieser Technologie-Mischung aus klassischen Breakpoints in Kombination mit serverseitiger Auslieferung, können auch optisch sehr anspruchsvolle Seite für verschiedenste Geräte optimiert werden. Zum Beispiel ist so auch der Einsatz von vollflächigen Retina-Bildern auf allen Geräten möglich.

Im Detail finden sich auch einige interessante Front End-Features auf der Mobile Site von Apple, dazu mehr in den nächsten Tagen.

Your Tools, Your Rules – Sevenval Announces FIT14

A Revolutionary Software for Responsive Web Design Projects

  • Sevenval FIT14 accelerates and improves responsive multi-channel websites while reducing required maintenance
  • The software optimizes quality and performance of websites using any browser on any device

Berlin, Germany, August 19, 2014 – In order to have a leg up on the competition, website operators have to deliver their customers an error-free quality online experience across all devices. Responsive Web Design is no longer enough due to device and browser fragmentation, as well as the ever-changing standards in web. Sevenval’s solution enables automatic browser and device detection. FIT 14 ensures websites perform strong, for all users, in any situation. Sevenval’s clients are both well-prepared for future trends and benefit from the reduced demand on maintenance. Continue reading

Weekly #38 / Links about Frontend & Mobile

Interactive Cologne 2014: Get your Ticket for “drop off & chill out” in our office at Sevenval Cologne!