Seit 01.Februar ist nun die von mir gestal­tete und rea­li­sierte Web­site kollektiv25.de online.

Mehr als 1700 Besu­cher aus mehr als 45 Län­dern haben die Inter­net­seite bereits in den ers­ten Tagen besucht. Über Social-Networks wie eine Facebook-Seite und Twit­ter kön­nen sich Inter­es­sierte über die Akti­vi­tä­ten des Kollektiv25 auf dem Lau­fen­den halten.

Das neu gegrün­dete Kollektiv25 – beste­hend aus den Foto­gra­fen Flo­rian Manz, Lene Münch, Julius Schrank und Lucas Wahl – hat sich der jour­na­lis­ti­schen Foto­gra­fie ver­schrie­ben. Die vier Foto­gra­fen aus Bre­men, Ber­lin, Han­no­ver und Frank­furt möch­ten mit ihren Bil­dern Geschich­ten erzäh­len. Der Fokus liegt dabei auf sorg­fäl­tig recher­chier­ten The­men, die sowohl visu­ell als auch inhalt­lich eine hohe Qua­li­tät auf­wei­sen. Sie möch­ten Hin­ter­gründe erfra­gen, sie ver­ste­hen und ihre eigene Sicht auf die Dinge zei­gen.

Die ent­stan­dene Web­site ist, wie das von mir zu erwar­ten ist, natür­lich in Word­Press rea­li­siert und mein ers­ter Kon­takt zu einem WordPress-Theme-Framework. Ich habe mich für The­ma­tic als Grund­ge­rüst entschieden.

The­ma­tic

Ich habe mich für das Frame­work The­ma­tic ent­schie­den da es mir durch eine ganze Reihe an vor­be­rei­te­ten Fea­tures eini­ges an Arbeit bei der Umset­zung abge­nom­men hat.

• Ein ange­neh­mes bereits inte­grier­tes jQuery Flyout-Menu
• Sinn­voll vor­bei­tete Side­bars (auch wenn Kollektiv25 kaum wel­che braucht)
• Eine wun­der­bar ange­nehme CSS-Browser & Co Wei­che. So wer­den dem Body-Tag ein­fach eine Reihe an Klas­sen wie der ver­wen­dete Brow­ser, Benutz­er­le­vel u.ä. angehängt
• Fast alles ist in einer ein­zi­gen Functions.php einzustellen
• Sehr schön ver­teilte detail­lierte CSS-Klassen in den ein­zel­nen Templates

Ein ganz gewöhn­li­ches Word­Press Theme umzu­stri­cken kam für mich ein­fach nicht in Frage. Dazu war das was ich mit Kollektiv25.de vor­hatte zu spe­zi­ell um ein­fach was von der Stange zu neh­men und ein bis­sel anzu­pas­sen. Aber das Rad wie­der­mal mit einem ganz neuen Theme von Anfang an neu zu erfin­den – das war mir auch wie­der zu mühsam.

PDF-Funktion: TCPDF

Wenn man sich ein bis­sel auf der Web­site umschaut, bemerkt man viel­leicht daß zu jeder Geschichte ein PDF her­un­ter­ge­la­den wer­den kann. Sowas kann man natür­lich ganz her­kömm­lich per Hand im Lay­out­pro­gramm der Wahl selbst erstel­len hoch­la­den und ein­fach zum Down­load anbie­ten, doch man muß sich ja auch nicht zu sehr quä­len und die Fotos samt Bild­un­ter­schrif­ten sind ja im CMS alle schon ordent­lich abge­legt. Mit TCPDF exis­tiert auch bereits eine sta­bile Open-Source PHP-PDF-Klasse die man nur noch mit den WordPress-Daten ver­knüp­fen muß.

Vor­teile

• Garan­tierte kon­sis­tente Anwen­dung des Corporate-Designs, da ein kla­res ein­fa­ches und fes­tes Tem­plate das Design des PDFs bestimmt
• Die Foto­gra­fen müs­sen nicht eine Online– und eine PDF-Version sepa­rat pfle­gen (noch dazu in 2 Sprachen)

Natür­lich war es nicht so ganz tri­vial umzu­set­zen was schon schlicht die Ver­bin­dung von Word­Press, dem Next­Gen­Gal­lery Plu­gin von Word­Press und TCPDF selbst geht. Auch hat sich wie­der­mal gezeigt, daß Umlaute immer noch gern Pro­bleme im Web machen. Aber TCPDF erstellt immer­hin recht ordent­li­che PDFfe (wenn man das mal mit Open­Of­fice und Co ver­gleicht) und sogar das Ein­bin­den eines Vek­tor­lo­gos klappt.

Word­Press Plu­gin 1: Mehrsprachigkeit

Word­Press ist von Haus aus nicht in der Lage mehr­spra­chige Web­sites zu lie­fern, aber auch wenn Mehr­spra­chig­keit immer dop­pelte Arbeit bedeu­tet, habe ich mit qTrans­late auch auf lenemuench.de schon ganz gute Erfah­run­gen gemacht. Ich habe nahezu alle WordPress-Plugins zu dem Thema immer wie­der auf’s neue aus­pro­biert, doch irgend­wie zicken die schnell rum, machen mit ande­ren Plugins Pro­bleme, oder man ver­zwei­felt weil irgendwo im Theme ein Text­schnip­sel dann doch wie­der nicht über­setzt wer­den kann.

Word­Press Plu­gin 2: Fotogalerie

Natür­lich ist bei einem Foto­gra­fen­kol­lek­tiv die Ver­wal­tung der Fotos der wich­tigste Punkt schlecht­hin. Auf mei­nem eige­nen Port­fo­lio nutze ich Sli­de­show­pro zusam­men mit dem Sli­de­show­pro Direc­tor als eige­nes Bild-CMS. Eine wun­der­bare nahezu per­fekte Lösung. Doch zum einen ist das nicht kos­ten­los als Open-Source zu haben und zum ande­ren ist es zwar mach­bar mit Sli­de­show­pro Direc­tor klas­sisch ohne Flash die Bil­der via PHP als HTML aus­zu­ge­ben, aber naja ich hatte damals ver­mu­tet, daß das auf­wen­di­ger wer­den würde.

So hab ich mir Next­gen Gal­lery mal ange­schaut. Sicher­lich DAS Bild-Plugin für Word­Press schlecht­hin, und naja schlecht ist das auf jeden­fall nicht. Im Nachin­ein hätt’ ich aber lie­ber doch auf Slideshowpro-Director zurück­ge­grif­fen denn die Tem­pla­tes für Nextgen-Gallery zu pro­gram­mie­ren war nach anfäng­li­chem flot­ten Fort­schrit­ten eine ziem­li­che Qual. Ob’s mit Sli­de­show­pro wirk­lich ein­fa­cher gewe­sen wär weiß ich natür­lich auch nicht…

Foto-Slideshow: Coda Slider

Ich hab mich eine ganze Weile im Web umge­tan um eine sinn­volle Foto-Slideshow zu fin­den mit der man per Java­script die Bil­der zei­gen kann und ich muß schon sagen, trotz aber­tau­send ver­schie­de­ner Lösun­gen gibt’s echt enorm viel Misst.

Anfor­de­rung 1: Die Bil­der soll­ten vor­ge­la­den wer­den
Damit man flott und ohne unheim­lich ner­vige War­te­pau­sen durch die Bil­der kli­cken kann, soll­ten die Bil­der vor­ge­la­den wer­den (oder ein­fach schon gela­den sein). Erstaun­lich wie­viele Sli­de­shows die Bil­der erst nach einem Weiter-Klick anfan­gen zu laden. Das mag bei gigan­ti­schem Traf­fic wich­tig sein, ist aber für den Besu­cher eine Zumutung.

Anfor­de­rung 2: schlicht und schlank
Ne Sli­de­show soll ein­fach ein Bild durch das andere aus­tau­schen und evtl. noch etwas Text dar­stel­len mehr nicht eine klas­si­sche Form-Follows-Funktion Anfor­de­rung. Auch da war ich sehr erstaunt was da teils an Feature-Itis so gebo­ten wird. Das über­for­dert nicht nur mich in der Pro­gram­mie­rung son­dern auch den Besu­cher der Web­site der sich eigent­lich auf die Bil­der kon­zen­trie­ren wollte.

Anfor­de­rung 3: Flüs­sige Bewe­gung
Es wäre auch eine schöne Über­blen­dung oder ähn­li­ches denk­bar gewe­sen. Wich­tig war mir daß eine flotte flüs­sige natür­li­che Ani­ma­tion die Bil­der tauscht. Auch hier gilt wie­der »Die Funk­tion steht im Vor­der­grund«. Die Ani­ma­tion sollte ein­fach nur ein ange­neh­mes hap­ti­sches Feed­back an den Besu­cher zurück geben. Die Ani­ma­tion selbst sollte nie der Haupt­dar­stel­ler weden und sich all zu sehr in den Vor­der­grund drängen.

Anfor­de­rung 4: Wie schaut’s ohne Java­script aus
Natür­lich sollte die Geschichte auch ohne ein­ge­schal­te­tes Java­script eini­ger­ma­ßen funktionieren.

Meine Wahl: Coda Sli­der
Der Coda-Slider der sei­nen Namen von der Web­site mei­nes Programmier-Werkzeugs Coda trägt passte da wun­der­bar rein.

Per­for­mance

Da auf Kollektiv25.de doch ein bis­sel was an Java­script und ne ganze Menge CSS zusam­men­kommt hab ich mich umge­schaut wie man zur Performance-Steigerung die Sache etwas opti­mie­ren kann. Ich habe Minify ein­ge­setzt das wun­der­bar geeig­net war.

Zum einen kom­bi­niert Minify meh­rere CSS– oder Javascript-Files zu einer ein­zel­nen Datei um die Anzahl der zu laden­den Dateien (und damit der HTTP-Requests) zu ver­rin­gen, und zum ande­ren wer­den die Dateien auto­ma­tisch live per PHP komprimiert.

Das hat der Web­site schon auf mei­ner Test­um­ge­bung deut­lich den Trägheits-Zahn gezo­gen, und ich konnte wei­ter mit ein­zel­nen Dateien arbei­ten. Es macht ein­fach kei­nen Sinn mit Frame­works wie The­ma­tic zu arbei­ten um dann die Browser-Reset-CSS und die Basis-Layout-CSS u.ä. alle wie­der in eine zusam­men­zu­schie­ben. Beim nächs­ten Release des Frame­works müsste ich dann alles wie­der aus­ein­an­der klöp­peln und schauen was geän­dert wurde. Das glei­che gilt natür­lich für die jQuery Plugins.