Referenzen

2014 bis 2019 habe ich beruflich hauptsächlich Styleguides und typo3-Webseiten für queo entwickelt.

2011 bis 2013 schrieb ich als dauerhafter externer Mitarbeiter für die gekartel AG Produktberater als html5 Applikationen und entwarf Drucksachen.

2006 bis 2011 war Drupal mein Mittel der Wahl um Webseiten zu generieren.

Frontendentwicklung für queo

2015 bis heute
logo AOK

AOK - ein Styleguide in Pug

2015 gewann queo die Ausschreibung, für alle 11 AOKs ein gemeinsames Privatkundenportal zu bauen. Bei queo sind im Durchschnitt 30 Mitarbeiter für die AOKs beschäftigt, auch wenn Konzeption, Design und Inhaltspflege bei anderen Agenturen liegen.

Eine Anforderung des Kunden war es Typo3 zu benutzen. Zur Entwicklung und zum Testen von Frontendkomponenten ist Typo3 sehr langsam. Um schneller und unabhängig vom Stand des Backends entwickeln zu können, entschieden wir uns ein Styleguide mit node.js, Grunt, Jade und LESS zu entwickeln. Wir verwendeten dem Hype entsprechend bootstrap.

Der Styleguide ist sowohl Entwicklungs- und Testumgebung für Frontendentwickler, aber auch ein Handbuch für Backendentwickler, Projektmanager und Redakteure. Es sind alle Bausteine in allen Edgecases visualisiert. Wir listen dokumentierten die Verwendungszwecke und listen die notwendigen Bildgrößen auf.

Diesen Styleguide haben wir über die Jahre sowohl inhaltlich als auch softwareseitig weiter entwickelt. Jade haben wir zu Pug migriert. Statt Less verwenden wir jetzt Sass. Wir haben ein großes Bootstrap Update durchgeführt und wollen Bootstrap derzeit ganz entfernen. Seit letztem Jahr entwickeln wir neben jQuery auch React Komponenten, wo diese sinnvoll erscheinen. Wir haben Grunt zu Gulp migriert und nutzen aber für die Entwicklung mittlerweile einen Express Server. Javascript wird derzeit mit rollup gebundelt.

Dank http/2 können wir von großen CSS und JS bundles auf Module umbauen. Das beschleunigt alles. Der Styleguide enthält momentan in etwa 150 verschiedene Bausteine. Und doch werden Änderungen am HTML oder am CSS in unter 3 Sekunden live im Browser aktualisiert. Die Modularisierung ist auch für den Nutzer sehr angenehm. In den Chrome Audits steigt der Score deutlich.

Meine Passion sind die Accessebility, Dokumentation und Performance.

2015 bis heute
logo AOK

AOK - Kampagnenbaukasten

Die AOKs haben queo beauftragt einen Kampagnenbaukasten zu entwickeln. Neben dem Privatkundenportal möchten die AOKs zeitlich begrenzte Kampagnen veröffentlichen. Das kann eine Werbung für die Ausbildung zum Sozialversicherungsfachangestellten bei der AOK sein, eine Informationskampage zum Thema Impfen. Diese Kampagnen sollen die Redakteure selbst anlegen, befüllen und veröffentlichen können.

Ähnlich unserem Styleguide für das Privatkundenportal haben wir auch einen für den Kampagnenbaukasten angelegt. Auch hier gibt es einen lokalen node.js Server und auch hier steigt mit jedem Jahr die Herausforderung, dem Webseitennutzer eine performante Seite auszuliefern, da es immer mehr verfügbare Komponenten gibt.

Wir verwenden in allen Projekten Jira, Confluence, Bitbucket und Jenkins. So dass jede Codezeile einem Ticket zugeordnet werden kann.

Jeder Feature-Branch wird in einem Pull-Request geprüft. Wird er frei gegeben, wird automatisch eine neue Version gebaut und dem Backend zur Verfügung gestellt.

Immer stellen wir in Frage, warum wir kein Testframework verwenden. Und die Antwort ist einfach. Wir müssen in den Styleguides das Layout der Seite testen. Dazu müssen wir alle Komponenten sehen. Die Macht der Selektoren im CSS lässt sich gut mit Namingconventions wie BEM oder ABEM bändigen. Wir verwenden dynamische Lorem Ipsum Texte um alle Textlängen zu testen. Screenshot-Vergleichstests sind dabei nutzlos, weil jede Seite bei jeder Generierung anders aussieht und aussehen soll. Unittests sind bei uns auch kaum nötig, weil die Komplexität der Seiten nicht in der Logik, sondern in der Variabilität liegt. Für Angular Applikationen sehe ich Tests dagegen als grundlegend notwendig an. Auch TypeScript könnte hier Vorteile bieten.

2014
logo KS-Auxilia

Relaunch der www.ks-auxilia.de

Die Firma KS/Auxilia ist ein Automobilclub und Anbieter von Versicherungen. Queo hat 2014 die Kundenwebsite und Teile der Vermittlerseiten neu entwickelt. Als einer von drei Programmierer habe ich das Typo3 eingerichtet und einen guten Teil des Frontends umgesetzt.

Wir verwendeten in diesem Projekt Typo3, Grunt, Bower, jQuery, SVN und zu diesem Zeitpunkt noch Photoshop für Screendesigns.

Als Entwicklungsumgebung verwende ich bevorzugt WebStorm, verwende aber auch gelegentlich Visual Studio Code.

Produktberater im Auftrag der gekartel AG

2013

Tefal Pfannenberater

Die Firma Group SEB vertreibt unter der Marke Tefal über 350 verschiedene Produkte im Bereich Kochgeschirr. Um dem Kunden die Wahl zu erleichtern und sie zum Kauf zu animieren, sind viele Verkaufsregale mit Beratungscomputern bestückt. Nach wenigen Fragen empfiehlt die Software in Frage kommende Produkte auf Basis der Nutzereingaben und der tatsächlich im Markt vorhandenen Produkte. Es können Produktbarcodes gescannt werden und führen zu den passenden Datenblättern. Die Produkte können markspezifisch angepasst werden. Das geschieht entweder über die Cloud oder über ein passwortgeschütztes Administrationsmenü.

Diese Applikation habe ich von der Konzeption über das Design bis zur Programmierung entwickelt.

Alle Geräte hatten die gleiche Größe und den gleichen alten IE8 als Browser. Das schloss einige Technologien aus, hatte aber den Vorteil die Applikation verlässlich testen zu können.

Der Seitenwechsel durfte nicht mehr als 200ms betragen. Aus dem Grund entwickelte ich die Applikation als SPA mit jQuery. Es gab zu dem Zeitpunkt weder React oder Vue und AngularJS beendete Support für den IE8.

Die Produktdaten lagen als XML vor. Über XSLT generierte ich daraus das HTML.

Wir erfassten wir alle Click Events und generierten Heatmaps. Durch diese Daten konnten wir diese Art Applikationen nachweisbar optimieren.

In Layout und Funktionsumfang identisch ist dieser Pfannenberater immer noch erreichbar: http://www.gekartel.de/tefal

2011 - 2013

Royal Canin Schweiz Servicepoint

Der Markentierfutterhersteller Royal Canin unterhält an unterschiedlichen Standorten Servicepoints. An diesen können sich Kunden über die Produkte der Firma informieren. Sie erhalten Auf Grund ihrer Eingaben und ihres Kundenprofils personalisierte Tierfutterempfehlungen. Die Kunden können an Quizen teilnehmen und so Gutscheine erspielen. Die Standorte unterscheiden sich in ihrem Profil als Tierhandlung oder -klinik und präsentieren damit spezielle Produktpaletten und Angebote.

In diesem Projekt habe ich das Frontend der Applikation entwickelt und ein CMS zur Redaktion der Standorte angelegt.

2011 - 2013

Bacardi Rezepteberater

In einigen Großmärkten unterhält Bacardi Deutschland einen aufwändiges Gondelkopf-Regal. Um die Aufmerksamkeit der Kunden auf sich zu lenken enthält das Regal drei Bildschirme. Zwei spielen Videos ab. Der Dritte enthält eine html5 Applikation die über die Produkte von Bacardi informiert und zu den Produkten Cocktailrezepte vorschlägt. Die Zutatenliste und die Rezepte können gedruckt werden um dem Kunden eine Erinnerung in die Hand zu geben, welche Produkte er kaufen könnte. Die Applikation wird jährlich überarbeitet und sowohl an das Corporate Design der Firma angepasst, als auch um die Produktinformationen zu aktualisieren.

Drucksachen

2012 - 2013

Anzeigenserie für die gekartel AG

In 6 Ausgaben der Fachzeitschrift POS.kompakt schaltet die Firma gekartel AG Anzeigen und Artikel. Die Anzeigen sprechen jeweils aktuelle Themen an und besitzen einen hohen Wiedererkennungswert.

Webseiten als selbstständiger Webentwickler

2012 - 2013

pos-player.de

Microsite der gekartel AG zum Verkauf ihrer Mediaplayer

Diese auf Drupal6 entwickelte Microsite hat zum Ziel den leicht erklärbaren Teil des Produktangebotes der gekartel AG international zu vermarkten. POS-Player.de ist dazu auf 8 Sprachen erreichbar. Je nach Browsereinstellung des Webseitennutzers wird die passende Sprache vorausgewählt.
2010 - 2011

Tierhalterclub

Der Tierhalterclub Deutschland e.V. unterhält mit tierhalterclub.de ein Communityportal, das Tierhalter mit -Ärzten, -Pflegeheimen, Hundeschulen, Reitställen und weiteren Unternehmen vermitteln möchte. Im Team der Entwickler habe ich sowohl Drupalmodule installiert und konfiguriert, als auch das CSS der Webseite geschrieben.
2010 - 2013

kuma-um.de

Für die Oberton-Weltmusik-Improvisationsband Kuma-Um habe ich die Website kuma-um.de entworfen und umgesetzt. Wichtig war neben der leichten Redaktion des Veranstaltungskalenders auch das intuitive Einbinden von Musik- und Videoplayern.
2010 - 2011

TU-Freiberg

Für die TU-Freiberg habe ich an den Seiten tu-freiberg.de Anpassungen vorgenommen. Das Layout wurde behutsam überarbeitet. Der Terminkalender kam hinzu. Er wird aus den Eintragungen der einzelnen Fachbereiche gespeist.
Die besondere Schwierigkeit des Projekts war die umfangreiche Verwaltungsstruktur der Universität und das damit notwendige detailierte Rechtemanagement.
2010 - 2011

Jonglieren-dresden.de

In Dresden gibt es über 100 Jongleure. Von Jonglage mit Keulen und Ringen über Feuerstäbe bis zur Akrobatik ist alles vertreten. Mit jonglieren-dresden.de habe ich ihnen eine Webseite als zentraler Anlaufpunkt für Interessierte gebaut. Es werden Treffpunkte und Hallenzeiten gelistet. Die Dresdner Jonglierconvention wird über diese Seite vermarktet.
2010

duo-fuego.de

Das Duo Fuego sind zwei Jongleure und Clowns aus Dresden, die gern auch ihre Firmengäste unterhalten möchten. Unter duofuego.de finden Sie einen Überblick über das Angebot des Duos und Kontaktinformationen.
2008 - 2009

qad-dresden.de

Firmenpräsentation der QAD

Für die Qualifizierungs- und Ausbildungsförderungsgesellschaft Dresden habe ich eine Firmenpräsentation in Drupal aufgebaut. Die Firma hatte etwa 500 Mitarbeiter und komplexe Strukturen. Die Bereichsleiter konnten über die Website ihren Bereich vorstellen und Neuigkeiten veröffentlichen.