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.

Sevenval FIT 14.0.3 out now – here is our Changelog

Our new release Sevenval FIT 14.0.3 brings RESS to SLES! We are happy to announce that Suse Linux Enterprise 12 is now among the supported operating systems. Check the installation instructions for more details.

Frontend developers now have access to our image scaling features from JavaScript through the URL API. ac-stage provides more API functions and better interoperability with ac-scroll.

The core components have received some love, too: Our HTML parser supports more HTML5 elements, the JavaScript minifier is more robust and respects license comments, more WebP images for everyone, faster page loading thanks to less inline code. Last but not least, we hunted down a lot of bugs and updated third party libs.

As always, please read the full changelog and pay attention to the Changed and Removed keywords.

If you do not use our latest software yet, don’t hesitate to contact our staff at
developer.sevenval.com to learn why FIT 14 is good for you.

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

Weekly #36

RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design:
http://www.dmolsen.com/mobile-in-higher-ed/2012/02/21/ress-and-the-evolution-of-responsive-web-design/

Anatomy of a mobile web experience: google.com
http://mobiforge.com/designing/story/anatomy-a-mobile-web-experience-google-com

Cache them if you can | “The fastest HTTP request is the one not made.”:
http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/

Why Minify JavaScript?
http://engineeredweb.com/blog/why-minify-javascript/

Round-up of web browser internals resources:
http://updates.html5rocks.com/2012/04/Round-up-of-Web-Browser-Internals-Resources

Javascript libraries for dealing with touch events, multitouch, normalizing across the Webkit/IE touch models, and all that jazz.
https://github.com/bebraw/jswiki/wiki/Touch

HTML5 Bookmarks with daily news articles and bookmarks about html, javascript, css:
http://html5bookmarks.com/

Getting to Grips with HTML5 Browser Compatibility:
http://speckyboy.com/2012/03/25/getting-to-grips-with-html5-browser-compatibility/

Weekly #33

A re-introduction to JavaScript
https://developer.mozilla.org/en/JavaScript/A_re-introduction_to_JavaScript

The Future of JavaScript – take a peek today!
http://blog.chromium.org/2012/02/future-of-javascript-take-peek-today.html

High performance HTML5 content in Metro-style Apps
http://blogs.msdn.com/b/ie/archive/2012/02/07/high-performance-html5-content-in-metro-style-apps.aspx

Tracking JavaScript execution during startup
http://ariya.ofilabs.com/2012/02/tracking-javascript-execution-during-startup.html

YSlow goes Open Source
http://developer.yahoo.com/blogs/ydn/posts/2012/02/welcome-yslow-open-source/

HTML5 Web Notifications
http://tumblr.dangercove.com/post/17213260067/html5-web-notifications

Android and mobile browsing insights – Week 7
http://irinasandu.com/2012/02/15/android-and-mobile-browsing-insights-week-7/

Apple sold more iOS devices in 2011 than all the Macs it sold in 28 years
http://www.asymco.com/2012/02/16/ios-devices-in-2011-vs-macs-sold-it-in-28-years/

Weekly #20

Opera released a Opera Beta with experimental Media Capture API support. Great!
http://labs.opera.com/downloads/

Cool presentation about HTML5 by Chris Heilmann from Mozilla
http://hacks.mozilla.org/2011/10/beam-me-up-scotty-bringing-html5-to-the-enterprise/

Pretty detailed article about web notifications
http://dstorey.tumblr.com/post/11597158114/webnotifications

Nice trick: Enable CSS active pseudo styles in Mobile Safari
http://miniapps.co.uk/blog/post/enable-css-active-pseudo-styles-in-mobile-safari/

Lessons From A Review Of JavaScript Code
http://coding.smashingmagazine.com/2011/10/27/lessons-from-a-review-of-javascript-code/

Weekly #18

Mozilla-CTO Brendan Eich talks about JavaScript
http://video.golem.de/internet/5996/mozilla-cto-brendan-eich-ueber-javascript.html

Some words about Google’s new web programming language Dart by ppk: Dart; or Why JavaScript has already won
http://www.quirksmode.org/blog/archives/2011/10/dart_or_why_jav.html

Simple, maintainable templating with JavaScript
http://www.nczonline.net/blog/2011/10/11/simple-maintainable-templating-with-javascript/

HTML5 Techniques for Optimizing Mobile Performance
http://www.html5rocks.com/en/mobile/optimization-and-performance.html

Very useful notes about HTML and JavaScript by Mathias Bynens. He calls his notes a “mini-knowledge bomb”
http://mathiasbynens.be/notes

Rich text input on iOS
http://remysharp.com/2011/10/10/rich-text-input-on-ios/

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

A touch screen keyboard implemented in JavaScript. A bit buggy on mobiles but who knows, maybe you need it one day.
http://code.technolatte.net/TouchScreenKeyboard/

Did you know there is a W3C API to access timing information related to navigation and elements? Measuring Mobile Site Performance Using the W3C Navigation Timing API
http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api.aspx

Cutter.js: Truncate HTML code to limit its length by number of words without losing markup.
https://github.com/tcorral/Cutter.js

The Most Important Parts of HTML5
http://blog.n01se.net/?p=375

7 Chrome Tips Developers & Designers May Not Know
http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html

Weekly #10

8 useful CSS tools. Some are more useful, some are less useful
http://webdesignledger.com/tools/8-useful-css-tools

The future of css layouts
http://www.netmagazine.com/features/future-css-layouts

Get offline – Taking your web sites and apps offline with the HTML5 appcache
http://www.webdirections.org/blog/get-offline/

CreativeJS: The very best of creative JavaScript and HTML5
http://creativejs.com/

Learning the basics of HTML5 canvas – good tutorial!
http://www.netmagazine.com/node/1223