vibellio

zu beginn des jahres 2022 habe ich die geschäftsausstattung meiner brand vibellio neu gestaltet und erweitert.
farben, logo und formen sind annähernd gleich bzw. identisch geblieben und waren dem bis dato vorhandenem corporate design weiterhin treu.

auf der basis dieser auffrischung sollte im laufe des jahres auch die website komplett neu gestaltet und programmiert werden.
diese war zu diesem zeitpunkt 4 jahre online und wurde in dieser zeit immer wieder erweitert und verändert.
der konzeptionelle ursprungsgedanke der seite war die präsentation von kreativen arbeiten und projekten aus meinem studium.
die eingliederung von kunden-cases und dem leistungsportfolio als freelancer wurde über die zeit in ein gerüst eingebaut, was nicht wirklich dafür vorgesehen war.
so wirkten die (mittlerweile) wichtigeren inhalte stets dazwischen gequetscht und hatten nicht die präsenz, die sie benötigten bzw. verdienten. besonders wenn es um die präsentation der cases geht, die keine eigenen unterseiten und somit auch keine eigenen urls haben, die wichtig wären um neue kunden direkt auf entsprechende beispiele verweisen zu können, bestand wachsender handlungsbedarf.
die seite konnte auch als live-learning projekt gesehen werden, da neue kenntnisse und learnings, vor allem im frontend bereich, hier gleichzeitig ursprung und anwendung fanden.
es wurde zeit, mit diesem wissen bei 0 zu beginnen und die seite, besonders aus technischer sicht, kompromisslos neu aufzubauen.

im februar 2022 habe ich mit dem layout der neuen website begonnen und sie von beginn an komplett neu gedacht und geplant – sowohl technisch als auch gestalterisch.
schon nach den ersten setzungen habe ich schnell gemerkt, dass das alte, bereits aufgefrischte corporate design, in meinem neuen ansatz nicht mehr funktionierte und habe es komplett umgeworfen und neu aufgebaut.

nach 8 monaten verteilter arbeit und knapp 5 jahre nach veröffentlichung der bisherigen website, ist es im oktober 2022 endlich soweit und vibell.io erscheint auf allen bekannten kanälen und auf der eigenen website in völlig neuem corporate design.
mit der veröffentlichung der website ist die vollumfängliche neugestaltung und programmierung der brand vibellio abgeschlossen und über 200 stunden arbeit können endlich präsentiert und genutzt werden.

die website ist dabei das herzstück der ganzen marke, da sie vor allem 2 ziele verfolgt: einerseits eine wesentlich detaillierte möglichkeit, kunden-cases und das eigene leistungsportfolio zu präsentieren.
andererseits (und das ist das wichtigste) die website auf dem modernsten stand der webtechnologien aufgebaut zu haben und sie somit zum best case scenario zu machen, welches ich anbieten kann.

immer wenn es um die gewinnung neuer kunden geht und das kernprodukt des eigenen unternehmens der verkauf von websites ist, sollte die eigene homepage als leuchtendes beispiel voran gehen, zeigen was technisch möglich ist und die erste und beste referenz sein, die ein unternehmen präsentieren kann.
vibell.io tut dies ab sofort, denn vibell.io ist nicht länger nur eine website, sondern eine app, die als progressive web app (pwa) in jedem browser auf jedem endgerät läuft und sogar auf diesem gespeichert werden kann und somit fullscreen, ohne das interface des browsers, als app gestartet werden kann.

die website ist mit nuxt.js (ein javascript framework welches auf vue.js basiert, aber etwas intelligenter genutzt werden kann und mehr funktionen bietet) umgesetzt. das framework ermöglicht es die website als app zu programmieren und im browser als pwa laufen zu lassen. das bietet zum beispiel vorteile, wie das speichern von eingaben und variablen ohne cookies zu nutzen, inhalte zwischen unterseiten zu tauschen und abzurufen. das interface, also das frontend, macht dies jedem nutzer als erstes sichtbar, da bei der navigation auf der seite die unterseiten und standardelemente nicht komplett neu geladen werden müssen und somit kein abruptes ausblenden von inhalten oder weisse/schwarze leere flächen zu sehen sind.
navigationselemente und hintergründe bleiben bestehen und lediglich der inhalt der unterseite wird neu geladen – dieser übergang (transition) lässt sich sogar animieren.

die seite ist headless programmiert, das bedeutet, der inhalt, also der content, ist vom kernsystem getrennt und nicht statisch gespeichert.

einerseits der nuxt.js app, die sämtliche templates, stylings, komponenten und logiken enthält.
andererseits das content management system (cms), welches sämtliche inhalte speichert und an die app liefert.
als cms kommt das flat-file cms kirby zum einsatz. flat file bedeutet, dass das cms rein datei-basiert funktioniert und keine datenbanken benötigt werden. bei bedarf braucht es nicht mal ein grafisches admin panel zum pflegen der inhalte. letzteres ist natürlich für weniger webaffine user kaum wegzudenken und stellt die inhalte im cms deutlich übersichtlicher dar. der dateibasierte aufbau macht die benötigte speichergröße von kirby wesentlich kleiner als bekannte, häufig überladende cms-systeme wie z.b. wordpress.
als vergleich die dateigröße der standartinstallation: kirby (5mb) / wordpress (65mb).

das cms stellt eine rest-api zur verfügung, über die der content auf jeder beliebigen website, app oder in sonst einem web-system eingebunden werden kann.
die api ist nach belieben programmierbar, sodass individuelle anfragen gestellt, speziellere anfragen zusammengefasst, vereinfacht und besonders auch in der ladezeit verkleinert werden können .
das admin panel zur verwaltung der daten lässt sich über templates (blueprints in yml dateien) eigenhändig konfigurieren und so speziell auf die eigenschaften des projektes anpassen – hier ein beispiel:

content und frontend zu trennen bietet viele spannende möglichkeiten und vereinfacht vor allem versionierungs- und update-prozesse.
der content kann über die rest-api jederzeit in jedem weiteren projekt eingebunden werden, ohne andere systeme zu stören oder kompromisse machen zu müssen. so kann das cms stets erweitert und genau angepasst werden und bei bedarf, ausgewählte inhalte nur in ein bestimmtes system liefern.

im hintergrund kann die app an sich permanent weiterentwickelt werden und mit dem aktuellsten content arbeiten, ohne dass die änderungen während der entwicklung schon auf der live-seite zu sehen sind. unterstützend möglich macht dies unter anderem auch github.

wenn es um das deployment (veröffentlichung der app, des codes) geht, bietet nuxt.js zwei möglichkeiten:
static oder server.
was heisst das konkret?

in diesem modus wird die app mit statischen dateien und routen generiert. dynamische urls werden ebenfalls berücksichtigt und generiert. dynamische inhalte werden natürlich weiterhin über eingebundene apis bezogen. dadurch entsteht ein fertiges datenpaket, welches in jedes klassische webhosting geladen werden kann und ohne weitere einstellungen sofort funktioiert. fertig.
nachteil ist allerdings, dass bei neuen routen, also weiteren unterseiten oder auch statischer dateien die app immer wieder neu generiert werden muss und neu hochgeladen werden muss wodurch es auch kurz zu einer nicht-erreichbarkeit (downtime) der website kommt. außerdem muss das fertige html auf client seite gerendert werden, das bedeutet im browser des user, wodurch sich die ladezeit der seite erhöht.
das dies bisher der klassische weg des webhostings ist, deutet schon an, dass es hier starkes verbesserungspotenzial gibt.

die zweite möglichkeit des deployments ist der modus server.
hierfür ist wesentlich mehr arbeit nötig, als für die zuvor beschriebene variante static.
zusammengefasst ist das ganze system allerdings wesentlich besser kontrollierbar, steuerbar, zuverlässiger und auch schneller:
zunächst muss bei einem entsprechenden anbieter ein cloud server eingerichtet werden. hier kann man von 5€ im monat bis 200€ und mehr im monat alles bekommen und die serverleistung entsprechend des entwickelten systems auswählen und später bei belieben dauerhaft erhöhen.

auf dem server muss ein node server eingerichtet werden, damit die app überhaupt laufen kann. der server selbst muss als nginx oder apache konfiguriert werden um die ssl verschlüsselung zu händeln und die verweisende domain entsprechend korrekt zur app umzuleiten.
für die ssl verschlüsselung muss ein ssl-zertifikat erstellt werden und regelmäßig per cron-job erneuert werden.
das git repository muss eingebunden werden, um bei bedarf die nächste version der app installieren zu können.

damit der node server dauerhaft laufen kann ist ein process manager, wie zum beispiel pm2 notwendig, um diese prozesse steuern zu können.
um eine downtime der website nahezu vollständig verhindern zu können, ist ein server mit einer cpu mit mehreren kernen zu empfehlen, da so pro kern eine prozess-isntanz der app laufen kann. so läuft die app genauso oft wie es kerne in der cpu gibt – denn sollte einer der prozesse einen fehler aufweisen, kann es passieren das dieser 1h-2h braucht um sich automatisch neu zu starten und währenddessen sind automatisch die übrigen prozesse erreichbar und auf der website ist davon nichts zu merken.

all das muss über die kommandozeile per ssh zugang installiert und konfiguriert werden. natürlich gibt es dafür mittlerweile installierbare software, wie cpanel, plesk und mehr, um den server über eine grafische benutzeroberfläche zu steuern. allerdings ist dies meistens mit weiteren lizenzgebühren pro monat verbunden, die man ganz klar sparen kann, wenn man das nötige know-how mit der kommandozeile und den nötigen paketen hat.

es ist also deutlich wie viel aufwendiger es ist, diese variante von nuxt.js umzusetzen, aber dadurch ergeben sich auch einige vorteile:
das nötige html wird auf dem server gerendert und als fertiges paket direkt an den client (browser des users) geliefert und dargestellt.
ebenso api anfragen innerhalb des servers und auch zu externen schnittstellen werden auf dem server durchgeführt und bereitgestellt.
dadurch wird arbeit auf dem endgerät des nutzers gespart und somit die ladezeit der website verringert.
die app kann in mehreren prozessen laufen, um eine dauerhafte erreichbarkeit der website zu gewährleisten. außerdem können diese prozesse überwacht und log-files ausgelesen werden.
zusätzlich werden neue dynamische routen, also neue unterseiten umgehend mit ihrer veröffentlichung aufgenommen, in das routing eingebaut und zur sitemap hinzugefügt – die app muss also nicht bei jeder neuen versionen neu generiert und hochgeladen werden.

neue versionen der app können im hintergrund geladen und installiert werden und mit nur einem befehl über den laufenden server bereitgestellt werden.

frameworks wie nuxt.js und die verknüpfung mit einem headless cms bieten hier unendliche möglichkeiten und eignen sich für viele projekte und anwendungsfälle. nuxt.js macht websites zu apps und kann die erfahrung und interaktion mit webseiten wieder auf ein ganz neues level heben und diese zu einem flüssigen, dynamischen und ganzheitlichen system werden lassen. die abkopplung des contents, in ein externes headless cms, kann sämtliche online-inhalte einer brand an einem ort sammeln und diese für alle anwendungsfälle konfigurierbar und abrufbar machen und sowohl überschneidungen als auch klare abgrenzungen möglich machen.

der aktuell modernste weg websites zu entwickeln und neu erfahrbar zu machen.