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

Eine praktikable, kostengünstige und innovative Lösung war gefragt. Innerhalb kürzester Zeit konnten wir diesen Anforderungen gerecht werden.

Aufgabenstellung

Entwickeln Sie eine Webseite, die innerhalb weniger Wochen online gestellt werden kann und die wichtigsten Informationen zur Kanzlei liefert.

Ansatz

Eine Startseite, die einen Kurzüberblick über die Themen gibt und eine insgesamt scrollbalken-freie Webseite verschaffen perfekten Informationsfluß.

Lösung

Eine halbdynamische Webseite, die an das sophiadesigns/cms angebunden ist und leicht aufzusetzen war, gekoppelt mit schlichtem, aber funktionalem Design und einer innovativen Startseite um den Einstieg in die Informationsinhalte zu erleichtern, erleichterten die kostengünstige und zeitnahe Umsetzung der Anforderungen.

Aufgabenstellung

Entwickeln Sie eine Weblösung mit dessen Hilfe es Heer & Werz möglich ist die Produktpalette über einen weiteren Vertriebskanal zu publizieren und zugleich einen Mehrwert für Kunden zu schaffen, sowie den Pflegeaufwand durch automatisierte Wandlung des Artikelstamms aus der Datenbank in druckfertige PDF-Dokumente zu verringern.

Ansatz

Spiegelung der firmen-internen Datenbank auf einen Webserver. Dort werden die Artikeldaten dem Mitarbeiter von Heer & Werz zur weiteren Verarbeitung und Gestaltung zugänglich gemacht. Täglicher automatischer Abgleich von relevanten Daten, wie z.b. tagesaktuellen Preisen.

Lösung

Die firmen-interne Artikel-Datenbank von Heer & Werz wird einmal täglich auf den Sophiadesigns Webserver hochgeladen und dort in die Datenbank überführt. Im weiteren Prozess werden Preise, Artikel-Beschreibungen und weitere Stammdaten automatisiert miteinander abgeglichen und der finale Datensatz in die Live-Datenbank der Webseite integriert. So arbeiten Mitarbeiter sowohl im Warenwirtschaftssystem von Heer & Werz als auch online stets mit den selben Daten.

Die Publikation der Produkt-Palette auf der Webseite schafft für Kunden von Heer & Werz dahingehend einen Mehrwert, dass Projekte direkt auf der Webseite von Heer & Werz unkompliziert und mit tages-aktuellen Daten kalkuliert werden können. Waren- oder Bestelllisten können ausgedruckt oder zwischengespeichert werden. Kunden haben umfassende Möglichkeiten sich über Neuigkeiten aus der Branche, Sonder-Aktionen und weiteres zu informieren.

Aus den Daten der Live-Datenbank können zudem auf Anfrage PDF-Dokumente zur Publikation als Print-Katalog angelegt und heruntergeladen werden, sowie an Druckereien versendet werden.

Aufgabenstellung

Entwickeln Sie eine Webseite, bei der die Anwendungsbereiche der Produkte im Vordergrund stehen und der Anwender am Ende multimedial die verschiedenen Bereiche erkunden kann. Darüber soll der Anwender ein tieferes Verständnis für die Relevanz der Fahrzeugkomponenten erhalten und sich stärker mit dem Produkt identifizieren.

Für den B2B-Kunden soll die Webseite einen schnellen Überblick über die wichtigsten Informationen ermöglichen und gleichzeitig über die zentrale Stellung des Produkts im Gesamtbild einen schnellen, tiefen und gegenüber dem normalen Benutzer technischeren Einstieg ermöglichen.

Screendesign Startseite #1

Screendesign Startseite #2

Screendesign Startseite #3

Screendesign Startseite #4

Mit dem Projekt Heer & Werz nahmen wir am Wettbewerb im Jahr 2009 teil mit dem Arbeitstitel “vom Datensatz des Warenwirtschaftssystems zum Printkatalog und online Bedarfskalkulation für Kunden eines Baustoffhändlers”.

Leider konnten wir das Treppchen nicht erreichen, die Teilnahme an unserem ersten fachbezogenen Wettbewerb war jedoch trotzdem spannend. Und so blicken wir mit Zuversicht auf weitere spannende Wettbewerbe frohgemut in die Zukunft.