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.

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 

Weekly #39 / Links about Frontend & Mobile

This week we’re very busy, nevertheless, here are some links… it´s Friday 😉

Still no plan for the weekend? Join us at #Hackathon Interactive Cologne!

Weekly #37 / Links about Frontend & Mobile

Yes, we’re back with our #weekly link posts!

Do you miss your enlightenment post? Please send me a tweet!

Weekly #30

JavaScript Performance by Steve Souders:
http://www.stevesouders.com/blog/2012/01/13/javascript-performance/
http://www.slideshare.net/souders/javascript-performance-at-sfjs

JavaScript Pattern Collection
http://shichuan.github.com/javascript-patterns/

The developer’s guide to the HTML5 APIs
http://www.netmagazine.com/features/developer-s-guide-html5-apis

Content Strategy and Responsive Design
http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design/

Responsive embeds + RESS
http://amobil.se/2012/01/responsive-embeds-ress/

Excellent CSS3 Techniques and Tutorials for Better User Experience
http://www.pixel2pixeldesign.com/excellent-css3-techniques-tutorials-user-experience/

Cross Browser CSS cursor Images In Depth
http://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/

CSS Compatibility and Internet Explorer
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx

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 #28

Welcome 2012!

The Definitive Guide To HTML5: 14 Predictions For 2012.
http://techcrunch.com/2011/12/21/guide-to-html5-14-predictions-2012/

A plea for progressive enhancement.
http://stephanierieger.com/a-plea-for-progressive-enhancement/

A tel tale sign.
http://bradfrostweb.com/blog/mobile/a-tel-tale-sign/

Initializr: With Great Templates Comes Great Responsivity!
http://verekia.com/initializr/responsive-template

Learn You a Flexbox for Great Good!
http://www.the-haystack.com/2012/01/04/learn-you-a-flexbox/

Do you love speed?

CSS Selector Performance has changed! (For the better).
http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better

Profiling CSS for fun and profit. Optimization notes.
http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/

– CSS media queries in JavaScript, Part 1.
http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/
CSSOM View Module
http://www.w3.org/TR/cssom-view/

Weekly #16

Mobile Apps must die:
http://designmind.frogdesign.com/blog/mobile-apps-must-die.html

Jakob Nielsen’s Alertbox: Mobile Usability Update
http://www.useit.com/alertbox/mobile-usability.html

I wouldn’t really use the word “amazing” but some of the demos are nice indeed:
http://www.catswhocode.com/blog/amazing-css3-techniques-you-should-know

Making a mobile connection
http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/

Short HTML book about “Scalable and Modular Architecture for CSS”
http://smacss.com/book/