renvert.com Logo Druckversion


Rock ’n‘ Jazz, Baby!

Eines meiner liebsten Flash-Projekte erhält ein HTML5 Remake.

[zum Inhalt]
Hintergrundbild

 

Kategorie Website / Relaunch
Launch Juni 2014
Kunde Antonius Grützner, Schlagzeuger und Musiklehrer, Düsseldorf.
Link www.antoniusgruetzner.de
Aufgaben Konzept, Layout, Logo-Entwicklung, HTML5-Umsetzung, ExpressionEngine als CMS, Visitenkarten

 

Video killed the radio star

In diesem Falle sollte es eher heißen: "Mobile killed the ActionScript star" — Smartphones und Tablets haben nach und nach die Internetlandschaft so beeinflusst, dass es fast keine Webseiten mehr gibt, die komplett auf Flash setzen. Ganz vorne weg Apple mit den iOS Geräten, für die Adobe kein Flash-Plugin entwickelte. Steve Jobs wollte ein weitgehend Plugin-freies Internet.
Die Weiterentwicklung des mobilen Flashplayers für Android wurde im August 2012 ebenfalls eingestellt.

Anfang 2007 habe ich für Antonius Grützner eine sehr individuelle Internetseite konzipiert und umgesetzt. Seither gehörte diese Seite zu einem meiner Leblingsprojekte, und ich verweise immer gerne darauf. Zu der Zeit realisierte ich diese noch als Full-Flash-Site.. Damals war das "state-of-the-art". Nun hatte diese Technik ausgedient. Eine auch für Handheld Devices erreichbare Technlogie musste her — aber ohne den Reiz der alten Seite zu mindern:

HTML5 ist das neue Flash

Als 2013, also 5 Jahre nach dem Launch der Flashseite, der Wunsch geäußert wurde, eine HTML-Version der Webseite zu programmieren, war mir direkt klar, dass alle Inhalte — also Sounds, Animationen, die Playerintegration – einfach alles auch mit HTML5 bzw. jQuery umsetzbar wäre.
Dazu wich auch das selbstgestrickte CMS einer Lösung auf Basis von ExpressionEngine.

Das Design

Das Design an sich hat sich durch den Relaunch nicht geändert. Inspiriert wurde ich damals von der zu der Zeit aktuellen O'Neill Website, die ebenfalls eine Full-Flash-Site war. Weniger von der Optik als von der technischen Raffinesse.. Ich war fasziniert von den vielen kleinen versteckten Animationen und der Detailtreue. Diese Inspiration ließ ich in die Seite von Toni einfließen.

Überall sind kleine Anspielungen an den Bandalltag. Alles wirkt sehr handwerklich und etwas "abgeranzt", um ein wenig das Bühnenflair kleiner Clubs zu transportieren. Nichts folgt einer exakten linearen Führung. Der hölzerne Hintergrund symbolisiert die Stage, alle Elemente wirken ein wenig wahllos platziert, mit Masken aufgemalt, mit Gaffa-Tape markiert.

Die Seite in Bildern

Das Ergebnis der Anstrengungen sehen Sie hier:

Antonius Grützner: der Kopfbereich
Antonius Grützner: der feste Kopfbereich mit Soundsteuerung, animierter Fotogalerie und Hauptnavigation. Ein Cookie sorgt dafür, dass – einmal die Musik ausgeschaltet – diese auch beim nächsten Besuch ausbleibt. Das Gleiche gilt für die eingestellte Lautstärke.
Antonius Grützner: Mouseover Effekte auf der Startseite
Auch die vielen reizvollen Mouseover Effekte auf der Startseite konnten ohne Einbußen der Qualität in HTML umgesetzt werden. Die Teaser auf der Startseite sind mit Gaffa-Tape umrandet. Eine Methode, die Musiker oft auf der Bühne verwenden, um Positionen der Bandmitglieder zu markieren.
Antonius Grützner: Der Plattenladen
Antonius Grützner: Die Übersicht der veröffentlichten Platten wurde als Wäscheleine realisiert.
Antonius Grützner: Das Kontaktformular
Selbst das Kontaktformular wurde ganz individuell an das Design angepasst.

Sehen Sie die Liveversion der Webseite hier:
Antonius Grützner: Schlagzeuger

Schreibe einen Kommentar

Folge mir auf twitter

Hinweis: Momentan ist die Geschwindigkeit meiner Website aufgrund eines Serverproblems bei meinem Hosting-Anbieter stark beeinträchtigt.
Ich bitte, diese Unannehmlichkeit zu entschuldigen.


Fenster schließen

Danke fürs Teilen.

Fenster schließen