Ein technischer Blick hinter die Kulissen von LOGENTIS.de

Nun sind wir keine Agentur und verkaufen somit auch keine Dienstleistungen rund um Internetseiten, noch bieten wir Leistungen im Bereich Content Management Systeme an. Trotzdem möchte ich Sie ein wenig in die Welt der neuen LOGENTIS Homepage entführen. Da alle unsere Projekte und Produkte browserbasiert sind, haben wir ein tiefes Verständnis für Webtechnologien entwickelt. Angefangen von HTML5 und Javascript, bis hin zu 3D Rendering im Browser via SVG oder WebGL. Aber zurück zu unserer Homepage.

###Responsive Jede Webseite sollte heutzutage responsive sein. Was heißt das aber genau? Es bedeutet, dass die Internetseite auf die Geräteklasse reagiert, von der sie angefragt wird. Das Besondere dabei ist, dass es nicht mehrere Versionen einer Webseite gibt, sondern eine intelligente Version, die sich entsprechend anpasst. Alles andere wäre aus Wartungssicht auch unmöglich zu handhaben. Nun kann man natürlich das Thema Layout und Responsive komplett selbst angehen, oder wie wir, Twitter Bootstrap nehmen. Bootstrap ist eine Sammlung von visuellen Komponenten und ein CSS Gridsystem, welches die Entwicklung deutlich beschleuningt. Die aktuelle Version 3 beinhaltet überragende Konzepte, wenn es darum geht viele verschiedene Geräteklassen zu unterstützen. Dass Bootstrap v3 auch in unsere Projekte und Produkte Einzug hält, versteht sich von selbst.

###jQuery Komponenten jQuery ist der De-facto-Standard in Sachen dynamische Elemente in HTML. Bootstrap selbst besteht aus einigen jQuery Komponenten, jedoch ist das Internet voll von anderen wunderbaren Komponenten. Auf unserer Kundenprojekte Seite sehen Sie z.B. eine von vielen Komponenten in Aktion. Die LOGENTIS Homepage besteht aus ca. 8 verschiedenen Komponenten, die uns helfen, die Seite attraktiv zu gestalten.

###Slider Die einzige hinzugekaufte Komponente ist der Revolution Slider am Anfang unserer Homepage. Er besticht durch komplett in CSS animierte Komponenten, die auch von Suchmaschinen gelesen werden können. Vorbei die Zeiten von Slidern, wo es nur Bilder gab, die jedoch für Google schlecht indexierbar und noch viel schlechter bewertbar waren. Nun ist ein Slider genauso wertvoll im Bereich SEO, wie ein Fließtext auf einer Seite. Die unglaubliche Auswahl an verschiedenen Transitionen, Effekten und Möglichkeiten hat uns sofort fasziniert.

###Schnelle Auslieferung via CDNs Um die Auslieferung der Seite zu beschleuningen nutzen wir ein Content Delivery Network (CDN). Manche kennen sicherlich den Platzhirsch unter den Networks namens Akamai. Es gibt jedoch noch viele andere Marktteilnehmer, die es einen leicht machen, statischen Content wie Javascript Dateien, CSS Dateien, Bilder und andere Resourcen, weltweit zu verteilen. Durch die geschichke Nutzung von mehreren Hostnamen, die alle zu einer CDN führen, ist es weiterhin möglich den Browser mehr parallele Aufgaben zu geben. Am Ende steht eine schnellere Auslieferung der Inhalte. Erst Recht wenn die Internetseite aus mehreren Ländern aufgerufen wird. Hier sind wir sicherlich etwas in Vorleistung getreten ;-)

###CMS oder nicht CMS Da wir eine Softwarefirma mit Fokus auf webbasierte Entwicklung sind, ist unser Ansatz in Sachen Content-Management ein eher technischer und somit nicht mit dem klassischen Agenturkunden vergleichbar. Für Webseiten, die in erster Linie Marketinginhalte transportieren wollen, empfehlen wir nicht, dieses mit einer dynamischen Webseite zu tun. Software wie Drupal oder Wordpress, die es ermöglicht ohne Lizenzkosten eine Internetseite mit Content zu versorgen, tun zwar ihren Dienst, jedoch gibt es immer das Fragezeichen, wie so eine Seite in Sachen Search-Engine-Optimization (SEO) funktioniert. Wir glauben immer noch, dass Google statische HTML Seiten und schnelle Ladezeiten am liebsten mag. Ein weiterer Punkt ist die Abhängigkeit solcher Systeme von Datenbanken. Eine Datenbank zu betreiben ist natürlich kein Hexenwerk, aber eine Komponente mehr die langsam sein oder abstürzen kann. Statische HTML Seiten benötigen nur einen laufenden Webserver und alles ist gut. Grössere CMS System, die statische Seiten generieren, wie z.B. Typo3 oder kommerzielle CMS wie OpenText sind für unsere Bedürfnisse zu komplex und der Aufwand des initialen Setups zu hoch.

###... und was nehmen wir nun?

Wir nehmen einen von vielen statischen Sitegeneratoren, die sich eher an Entwickler richten, da eine gewisse Toolumgebung auf dem Rechner benötigt wird, dabei aber recht einfach zu betreiben sind. Einige Vertreter dieser Gattung sind Jeckyll, Middleman oder Wintersmith. Viele setzen auf Ruby als Laufzeitumgebung, manche NodeJS, manche PHP.

In den folgenden zwei Links können Sie ein wenig über statische Sitengeneratoren lesen, bzw. bekommen eine Übersicht der 10 beliebtesten Generatoren.

Unsere Wahl viel auf Middleman, da uns der Toolstack schon bei einem anderen Projekt über den Weg gelaufen ist. Aber was macht Middleman nun so gut? Ganz einfach, Middleman sorgt sich um alle Dinge, über die man sonst gerne vergisst, oder die man sonst extern hinzukaufen muss. Hier nur einige der relevanten Punkte:

Hat eine eigene Blog Engine, welche via Markdown Files funktioniert (unsere News und unser Blogs wird darüber gesteuert)
Generiert automatisch Blog Atom Files und die wichtige Sitemap.xml für die Search Engines
Minifiziert automatisch alle Javascript Dateien
Komprimiert automatisch alle CSS Dateien
Hat die Möglichkeit alle JS bzw. CSS Dateien in jeweils eine grosse Datei zu konkatenieren
Komprimiert alle Bilder auf eine gute Dateigrösse, ohne viel Qualität zu verlieren
Deployed auf Kommando zum Produktionsserver
Hat einen eigenen Vorschauserver auf Port 4567
Hat ein wunderbares Templating System

###Fazit Man kann leicht sehen, dass mit einem Befehl, eine unglaubliche Toolingkette durchlaufen wird. Google bescheinigt uns hervorragende Ladezeiten der Homepage, obwohl wir verhältnismäßig viel Javascript auf unserer Seite haben, um Dinge wie den Slider oder sonstige animierte Dinge darzustellen. Am Ende muss man es sich wie eine Autowaschanlage vorstellen: Man fährt mit einer unoptimierten Webseite, bzw. Templates herein und kommt mit einer durchweg optimierten Homepage wieder heraus. Und da es natürlich sehr regelmäßig Änderungen an der Webseite gibt, macht es viel Sinn sich nicht jedesmal mit technischen Details wie z.B. Bildgrößen herumzuschlagen.