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.