Kollektiv25 Fotografenkollektiv online

Seit 01.Februar ist nun die von mir gestaltete und realisierte Website kollektiv25.de online.

Mehr als 1700 Besucher aus mehr als 45 Ländern haben die Internetseite bereits in den ersten Tagen besucht. Über Social-Networks wie eine Facebook-Seite und Twitter können sich Interessierte über die Aktivitäten des Kollektiv25 auf dem Laufenden halten.

Das neu gegründete Kollektiv25 – bestehend aus den Fotografen Florian Manz, Lene Münch, Julius Schrank und Lucas Wahl – hat sich der journalistischen Fotografie verschrieben. Die vier Fotografen aus Bremen, Berlin, Hannover und Frankfurt möchten mit ihren Bildern Geschichten erzählen. Der Fokus liegt dabei auf sorgfältig recherchierten Themen, die sowohl visuell als auch inhaltlich eine hohe Qualität aufweisen. Sie möchten Hintergründe erfragen, sie verstehen und ihre eigene Sicht auf die Dinge zeigen.

Die entstandene Website ist, wie das von mir zu erwarten ist, natürlich in WordPress realisiert und mein erster Kontakt zu einem WordPress-Theme-Framework. Ich habe mich für Thematic als Grundgerüst entschieden.

Thematic

Ich habe mich für das Framework Thematic entschieden da es mir durch eine ganze Reihe an vorbereiteten Features einiges an Arbeit bei der Umsetzung abgenommen hat.

  • Ein angenehmes bereits integriertes jQuery Flyout-Menu
  • Sinnvoll vorbeitete Sidebars (auch wenn Kollektiv25 kaum welche braucht)
  • Eine wunderbar angenehme CSS-Browser & Co Weiche. So werden dem Body-Tag einfach eine Reihe an Klassen wie der verwendete Browser, Benutzerlevel u.ä. angehängt
  • Fast alles ist in einer einzigen Functions.php einzustellen
  • Sehr schön verteilte detaillierte CSS-Klassen in den einzelnen Templates

Ein ganz gewöhnliches WordPress Theme umzustricken kam für mich einfach nicht in Frage. Dazu war das was ich mit Kollektiv25.de vorhatte zu speziell um einfach was von der Stange zu nehmen und ein bissel anzupassen. Aber das Rad wiedermal mit einem ganz neuen Theme von Anfang an neu zu erfinden – das war mir auch wieder zu mühsam.

PDF-Funktion: TCPDF

Wenn man sich ein bissel auf der Website umschaut, bemerkt man vielleicht daß zu jeder Geschichte ein PDF heruntergeladen werden kann. Sowas kann man natürlich ganz herkömmlich per Hand im Layoutprogramm der Wahl selbst erstellen hochladen und einfach zum Download anbieten, doch man muß sich ja auch nicht zu sehr quälen und die Fotos samt Bildunterschriften sind ja im CMS alle schon ordentlich abgelegt. Mit TCPDF existiert auch bereits eine stabile Open-Source PHP-PDF-Klasse die man nur noch mit den WordPress-Daten verknüpfen muß.

Vorteile

  • Garantierte konsistente Anwendung des Corporate-Designs, da ein klares einfaches und festes Template das Design des PDFs bestimmt
  • Die Fotografen müssen nicht eine Online- und eine PDF-Version separat pflegen (noch dazu in 2 Sprachen)

Natürlich war es nicht so ganz trivial umzusetzen was schon schlicht die Verbindung von WordPress, dem NextGenGallery Plugin von WordPress und TCPDF selbst geht. Auch hat sich wiedermal gezeigt, daß Umlaute immer noch gern Probleme im Web machen. Aber TCPDF erstellt immerhin recht ordentliche PDFfe (wenn man das mal mit OpenOffice und Co vergleicht) und sogar das Einbinden eines Vektorlogos klappt.

WordPress Plugin 1: Mehrsprachigkeit

WordPress ist von Haus aus nicht in der Lage mehrsprachige Websites zu liefern, aber auch wenn Mehrsprachigkeit immer doppelte Arbeit bedeutet, habe ich mit qTranslate auch auf lenemuench.de schon ganz gute Erfahrungen gemacht. Ich habe nahezu alle WordPress-Plugins zu dem Thema immer wieder auf’s neue ausprobiert, doch irgendwie zicken die schnell rum, machen mit anderen Plugins Probleme, oder man verzweifelt weil irgendwo im Theme ein Textschnipsel dann doch wieder nicht übersetzt werden kann.

WordPress Plugin 2: Fotogalerie

Natürlich ist bei einem Fotografenkollektiv die Verwaltung der Fotos der wichtigste Punkt schlechthin. Auf meinem eigenen Portfolio nutze ich Slideshowpro zusammen mit dem Slideshowpro Director als eigenes Bild-CMS. Eine wunderbare nahezu perfekte Lösung. Doch zum einen ist das nicht kostenlos als Open-Source zu haben und zum anderen ist es zwar machbar mit Slideshowpro Director klassisch ohne Flash die Bilder via PHP als HTML auszugeben, aber naja ich hatte damals vermutet, daß das aufwendiger werden würde.

So hab ich mir Nextgen Gallery mal angeschaut. Sicherlich DAS Bild-Plugin für WordPress schlechthin, und naja schlecht ist das auf jedenfall nicht. Im Nachinein hätt’ ich aber lieber doch auf Slideshowpro-Director zurückgegriffen denn die Templates für Nextgen-Gallery zu programmieren war nach anfänglichem flotten Fortschritten eine ziemliche Qual. Ob’s mit Slideshowpro wirklich einfacher gewesen wär weiß ich natürlich auch nicht…

Foto-Slideshow: Coda Slider

Ich hab mich eine ganze Weile im Web umgetan um eine sinnvolle Foto-Slideshow zu finden mit der man per Javascript die Bilder zeigen kann und ich muß schon sagen, trotz abertausend verschiedener Lösungen gibt’s echt enorm viel Misst.

Anforderung 1: Die Bilder sollten vorgeladen werden
Damit man flott und ohne unheimlich nervige Wartepausen durch die Bilder klicken kann, sollten die Bilder vorgeladen werden (oder einfach schon geladen sein). Erstaunlich wieviele Slideshows die Bilder erst nach einem Weiter-Klick anfangen zu laden. Das mag bei gigantischem Traffic wichtig sein, ist aber für den Besucher eine Zumutung.

Anforderung 2: schlicht und schlank
Ne Slideshow soll einfach ein Bild durch das andere austauschen und evtl. noch etwas Text darstellen mehr nicht eine klassische Form-Follows-Funktion Anforderung. Auch da war ich sehr erstaunt was da teils an Feature-Itis so geboten wird. Das überfordert nicht nur mich in der Programmierung sondern auch den Besucher der Website der sich eigentlich auf die Bilder konzentrieren wollte.

Anforderung 3: Flüssige Bewegung
Es wäre auch eine schöne Überblendung oder ähnliches denkbar gewesen. Wichtig war mir daß eine flotte flüssige natürliche Animation die Bilder tauscht. Auch hier gilt wieder “Die Funktion steht im Vordergrund”. Die Animation sollte einfach nur ein angenehmes haptisches Feedback an den Besucher zurück geben. Die Animation selbst sollte nie der Hauptdarsteller weden und sich all zu sehr in den Vordergrund drängen.

Anforderung 4: Wie schaut’s ohne Javascript aus
Natürlich sollte die Geschichte auch ohne eingeschaltetes Javascript einigermaßen funktionieren.

Meine Wahl: Coda Slider
Der Coda-Slider der seinen Namen von der Website meines Programmier-Werkzeugs Coda trägt passte da wunderbar rein.

Performance

Da auf Kollektiv25.de doch ein bissel was an Javascript und ne ganze Menge CSS zusammenkommt hab ich mich umgeschaut wie man zur Performance-Steigerung die Sache etwas optimieren kann. Ich habe Minify eingesetzt das wunderbar geeignet war.

Zum einen kombiniert Minify mehrere CSS- oder Javascript-Files zu einer einzelnen Datei um die Anzahl der zu ladenden Dateien (und damit der HTTP-Requests) zu verringen, und zum anderen werden die Dateien automatisch live per PHP komprimiert.

Das hat der Website schon auf meiner Testumgebung deutlich den Trägheits-Zahn gezogen, und ich konnte weiter mit einzelnen Dateien arbeiten. Es macht einfach keinen Sinn mit Frameworks wie Thematic zu arbeiten um dann die Browser-Reset-CSS und die Basis-Layout-CSS u.ä. alle wieder in eine zusammenzuschieben. Beim nächsten Release des Frameworks müsste ich dann alles wieder auseinander klöppeln und schauen was geändert wurde. Das gleiche gilt natürlich für die jQuery Plugins.