Clients

References

References · Drafts · Competitions

EIGHT GmbH & Co. KG

Multi-platform-capable by using Javascript and AJAX. Innovative navigation and explorative mediation of the content Are you interested in a similar web development? Get in touch with us!

Task

Develop a website with a high degree of interactivity and thus invites the visitor to “play and explore”. The website has to work on the most devices possible, paricularly iDevices by Apple (iPod, iPhone and iPad), as well with tablet computers.

Approach

Instead of using Abobe Flash, we backed on a combination of HTML und Javascript. This variant results in a higher testing effort, gegenüber Flash zwar einen enormen Test-Aufwand, but the client benefits from the huge range of devices which can display the website.

Solution

Having been supplied with PSD-templates and a short video by Panama, we started the technical development.

Animation of the logo

The most central interactive element is the logo on the landing page. If a visitor clicks on it, it starts rotating on the left of the screen. Afterwards, the chosen content gets displayed.

This rotation is based on a simple mathematic formula which adopts the speed and the nature of the rotation to the different screen sizes. Developing the proper flight path for various browsers took up a lot of time.

Whilst the development process, the fact that the Microsoft Internet Explorer would not provide the movement, emerged. This is why the effect had to be ommitted for the Internet Explorer, but the visitor has no contraint viewing the website.

Fade-in / fade-out-effect

As the website would not visually be what it is, once the animation of the logo has finished and the website woild have to be reloaded, we had to come up with a solution to display the content directly after the end of the logo-animation. This was just possible by using various Javascript libraries like e.g. jQuery. With this technology, the upcoming content gets is being feeded in the background without having a reload of the website which would interrupt the visual experience.

Deeplinking

As there is no reload of the website, no new URL is being generated. So the visitor who is viewing the sub page http://en.eight.eu/#point-one/point-one.html, would at first just see the URL http://en.eight.eu. To allow Deeplinking on the sub pages, we had to develop a script which would emulate the URL which gets displayed in the browser’s address bar.

History function

For the same reason, precisely because there is not actually a new URL created, the browser is not internally saving this site as previous site. Due to this reason, the visitor wouldn’t be able to use the back and forward buttons of the browser. We had to develop a history script which, instead of the browser, saves the previous page, say the navigation path and supplies it to the browser when requested. This problem also occures in the development of Adobe flash websites, but can not be solved.

Point.One Reel

To animate the product Point.One, we used the jQuery-Plugin Reel and adopted it to our needs.

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).



By Sophiadesigns in References with Comments Off