Geschrieben von Christian Schnettelker

Schlagwörter: , , , , ,

Lissat & Voltaxx

Jens Lissat („Erdbeermund“, „Who Is Elvis“…) und Marco Wolters (aka Voltaxx, „Sexy Girl“- Remix für 2raumwohnung, „Sadisfaction“- Remix für Benny Benassi…) arbeiten seit 2006 unter dem Namen „Lissat & Voltaxx“ als DJs, Musikproduzenten und Remixer zusammen.

Ihre Produktionen werden auf Trendlabels wie Toolroom, Great Stuff, 303 Lovers, Hotfingers, Stealth und Spinnin veröffentlicht. Im Laufe der Zeit haben sie zahlreiche Remixe für bekannte Namen wie Roger Sanchez, Tom Novy und Milk & Sugar produziert. Lissat & Voltaxx werden weltweit als DJs gebucht.

Aufgabenstellung

Der Internet-Auftritt sollte aus verschiedenen Gründen, die ich noch nennen werde, neu aufgesetzt werden. Hier ein Screenshot der bisherigen Startseite:

Bisheriger Stand des Weblayouts; Screenshot der lissatandvoltaxx.com vor der Umstellung
Auf den ersten Blick eigentlich schon mal gar nicht so schlecht. Bei näherem Hinsehen finden sich jedoch eine Reihe von verbesserungswürdigen Punkten:

  • Die Seite hat ein festes Seitenlayout, also keine Anpassung für mobile Besucher (Stichwort „Responsive Webdesign“). Gerade im Musikbereich greifen Fans und Kollegen aber gerne zum Smartphone und Tablet.
  • Logo nicht im Kopf der Webseiten (CI), stattdessen eine ganz andere Typo. Dort auch keine direkte Erklärung dessen, um was es bei dieser Seite geht.
  • Einbindung von Social-Media (Twitter, Youtube, Facebook etc.) zwar vorhanden, aber schwer zu finden (klein rechts oben).
  • Eierkopfalarm (nicht korrektes Seitenverhältnis) bei den Bildern im unteren Bereich und auch teilweise bei den Folgebildern im zentralen Slider.
  • Sichtbare Farbstufen bei den Bildern.

Hier sind die kritischen Stellen einmal markiert:

Die von mir kritisierten Elemente im bestehenden Layout, markiert in einem Screenshot
Wenn man sich den Quellcode ansieht:

  • Wenig bis gar nicht für eine gute Positionierung in den Suchmaschinen optimiert: gleicher Titel auf allen Seiten, kein Description-Tag, geringe bis keine h1…h5-Strukturierung, wichtige Schlagwörter (DJ, Producer, Remixer, Techhouse, House etc.) unterrepräsentiert, Bilder in der Regel ohne Title- und Alt-Tag, individuelle 404-Seite fehlt, keine Umleitung in der .htaccess für Aufrufe mit und ohne www. (Stichwort „Duplicate Content“).
  • Statt moderner Webfonts wurden die m.e. veralteten „Cufons“ benutzt, was mit viel Code-Overhead verbunden ist. Zudem gibt es bei Verwendung der „Cufons“ teils Browser-Inkompabilitäten und die Library muss selbsttätig aktualisiert werden.
  • Die Bilder des zentralen Sliders sind GIFs. Warum das? Das GIF-Format hat bei großen Bilder mit vielen Farben fast nur Nachteile: hohe Dateigrößen, lange Ladezeiten, sichtbare Farbübergänge…
  • Anzeigeprobleme beim zentralen Slider, wenn Javascript deaktiviert ist.

Weitere Probleme:

  • Ein Update des Inhalts war nur über das manuelle Editieren der HTML-Dateien und Upload derselben via FTP möglich – nicht sehr benutzerfreundlich und extrem fehleranfällig.
  • Der Bereich „Next Dates“ wurde als Bild angelegt, also für jeden neuen Termin hätte das Bild ausgetauscht werden müssen.
  • Der bisherige Webdesigner scheint das Interesse am Webdesign und / oder der lissatandvoltaxx.com leider verloren zu haben und ist nicht mehr erreichbar.

Das waren alles gute Gründe, die Seiten neu anzulegen.

Mein überarbeitetes Layout

Ich fühlte mich insgesamt angespornt, bei der Neuauflage das Design deutlich zu verbessern und aktueller zu gestalten. Mir war das bisherige Layout etwas zu „ordentlich“, zu brav, alles in Kästchen mit Umrandung, sah ein bisschen wie eine handwerkliche Fleißarbeit Marke „Reiche Rustikal“ aus.

Bei der Umgestaltung wurden die gewählten Farben auf Wunsch der Inhaber größtenteils beibehalten, auch wenn ich den lila-Hintergrund etwas „entschärft“ habe. Hier mein überarbeitetes Layout der Startseite:

Das neue, von mir gestaltete Webdesign
Das Layout ist nun vereinfacht, wirkt m.E. moderner, „clubbiger“, nicht so farbintensiv. Die Seiten habe ich alle vollständig in HTML5 und ausgelagertem CSS neu aufgesetzt. Die Startseite hat dabei zwei Besonderheiten:

  • Der Bildwechsel im Kopf war zwar auch in der alten Seite vorhanden, neu ist die Integration der Social-Media-Buttons rechts unten im Slider; die Buttons bleiben (durch einen höheren z-index) auch während des Bildwechsels sichtbar. Das funktioniert auch, wenn Javascript ausgeschaltet sein sollte, dann findet natürlich kein Bildwechsel statt.
  • Unter der Einführung ist der Twitter-Feed mittels API eingebunden, was der Seite hohe Aktualität verleiht. Hierbei werden die letzten fünf Meldungen auf Twitter automatisch auf der Startseite angezeigt.

Zudem sind einige Nachteile der alten Seite gelöst, zum Beispiel

  • CI-Logo mit Kurzinfo (als Text für die Suchmaschinen) gut sichtbar im Kopf.
  • Einsatz moderner Webfonts, welche direkt über CSS (@font-face) vom gleichen Server geladen werden.
  • Durch die auffälligere Platzierung der Social-Media-Buttons sind diese schnell(er) zu finden.
  • Dates-Info als Text auf der Startseite, knappe Kurzvorstellung von Lissat & Voltaxx direkt unter dem Bildwechsel für Erstbesucher.

Nochmal im Screenshot markiert:

Screenshot des neuen, responsiven Webdesign mit Erklärung der geänderten Elemente
Natürlich habe ich auch kräftig an den für die Suchmaschinen wichtigen Parameter geschraubt und andere technische Daten verbessert.

Responsivität

Wie bereits gesagt war das „Responsive Webdesign“ eine zentrale Aufgabenstellung der Neugestaltung. Ich habe dazu die maximale Breite der Seite von 960 Pixeln in fünf gleichmäßige Spalten zu je 192 Pixeln aufgeteilt:

Layout-Aufteilung in fünf Spalten zur Realisierung des an mobile Endgeräte angepassten Webdesigns
Je kleiner der Bildschirmbereich ist, umso mehr Spalten des Layouts, von rechts angefangen, fallen weg, andere werden ggf. verkleinert. Hier ein Beispiel für die reduzierte Anzeige auf einem Tablet oder kleinerem Notebook, im gleichen Maßstab wie oben, wobei dann nur vier Spalten Platz finden:

Simulation Layout auf einem Tablet
Man sieht, dass einige Bilder rechts weggelassen und die unteren Felder neu angeordnet werden. Zur Verdeutlichung noch die zweit-kleinste Anzeige, welche in etwa der Ansicht auf einem Smartphone entspricht:

Simulation des responsiven Webdesigns auf einem Smartphone
Die Zusatzbilder sind nun komplett verschwunden, das Hauptbild verkleinert und der Bildwechsel entfällt. Das Hauptmenü im Kopf ist zweizeilig, damit die Buttons auch bei Touch-Bedienung noch groß genug sind.

Wenn Sie die Responsivität des neuen Layouts selber testen möchten empfehle ich diesen Link: http://ami.responsivedesign.is/?url=http://www.lissatandvoltaxx.com

Nächster Schritt

Nachdem das neue Layout steht werde ich in einem zweiten Schritt nun die geplanten dynamischen Komponenten einrichten. Die Inhaber der Seite sollen sich einloggen und den Inhalt der Seiten „Dates“, „News“, „Releases“ und „About us“ selbsttätig ändern können, ohne html-Dateien per FTP austauschen zu müssen.

Wahrscheinlich werde ich hier dann wieder Joomla einsetzen, näheres dazu demnächst hier im Blog.

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.