Timo Clasen 5 min 06.02.2015

Die neue Codeatelier Website

Wie ihr sicherlich bemerkt habt, haben wir eine neue Website. Nicht weil wir zu wenig zu tun haben, sondern weil uns die Alte nicht mehr richtig repräsentiert hat.

Genau wie wir, hat sich auch das Web weiterentwickelt. Immer mehr Geräte, auf denen wir richtig und vor allem auch schnell dargestellt werden wollen. In diesen Bereichen war die alte Seite einfach nicht mehr zeitgemäß.
Die originelle Idee mit dem 2 MB großen Fullscreen-Hero-Bild wurde also gleich wieder verworfen. ;)

Wie wir herangegangen sind?

Zuerst haben wir uns überlegt, für was unsere eigene Website eigentlich da ist. Und nein wir wollen nicht nur unsere tollen Mitarbeiter-Fotos zeigen. :)
Wir haben für uns zwei Zielgruppen ausgemacht:

  1. Potentielle Kunden für Auftragsarbeiten
  2. homee-Nutzer, die mehr über uns erfahren wollen

Als nächstes mussten wir beantworten, was wir den definierten Zielgruppen kommunizieren wollen.

Potentielle Kunden sollen uns als Agentur im Bereich des Internets der Dinge wahrnehmen. Als Dienstleister und Partner bieten wir alles, von der Konzeption bis zur Umsetzung.
homee-Nutzer sollen sehen, wer hinter ihrem digitalen Mitbewohner steckt – und was wir sonst noch so machen.

Konzept

Wir hatten von vornherein das Ziel, eine schlanke, übersichtliche Seite zu entwickeln. Die wichtigsten Infos gibt’s auf der Startseite – direkt mit Kontaktformular falls Interesse geweckt wurde. Für das Team war eine Seite wichtig, auf der jeder kurz vorgestellt wird. Man möchte ja auch mal zeigen können, wo und an was man arbeitet. Das Ganze zu pflegen sollte jedoch kein zu großer Aufwand sein, Ziel ist es ja weiter zu wachsen und neue Mitarbeiter einfach hinzufügen zu können (Dazu aber gleich mehr). Bewerbungen übrigens hier her ;)
Der zweite und letzte Menüpunkt ist der Blog. Bloggen sehen wir als optimales Mittel um die eigene Arbeit zu reflektieren, homee Begeisterte auf dem Laufenden zu halten und unsere Expertise in allen Bereichen zeigen zu können. Wir nehmen uns also vor, regelmäßig Artikel über Details aus Konzept, Design und Programmierung zu schreiben.

Um das Lese-Erlebnis möglichst positiv zu gestalten, werden die wichtigsten Fragen des Lesers sofort beantwortet:

  • Wie heißt der Artikel? (= um was geht es?)
  • Von wann ist der Artikel? (= ich brauche keinen Webdesign Artikel von 1999)
  • Wer hat den Artikel geschrieben? (= Fragen? Feedback?)
  • Wie lange brauche ich ca. zum Lesen? (= lese ich ihn jetzt oder später?)
  • Wem gehört denn der Blog (= was machen die eigentlich?)

Nach dem Artikel kann der Autor (im Moment manuell) andere interessante Artikel für den Leser vorschlagen. Dies soll später durch ein automatisches System ersetzt werden. Wir taggen die Artikel, damit wir dem Leser thematisch passende Posts vorschlagen können.

Umsetzung

Bei zwei Bereichen der Seite war es uns wichtig, einfach Seiten hinzufügen und bereits existierende editieren zu können:

  • Team
  • Blog

Wir mussten unsere Seite also mit einem CMS umsetzten. Aufgrund der schlanken Seite wollten wir aber kein zu großes und für unsere Zwecke übertriebenes CMS einsetzten. Die Wahl fiel auf Kirby. Kirby ist Datei-basiert und arbeitet ohne Datenbank. Es bietet jedoch ein ausreichend zu konfigurierendes Web-Editier-Panel. Mehr als genug findet man darüber in der überaus tollen Kirby-Dokumentation.

Der Blog besteht in Kirby aus einem Ordner „Blog“, mit Unterordnern für jeden Beitrag. In diesen Ordnern befinden sich Textdateien mit Artikelinhalt und Metadaten. Bilder die in den Artikel eingebunden werden sollen, befinden sich ebenfalls im selben Ordner.
Die Logik passiert in zwei Templates – einmal in der Blog-Übersicht und einmal im Blog-Artikel. Das Übersichts-Template schaut nach, wie viele Unterordner (also Artikel) es gibt, stellt jeweils Titel, Metadaten und Vorschau (die ersten 300 Zeichen) dar und verlinkt auf den Artikel. Im Artikel greift das Artikel-Template und holt sich alle Daten aus der Textdatei des Artikels. Hier wird der Textinhalt von Markdown in HTML umgewandelt.
Einen neuen Blog Eintrag hinzuzufügen ist also denkbar einfach. Man erstellt einen neuen Ordner/ eine neue Seite (je nachdem ob man es im Dateisystem oder im Web macht), füllt Felder wie „Titel“, „Autor“, „Datum“ und „Text“ aus und schon hat unser Blog einen neuen Eintrag.

Die Team-Seite funktioniert gleich wie der Blog, nur, dass es keine Detailseiten zu den Mitarbeitern gibt. Das Template holt sich somit einfach alle Informationen aus den Unterordnern der Mitarbeiter. So ist das Hinzufügen, Löschen und Neu-Anordnen ein Kinderspiel.

Die komplette Seite wurde zuerst nur mit HTML und CSS statisch gebaut und anschließend durch Kirby und PHP nach und nach dynamisch gemacht. Teile der Seite, wie der Blog und die Team-Seite sind nun komplett editier- und erweiterbar. Bei anderen Teilen, wie der Startseite sind im Webpanel nur die Texte editierbar.

Ich persönlich habe als Informationsdesigner mit wenig Programmiererfahrung schon lange ein CMS gesucht, mit dem ich extrem einfach, komplett individuelle Designs in CMS Templates umwandeln kann. In Kirby habe ich genau das gefunden <3

Euch Lesern wünschen wir viel Spaß auf unserer neuen Seite und wir freuen uns natürlich riesig, wenn ihr wiederkommt.

Tanja Brodbeck 3 min 10.12.2020

Nachhaltigkeit in der Frontend Entwicklung

In der Frontend Entwicklung ist es wichtig die einzelnen Lebenszyklusphasen eines Softwareprodukts zu analysieren und dabei die Aspekte der Nachhaltigkeit in den Entwicklungsprozess zu integrieren. Mehr dazu könnt ihr im nachfolgenden Beitrag lesen.

Tanja Brodbeck 2 min 07.12.2020

Fragen an das Frontend-Team

Wir haben mit unserem Werkstudent David über seine Arbeit und seine Wertvorstellung als angehender Frontend-Entwickler gesprochen. Seine Antworten dazu könnt ihr in unserem nachfolgenden Beitrag lesen.

Desiree Schneider 2 min 09.06.2016

Entwickeln, Beta-testen, releasen: Das System hinter den homee Updates

Vielleicht haben es einige von euch schon bemerkt, aber nach einer langen Durststrecke ohne regelmäßige Updates haben wir mittlerweile ein funktionierendes System, um euch mit neuen Features und Fehlerbehebungen zu versorgen. Wir haben das Ganze jetzt erstmal ein paar Monate auf seine Umsetzbarkeit getestet und sind heute so weit, euch verbindlich zu informieren:

Katharina Clasen 7 min 27.01.2016

homee 2.0 – Funktionen

Die 2.0 Version eures homees und damit auch neue Versionen aller Apps (Android, iOS und Web) sind da. Ihr habt gespannt darauf gewartet und uns auf dem Weg dorthin mit tollen Ideen und hilfreichem Feedback versorgt. Die wichtigsten neuen Funktionen und Änderungen die dabei entstanden sind möchten wir euch hier vorstellen.

Katharina Clasen 10 min 27.01.2016

homee 2.0 – Der Redesign Prozess

Seit Ende 2014 arbeiten wir an der 2.0 Version unseres homees. Wir überarbeiten den homee Kern aber auch alle Apps. Konzept und Design der Apps war dabei mein Part und ich möchte euch heute einen kleinen Einblick in den Prozess gewähren.