Direkt zur Hauptnavigation dem Inhalt oder zum Seitenfuß.

Responsive & HTML5

Relaunch der Website des Postproduction Studios recom

recom ist eines der renommiertesten ARTWORK/POST- und CGI-STUDIOS Europas mit Büros in Stuttgart, Berlin und London.

Nach dem letzten Launch 2008 der Website haben wir in 2014 die Seite im Frontend überarbeitet und Technik sowie Design an aktuelle Standards angepasst: Großflächige Text- und Bildelemente, die zum einen der Seite eine stärkere Emotionalität verleihen als auch die Bedienung per Touch einfacher machen, prägen jetzt die Website. Die Umstellung von Flash auf HTML5 lässt die Website selbstverständlich auch responsive reagieren und wurde dadurch für die verschiedenen Endgeräte optimiert. Alles in allem eine technische Herausforderung, denn es galt, die über 500 Fotos im Portfolio ohne lange Wartezeiten zu laden und im Layout so anzuordnen, dass sich die im Format sehr unterschiedlichen Bilder sinnvoll und ohne große Zwischenräume einem Mosaik gleich auf der Website anordnen. Das Bilder-Portfolio von recom verfügt zudem über eine Filterfunktion, sodass sichergestellt werden musste, dass auch bei spätererer Aktivierung des Filters die Bilder adäquat angeordnet werden und das erneute Darstellen der Bilder schnell von statten geht.

Kunde
recom GmbH & Co KG
Leistungen
Design & Programmierung
Relaunch
2014
Website
www.recom.de
Recom Website

Die Website des Postproduction Studios recom passt sich an alle Screengrößen und Endgeräte an

Programmierung Portfolio

Eine Herausforderung für die Programmierung: Die adäquate Anordnung von 500 Bild-Elementen ohne lange Ladezeiten zu realisieren,...

Anordnung DOM-Elemente Portfolio

...obwohl diese unterschiedlich in Format und Größe sind.

Filter Portfolio

Das Portfolio lässt sich zudem anhand eines Filters sortieren. Wird der Filter gesetzt, muss die Anordnung der Bilder erneut berechnet werden.

Recom neu

Die Website ermöglicht es dem User, seine eigene Bilder-Kollektion in der Lightbox zusammen zu stellen.

Recom neu

Diese kann aus der Lightbox heraus mittels PDF-Generator exportiert werden...

Recom neu

...und die Zusammenstellung anschließend auch Offline weiter Verwendung finden.

Technische Highlights

Lazy Loading - Laden von 500 Bildern, ohne den Browser zu blockieren

Damit die Website gleich beim Aufruf vollständig sichtbar ist, werden anfänglich nur Text und Layout dargestellt, das Laden der Bilder findet erst statt, wenn der Filter für die 500 Inhalts-Elemente gesetzt wurde. Damit die Website auch während dem „Nachladen“ der Bilder bedienbar bleibt und nicht blockiert ist, werden die Ladevorgänge in einzelne Threats/Timeouts verpackt. Das Laden der Bilder läuft asynchron zum Anordnungs-Algorithmus, sodass trotz dieses sehr rechenintensiven Prozesses die Website ohne Verzögerung nutzbar ist.

Client-seitige Filterung mit PourOver - 500 Bilder nach verschiedenen, sich überschneidenden Kategorien filtern

Da jeder Zugriff auf das DOM (die einzelnen Bilder entsprechen DOM-Elementen) Zeit braucht, wird gleich beim ersten Laden der Seite ein interner Cache aufgebaut, der alle später benötigten DOM-Referenzen der Zugriffslemente (Bilder) speichert. Außerdem werden im Cache zu jedem Element dessen zugeordnete Kategorien hinterlegt, denn diese werden später zum Filtern benötigt. 
Alle folgenden Zugriffe und Interaktionen der Filterlogik auf die Inhalts-Elemente (Bilder) arbeiten ausschließlich mit dem Cache, sodass nicht mehr selbst auf das DOM zurückgegriffen werden muss, was die Performance enorm steigert. 

Mosaik-artige Darstellung der Elemente - 500 Bilder, deren Größe sich ständig verändern kann, anhand von Höhe und Breite anordnen

Beim Laden der Website, bei jeder Änderung der Größe des Browserfensters oder beim Filtern des Portfolios ändert sich der sogenannte Viewport des Browsers und muss neu vermessen werden, die Inhalts-Elemente werden anschließend angeordnet. Die Bilder sind während dem Anordnungsprozess noch nicht geladen (Lazy-Loading), da dies bei der Menge an Bildern entsprechend viel Zeit benötigt. Deswegen werden ihre Dimensionen (Breite x Höhe) als Data-Tag vorher gesendet. Anhand von diesem Data-Tag wird die Größe aller Bilder inklusive deren Texte bestimmt und anschließend alle Elemente auf der Bühne je nach Dimension verteilt. Ein komplexer Algorithmus (http://packery.metafizzy.co/) sorgt dafür, dass sich keine unschönen Lücken zwischen den einzelnen Elementen ergeben. Erst wenn alle Elemente angeordnet sind, werden die Bilder wirklich reingeladen.