Kunden

Referenzen

Referenzen · Entwürfe · Wettbewerbe

EIGHT GmbH & Co. KG

Multi-Plattform-Freundlichkeit durch den Einsatz von Javascript und AJAX. Innovative Menuführung und explorative Content-Vermittlung. Haben Sie Interesse an einer ähnlichen Weblösung? Kontaktieren Sie uns unverbindlich!

Aufgabenstellung

Entwickeln Sie eine Webseite, die durch hohe Interaktivität den Nutzer zum “Spielen und Entdecken” einlädt und auf möglichst vielen Endgeräten funktioniert. Dazu zählen insbesondere die iDevices von Apple (iPod, iPhone und iPad), sowie weitere Tablet-Computer.

Ansatz

Statt auf Flash setzen wir auf eine Kombination aus HTML und Javascript. Diese Variante erfordert gegenüber Flash zwar einen enormen Test-Aufwand, zahlt sich aber für den Kunden aus. Die viel größere Bandbreite an Endgeräten ermöglichst es den potenziellen Endkunden in diversen Lebenslagen anzusprechen und zu informieren.

Lösung

Ausgehend von den PSD-Vorlagen und einem kurzen Video, welche durch Panama zur Verfügung gestellt wurden, begannen wir die technische Entwicklung.

Logo-Animation

Das zentralste interaktive Element ist das Logo auf der Startseite. Klickt der Besucher dieses an, rotiert es an den linken Bildschirmrand, woraufhin der aufgerufene Inhalt angezeigt wird.

Diese Rotation basiert auf einer einfachen mathematischen Formel, mittels derer die Geschwindigkeit und Art der Rotation an unterschiedliche Bildschirmgrößen angepasst werden muss. Die korrekte Flugbahn für verschiedene Browser und Bildschirmgrößen zu entwerfen nahm einige Zeit in Anspruch.

Im Verlaufe dieses Prozess stellte sich heraus, dass der Internet Explorer die Bewegung nicht unterstützen würde. Bei diesem entfällt der Effekt, ohne dass der Nutzer sonstige Einschränkungen erlebt.

Fade-in / fade-out-Effekt

Da die Webseite visuell nicht wäre, was sie ist, wenn nach Beendigung der Logo-Animation die Seite neu geladen würde, mussten wir uns eine Lösung einfallen lassen, um den gewünschten Inhalt direkt nach Beendigung der Logo-Animation einzublenden. Das konnte mit verschiedenen Javascript-Bibliotheken, wie z.B. jQuery, realisiert werden. Mit dieser Technologie wird der neue Inhalt im Hintergrund nachgeschoben ohne dass ein echter Seiten-Reload statt findet und die visuelle Erfahrung unterbricht.

Deeplinking

Da die Seite nicht neu geladen wird, wird auch keine neue URL generiert. Sprich wenn der Besucher auf Unterseite http://eight.eu/point.one/funktionsweise.html angekommen ist, würde in der Adress-Zeile zunächst nur http://eight.eu# angezeigt werden. Um Deeplinking auf die Unterseiten zu ermöglichen, mussten wir ein Script entwickeln, das die URL nachbildet und in der Adresszeile des Browsers anzeigt.

History-Funktion

Aus dem selben Grund, eben weil tatsächlich keine neue URL entsteht, speichert der Browser diese auch nicht intern als vorhergehende Seite. Daher kann der Benutzer die Vor- und Zurück-Buttons in seinem Browser nicht verwenden. Wir mussten also ein History-Script entwickeln, das anstelle des Browsers die vorhergehende Seite, sprich den Navigationspfad des Benutzers auf der Seite, speichert und dem Browser zur Verfügung stellt. Dieses Problem stellt sich regelmäßig auch bei der Entwicklung mit Flash, kann allerdings auch dort gelöst werden.

Point.One Reel

Um das Produkt Point.One in Szene zu setzen verwendeten wir das jQuery-Plugin Reel und passten es für unsere Bedürfnisse an.

Eine besondere Herausforderung stellte dabei die Größe der Einzelbilder dar. Um eine Animation über 2 Sekunden flüssig abzuspielen, benötigen wir ca. 50 Einzelbilder. Diese wurden durch LAVA, welche Point.One mitentwickelt haben, gerendert und von uns zusammen gesetzt. Heraus kommt ein etwa 3MB großes Bild, das schon beim Betreten der Webseite im Hintergrund geladen wird, um gegebenenfalls zur Verfügung zu stehen.

Darüber hinaus ist die Drehung des Produkts sowohl über einen Button “360° Ansicht” startbar als auch mit den Dots unterhalb des Produkts verknüpft.

Hauptmenü auf den Inhaltsseiten

Das standardmäßig ausgeblendete Hauptmenü auf den Inhaltsseiten wird aktiviert, indem der Benutzer mit der Maus über den linken Bereich fährt. Um deutlich zu machen, dass das Logo von EIGHT zurück auf die Homepage führt (mitsamt Rückabwicklung der Animation) wurde die Einfärbung mit Javascript animiert (kein Flash, kein GIF).

Schriften über webfonts.fonts.com

Die Schriften werden über webfonts.fonts.com eingespielt. Grundsätzlich bieten Browser nur eine sehr geringe Bandbreite an Schriften von Haus aus an, nämlich die, die auf jedem Computer installiert sind (z.B. Arial). Will man eigene Fonts oder welche von Drittanbietern benutzen, muss man auf spezielle Lösungen zurückgreifen. Wir haben uns nach langem Probieren mit den unterschiedlichsten Varianten für webfonts.fonts.com entschieden.

SEO / Suchmaschinenoptimierung

Suchmaschinenoptimierung ist ein besonders wichtiger Gesichtspunkt gewesen. Da die URLs nachgebildet werden, konnte Google die Seite vollumfänglich indizieren. Die Meta-Daten der einzelnen Dokumente werden per XML-Datei jeweils neu in den Header eingespielt. Eine umfangreiche Onpage-Optimierung hat dazu beigetragen, dass die Seite nur 4 Monate nach Release für das Keyword “eight” auf Platz 1 steht (vor z.B. After Eight).

Galerie unter “Design+Technologie”

Für “Design+Technologie” und die Untermenüs haben wir einen besonders schönen Effekt entwickelt. Je nach Klick skaliert ein Bild auf maximale Größe und ein erklärender Text wird eingeblendet.

Hotspots zur explorativen Content-Vermittlung

In den Untermenüs von “Point.One” werden verschiedene Aspekte des Produkts über bildliche Darstellungen und erklärende Texte erläutert. Dafür muss der Benutzer mit der Maus über die sog. Hotspots fahren und blendet damit ergänzende Grafiken ein. Bei Geräten, die eine Touch-Oberfläche besitzen, können die Hotspots einfach angetippt werden.

Ergebnis

Das Ergebnis ist eine begeisternde Weblösung. Selbst gestandene Werber konnten nicht glauben, dass sowas mit Javascript möglich sein sollte – sie wurden eines besseren belehrt. Schlussendlich wird nur IE6/7 nicht unterstützt. Benutzer älterer Browser erhalten eine Warnung, dass sie ihren Browser updaten sollten (http://browser-update.org).



Von in Referenzen mit Kommentare deaktiviert