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.

Material Design unter der Lupe

material designCredit: Google
http://www.google.com/design/spec/material-design/introduction.html#introduction-goals

Ende Juni 2014 hatte Google im Zuge des Updates auf Android 5 Lollipop Material Design vorgestellt. Damit hat Google zum ersten Mal eine umfassende Designrichtlinie heraus gegeben und für viel Echo gesorgt.
Material Design basiert eindeutig auf bestehenden Trends wie Flat Design und Content First, geht aber noch einige Schritte weiter.
Mein erster Eindruck von den Richtlinien war sehr gut. Und tatsächlich hatte ich auch als bekennender Apple-Fan zum ersten Mal das Gefühl, dass ein Designansatz von Android dem von Apple überlegen sein könnte.

Deshalb wollte ich mir im Folgenden die vier, meiner Meinung nach, wichtigsten Aspekte von Material Design einmal genauer ansehen. Dabei möchte ich herausfinden was sie besonders macht, und wie sinnvoll sie im praktischen Einsatz sind. Continue reading

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

  • “In order to save our sanity, we need to create one experience that adapts to these devices, rather than a dedicated experience for every new rectangle Samsung spits out.” Brad Frost is one of many RWD-Experts quoted with regards to adaptive design at digitalartsonline.  
  • Chrome 39 beta includes JavaScript Generators and Web Animations control, reports venturebeat.
  • Mike Sterns insights on hamburger menus, AKA Slide out menus, AKA sidebars, AKA basements, AKA drawers. Transcribed from a WWDC 2014 session, published on Manbolo Blog.
  • Apple confirms slower adoption rates for iOS 8, see venturebeat for details.
  • Update for scroll events in iOS 8: Not pausing JavaScript execution actually adds some compatibility for iOS that they didn’t have before. Read more
  • Missed the news on Windows 10 technical preview? Check IEBlog
  • Adam Silver wrote an ode to the boring front-end developer at github 
  • Keep your CSS on the fast lane with tipps from Addy Osmani. Recorded at CSSConf.eu 

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

Trend: iBeacon: Sevenvals Mobile Marketing Unit designs first indoor navigation projects for airports and railway stations

  • Beacon technology enables targeted communication at every location with travelers and consumers
  • Indoor navigation is feasible for large facilities with a minimum budget of 200.000 €

Berlin/Cologne, 16th of April 2014 – Sevenval’s Mobile Marketing unit (www.sevenval.com) has developed the first Beacon concepts for airports and railway stations. The team is specialized in developing mobile solutions and services. This includes all possible communications and promotional actions as well as customer loyalty programs for clients such as Sky Deutschland AG and the Telefónica GmbH.

For the installation of a Beacon network as well as a content management system, Sevenval was able to get the Beacon specialist Sensorberg on board. Both companies are cooperating in the development of functional and professional indoor navigation projects. Continue reading

“Social Cloud” by Mercedes-Benz Sevenval implements OneWeb project for most successful automotive brand in social web

socialCloudFBTeaser

  • Sevenval creates a high-performance platform for the bundling of all social media channels on a single site
  • RESS server reduces loading times across all devices for OneWeb delivery
  • FIT Software reduces operating costs, as future devices are also supported
  • New social media channels can be added easily and quickly

Cologne, 02.04.2014 – Sevenval (www.sevenval.com), the leading provider of web technologies, has realised the technical implementation of Mercedes-Benz’s “Social Cloud” (http://social.mercedes-benz.com). This unique OneWeb project adjoins all publications relating to the automobile manufacturer from independent sources like blogs, Twitter, YouTube, Facebook, Google+ and Instagram, in addition to content from its own social media channels, on to one single website. Continue reading

Weekly #29

Server-side device detection used by 82% of Alexa top 100 sites
http://mobiforge.com/designing/blog/server-side-device-detection-used-82-alexa-top-100-sites

Writing Quality Third-Party JS:
http://blog.errorception.com/2012/01/writing-quality-third-party-js-part-1.html
http://blog.errorception.com/2012/01/writing-quality-third-party-js-part-2.html

Official Android Design Guidelines
http://developer.android.com/design/index.html

CSS Specificity
http://www.standardista.com/css3/css-specificity/

Weekly #12

Really high quality reading material this week. Essential articles (and even a philosophic one) for every web and mobile developer. Have fun and a nice weekend!

Here we are:

Comprehensive work by Tali Garsiel and Paul Irish: How browsers work — a comprehensive primer on the internal operations of WebKit and Gecko
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Chris Heilmann states: We need new best practices in web development
http://www.wait-till-i.com/2011/08/15/getting-rusty-we-need-new-best-practices-for-a-different-development-world/

IBM DeveloperWorks: User interface design for the mobile web
http://www.ibm.com/developerworks/library/wa-interface/

Yehuda Katz: Understanding prototypes in JavaScript
http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/

Brian Fling: Anatomy of a HTML5 Mobile App
http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/

Colleen O’Banion: Mobile web design pitfalls
http://www.mobilecommercedaily.com/2011/08/17/mobile-web-design-pitfalls

Weekly #9

Another cool mobile design gallery:
http://www.mobileawesomeness.com/

Chrome Dev Tools Reloaded. Debugging with Google’s Chrome Browser. Very interesting to see what you can do:
http://www.youtube.com/watch?v=N8SS-rUEZPg

Understanding mobile cache sizes
http://www.blaze.io/mobile/understanding-mobile-cache-sizes/

A review of some JS canvas libraries
http://www.suburban-glory.com/blog?page=141

Seven guidelines for designing high performance mobile user experiences
http://www.smashingmagazine.com/2011/07/18/seven-guidelines-for-designing-high-performance-mobile-user-experiences/