Webprojekt-Referenzen auf der eigenen Website zeigen, ist ein schwieriges Thema.
Webprojekte sind ja kein abgeschlossenes Produkt (auch wenn viele Kunden genau mit dieser Vorstellung an uns herantreten), sondern "leben" - sie sind einem ständigen Wandel unterzogen, und oft ist der Zeitpunkt des "Launches" der Website vielleicht der Abschluss eines Projekts, aber keinesfalls der Abschluss der Arbeit an der Site.
Von daher können Bilder von Websites immer nur einen Zustand zu einem bestimmten Zeitpunkt darstellen. Und auch wenn wir zum Glück den Großteil unserer Kunden auch nach dem Launch ihrer Website begleiten, wird sich die Site verändern, inhaltlich, funktional und vielleicht auch gestalterisch.
Trotzdem möchte man ja zeigen, was man geleistet hat, und im Tagesgeschäft hat man nicht die Zeit, zu jedem Projekte eine Case-Study zu schreiben, von daher führt weiterhin kein Weg daran vorbei, irgendwie Bilder von Websites zu zeigen, auch wenn es nur die Spitze des Eisbergs der eigentlichen Arbeit zeigt.
Schwierig ist auch, die Balance zu finden zwischen zu zeigen, was man kann, auf die Gefahr hin, immer nur neue Aufträge zu bekommen, die genau in dieser Kompetenz aufschlagen, und/oder zu zeigen, was man gerne vermehrt tun würde - hierzu aber nicht genug Referenzen hat, weil es soll/wird ja erst kommen.
Dieses "Dress for the Job you want" Ding ist nicht zu unterschätzen und auch ein Grund, warum wir nicht mehr jedes - sei es noch so tolle - Projekt auflisten.
Dann gibt es auch den Fall, dass man nach einer längeren Zeit der guten Zusammenarbeit getrennte Wege geht, das eigentliche Projekt aber immer noch etwas ist, auf das man stolz ist, die mittlerweile online erreichbare Site aber nichts mehr mit der eigenen Arbeit zu tun hat.
Für diesen Fall haben wir uns nun eine neue Darstellung überlegt; wir zeigen die "veralteten" Referenzen in einer eigenen Ansicht, verlinken diese aber nicht mehr wie bei den aktuellen Referenzen auf die Webadresse, sondern zeigen nur noch unser Bild. Als kleines Gimmick haben wir noch eingebaut, dass in Browsern, die CSS3 filter verstehen, die Bilder immer mehr vergilben, je weiter das Ende des Projekts in der Vergangenheit liegt.
🤓 Nerdalert
Für die "Vergilbung" der Referenzen sorgt ein "data-age" Attribut, welches im Template mit der Differenz der Jahreszahl von "heute" und dem Projektende, multipliziert mit zehn, gefüllt wird. Im CSS checken wir auf dieses Attribut und setzen mit filter: sepia(xx%); den Prozenzwert des "Gilbs" entsprechend, wobei wir den maximalen Effekt ab einer Differenz von 5 Jahren setzen und ihn in 20% Abstufungen reduzieren pro Jahr näher an heute:
...
.item[data-age="50"] img {
filter: sepia(100%);
}
.item[data-age="40"] img {
filter: sepia(80%);
}
...Anschauen kann man sich das unter unseren Referenzen, wenn man ganz nach unten scrollt und einen Browser nutzt, der CSS Filter Effects versteht.