Idee
Die Idee, zusammen ein Projekt zu realisieren, kam ziemlich spontan. Ziel war es, eine Website zu bauen, welche die schönen Lacher der Personen in den Vordergrund stellt. So entschieden wir uns, einen One-Pager zu machen, der etwas über uns als Person sagt und dann Facts auflistet, warum lachen gesund ist und zu guter Letzt zum eigentlichen Teil, den Bildern, übergeht.
Umsetzung
Die Fotos
Die meisten Fotos waren bereits vorhanden - um sie zusammenzutragen brauchten wir aber eine Weile: Das Fotoarchiv ist sehr gross. Wir haben sie dem Thema entsprechend sortiert und gebündelt. Jedes einzelne Bild wurde nochmals neu bearbeitet, damit das Schlussbild der Galerie in sich harmoniert und keine krassen Farbwechsel oder andere Störfaktoren vorhanden sind. Dies machten wir im Adobe Photoshop und teilweise Lightroom.
GIF’s
Altes Material für GIFs bestand keines, deshalb gingen wir raus auf die Piste und liessen Menschen lachen - gar nicht so einfach, als Antihelden in Sache Komik. Wir haben uns in die Menge getummelt und ungeniert die endlich gehobenen Mundwinkel unserer Freunde ausgenutzt. Merci dafür!
Richtige Sequenz auswählen - also da wo das gestellte Lächeln dem natürlichen Lacher aus dem Weg weicht - und Colorgraden (wobei das durch den Datenverlust am Schluss eigentlich "fürd Füchs" war, aber mehr dazu später). Wir arbeiteten im Premiere und erstellen die GIFs im Photoshop.
Website
Wir hatten bereits von Anfang an eine klare Vorstellung, wie die Bilder-Galerie auf der Website aussehen sollte: nämlich im Masonry-Grid. Der Masonry-Grid ist ein Java-Script Grid Layout. Die Elemente, also die Bilder, werden in einer optimalen Position positioniert, ähnlich wie ein Stein, der in eine Wand passt (oder so).
Den Masonry-Grid wollten wir aber noch mit Gif’s aufmischen, damit das Ganze nicht so plump wirkt. Ebenfalls sollte es eine Galerie sein, die nach dem Lazy-Loading Prinzip funktioniert, sprich: Die Bilder werden nach und nach geladen. Es sind also nicht alle Bilder von Anfang an sichtbar, sondern "faden" nach oben.
Das Ganze funktioniert aber auch beim Hochscrollen- dann verschwinden die Bilder, die nicht mehr auf dem Bildschirm sichtbar sind.
Herausforderungen
Die grösste Herausforderung was die Bilder angeht, war, die richtige Grösse / Auflösung zu finden. Wir wollten die Seite natürlich nicht überladen. Besonders bei den GIFs mussten wir leider mit viel Daten- und Qualitätsverlust leben. Die Fotos wiederum konnten wir gut im Datenvolumen reduzieren. Welche Schweissperlen uns die Webseite sonst noch auf die Stirn getrieben hat, steht im unteren Text.
Website
Da niemand von uns mit den beiden Thematiken (also dem Masonry-Grid und dem Lazy-Loading Prinzip) vertraut war, kamen wir um eine gründliche Recherche nicht herum.
Relativ schnell fanden wir eine Lösung für das Grid und probierten diese auch gleich aus. So stand das full-width-dreier-grid relativ schnell und wir waren mit der Darstellung sehr zufrieden. Aber: Es wäre ja zu schön gewesen, wenn es auch beim ersten Mal gleich funktioniert hätte, denn: je mehr Bilder jeweils geladen wurden, desto chaotischer sah die Darstellung aus (die Bilder wurden überlagert dargestellt, der Footer war nicht mehr am Ende der Page, sondern irgendwo in der Mitte).
So mussten wir nochmals Stunden investieren, um nach einer Lösung zu suchen, doch keine schien zu funktionieren. Mal hier eine Funktion mit einem externen js-Script, dann noch eine neue Funktion hier, Funktion da. Teilweise probierten wir sogar externe js-Dateien einzubinden mit eigenen Funktionen. Ohne Erfolg. Nichts schien zu helfen.
Also liessen wir die Website für einen Tag ruhen, da die Nerven blank lagen.
Mit neuem Elan suchten wir nach einer Lösung und fanden irgendwo auf Github ein Forum, wo ähnliche Probleme besprochen wurden. So probierten wir die gebotene Lösung aus und es hatte ENDLICH funktioniert. Die Funktion beinhaltet nun etwas wie: Starte das Masonry Grid, lade alle Bilder und erst dann, wenn alle Bilder geladen sind, initiiere nochmals das Grid. Logisch, oder?
Nachdem also der Grid stand, mussten noch die Lazy-Loading-Problematik gelöst werden. Aber im Internet fanden wir nichts Nützliches (es hatte zwar viele Beispiele, aber keinen Beispielcode. So mussten wir umdenken, wie dieses Feature denn noch genannt werden könnte und fanden eine Lösung namens: Animation on Scroll. Hierzu muss nur ganz wenig JS geschrieben werden und bei den Bildern müssen jeweils einige Parameter mitgegeben werden wie: duration ,start, delay.
Nachem dies bei einigen Bildern eingefügt und getestet wurde, waren wir mit dem Resultat sehr zufrieden und konnten nun alle restlichen Bilder auch noch einfügen.
Fazit
Um ehrlich zu sein haben wir die Arbeit mit der Website etwas unterschätzt. Wir waren der Meinung, eine Website zu programmieren, ginge schnell. Schön wärs. Die Arbeit mit dem Masonry-Grid bereitete uns oft Kopfschmerzen, da es nie so funktionierte wie wir es gerne gehabt hätten. Das Filmen der Gifs und die vielen Fotos durchzukämmen und neu aufzubereiten, war aber eine Freude!
Allen in Allem sind wir mit dem Output mehr als zufrieden und es hat enorm Spass gemacht, das Projekt zu realiseren. Ebenfalls haben wir im Programmieren viel dazu gelernt und das ist schlussendlich die Hauptsache.
