bauer & bauer medienbüro
www.headwork.de Manufaktur für interaktive Medien [ seit 1993 ]

8. Jul 14

Relaunch unserer Homepage headwork.de

Die neue Homepage ist da und bringt neben einem neuen Screendesign auch einige technische Schmankerl. Doch zunächst zum gestalterischen Konzept.

Eine Seite reicht

Im Vergleich zur alten Homepage wurde der Inhalt komplett überarbeitet und stark verkürzt. Dafür sind nun Infos zu aktuellen Projekten etwas ausführlicher repräsentiert. In schwebenden „Projektkugeln" die nach dem Laden der Seite in Bewegung geraten und dem Mauszeiger folgen werden Links auf Kurzbeschreibungen angezeigt. Ein spielerisches Moment, das auf Basis zeitgemäßer HTML5- Technik beruht. Auf dem tablet läßt sich die Bewegung der Kugel mit der Neigung des Geräts steuern.

Der Hintergrund der „Projektkugeln" wird als Canvasobjekt nach dem Laden der Seite im Browser des Clients über einen Zufallsalgorithmus berechnet.

Was ist das besondere am Canvas-Hintergrund?

Die Grafik wird programmatisch auf Clientseite erstellt, es muss keine mehrere hundert Kilobyte große Grafikdatei geladen werden, das Pattern wird stattdessen in einer belieeigen Größe durch Javascript-Code gerendert. Man tauscht praktisch den Datenbedarf gegen Rechenleistung auf Anwenderseite ein. Die Grafik wird zufällig generiert, sieht bei jedem Seitenaufruf anders aus. damit sind Überraschungs-/Personalisierungselemente möglich. Der Hintergrund könnte auch während der Verwendung der Seite neu gezeichnet werden und auf nutzerdefinierte Aktionen eingehen (Färbung/Größe etc.).

Mobil durch responsive Design

Die neue Seite ist auf Basis eines responsive Designs entwickelt. Die Darstellung wird je nach Endgerät angepasst. Dies geschieht über sogenannte Mediaqueries, die die Bildschirmauflösung des Endgeräts abfragen und die Anzeige der Seite entsprechend adaptiert. Für die optimale Darstellung der Grafikelmente auch im Hinblick auf leistungsfähige hochauflösende Displays haben wir Vektorgrafiken verwendet.

Vorteile von Vektorgrafiken

Vektorgrafiken sind unabhängig von der Bildschirmauflösung, sie werden immer scharf dargestellt, gerade auf Geräten mit hoher Pixeldichte (z. B. Retina-Displays) ohne zusätzliche Dateiversionen in höherer Auflösung bereithalten zu müssen. Die Dateigröße ist wesentlich kleiner als bei Pixelgrafiken und bleibt gering bei beliebig großer Anzeige. Vektorgrafiken können über einfache Codeänderungen manipuliert werden z.B. können Icons per CSS-Styleangaben eingefärbt werden, ohne eine weitere Datei produzieren und laden zu müssen. Vektorgrafiken können direkt im HTML/CSS als Codebestandteil eingebettet werden, es muss keine externe Datei aufgerufen werden, die Anfragemenge an den Server sinkt somit, was die Ladezeiten gerade für Smartphones verkürzt.

20 Jahre bauer & bauer medienbüro

Leuchturmprojekte aus zwanzig Jahren Manufaktur für interaktive Medien werden in einer interaktiven Zeitleiste präsentiert. Die ganze Bandbreite unseres Schaffens über zwei Jahrzehnte zeigt sich in Multimediainstallationen, CD-ROM-Produktionen, interaktivem Fernsehen bis hin zu aktuellen Webprojekten. Die Animation läuft auch problemlos auf mobilen Endgeräten.

Nun aber viel Spaß beim Hineinrufen in unsere neue Homepage: www.headwork.de

  • manufaktur für interaktive medien
  • responsive design