03. Dezember 2013

Making Of: New Sound Studio Studio

Tommy Vetterli, der als Gitarrist für Bands wie Coroner, Kreator und auch Stephan Eicher tätig war, erreichte insbesondere in der Metal-Szene weltweiten Status als Ikone. Heute ist Tommy noch immer als Gitarrist für Coroner und 69 Chambers auf den Bühnen der Welt unterwegs. Seit 2006 führt er aber auch als Produzent das New Sound Studio in Pfäffikon. Dieses zählt wegen seiner Soundqualität zu den besten Aufnahmestudios in Europa.

Bereits 2009 wurde ich zusammen mit meinem ehemaligen Geschäftspartner Christoph Dubach mit der Realisation der Website beauftragt. Das grösstes Manko aus heutiger Sicht stellte die verwendete Flash-Technolgie dar, welche die Nutzung der Site auf Smartphones und Tablets verhinderte. Die Gestaltung mit den Browserfüllenden Fotos des Zürcher Fotografen Oliver Nanzig war nach wie vor attraktiv.

So stand das aktuelle Redesign ganz im Zeichen der Anpassung für mobile Geräte. Eine zusätzliche mobile Site aufzubauen, kam nicht in Frage, da wir nicht zwei Websites parallel unterhalten wollten. Somit war schnell klar, dass die neue Site mit Responsive Webdesign aufgebaut werden würde.

Design

Im Aussehen hat sich die Website gegenüber der von Christoph Dubach gestalteten Version nicht massgeblich verändert. Die Hintergrundfüllenden Bilder habe ich beibehalten und mit dem jQuery Plugin-Klassiker Supersized umgesetzt. Auch das Grundlayout mit den Kästchen für Navigation, Inhalt, Logo und Newsletter-Box blieb praktisch unangetastet.

Die Typografie habe ich allerdings angepasst: Neu kommt die serifenlose JAF Facit von Just Another Foundry via Typekit zum Einsatz. Sämtliche Lauftexte wurden nun für bessere Lesbarkeit in 16px und somit grösser als bisher gesetzt.

Navigation

Die Navigation auf grossen Desktop-Bildschirmen funktioniert wie bei der bisherigen Flash-Website: Ein MouseOver über die Navigationselement blendet den Inhalt aus und gibt die Sicht frei auf das Bild. Damit dies funktioniert, brauchte es etwas JavaScript. Da beim neuen Laden einer Seite die Maus meistens noch über dem geklickten Navigationspunkt liegt und somit gleich wieder ein MouseOver-Event aufgerufen würde, prüfe ich bei der ersten Maus-Bewegung wo die Maus ist und setze die Variable navState entweder auf «default» oder «activated». Ist die Navigation «activated» wird bei einem MouseOver der Inhalt ausgeblendet.


var navState = "default";

var navWidth = $('.site-nav').outerWidth(); 

var navHeight = $('.site-nav').outerHeight();

var navPosition = $('.site-nav').position();

var navR = navPosition.left + navWidth;

var navB = navPosition.top + navHeight;

   

$(document).mousemove(function(e) {

      if ((e.pageX >= navPosition.left) && (e.pageX <= navR) && (e.pageY >= navPosition.top) && (e.pageY <= navB)) {

      // MOUSE IS WITHIN NAVIGATION

              navState = "default";

      } else {

              navState = "activated";

      }

$(document).unbind('mousemove');

});



$('.site-nav').mouseleave(function(){

       if ($(window).width() > 600) {

              $('.main').animate({opacity: 1}, 600);

                     navState = "activated";

      }

});

$('.site-nav a').mouseenter(function(){

      if (($(window).width() > 600) && (navState == "activated")){

              $('.main').animate({opacity: 0}, 600);

                     navState = "hideContent";

      }

});

Die Offscreen Navigation auf einem iPhone

Auf mobilen Geräten habe ich zum ersten Mal Offscreen-Navigation eingesetzt. Wie man diese implementiert, wird in einem vorzüglichen Artikel von David Bushell auf der Smashing Magazine Website erläutert.

Mobile First

Die New Sound Website ist «Mobile First» aufgebaut und somit habe ich hauptsächlich min-width Mediaqueries eingesetzt.

Da ich das Supersized Skript nicht auf Smartphones aufrufen möchte, aber das Bild in optimierter Grösse (600px breit anstatt 1600px) im Header anzeigen möchte, habe ich serverseitig das PHP-Skript «Mobile Detect» eingesetzt. In der Desktop-Ansicht wird das Bild trotzdem in den Header geladen, aber nicht angezeigt. Die selbe Bilddatei wird dann am Dokumentende per Supersized JavaScript geladen. Das hat zwei Vorteile: Wenn das JavaScript aufgerufen wird, ist das Bild mit grosser Wahrscheinlichkeit schon geladen und wenn jemand das Fenster verkleinern sollte, erhält er trotzallem die mobile Ansicht.

Videos und Sound

YouTube Videos: Links mit, rechts ohne fitvids.js

Unter den Referenzen bietet Tommy Vetterli diverse Hörproben und auch Musikvideos an. Diese werden via SoundCloud und via YouTube iFrames eingebunden, was im Handling am einfachsten ist. Bindet man die iFrames nur mit max-width:100%; ein, wird die Höhe der Video-Player nicht angepasst und somit gibt es lästige schwarze Balken. Damit nebst der Breite auch die Höhe des iFrames proportional verändert wird, habe ich das jQuery-Skript «fitvids.js» eingebunden.

Alte Internet Explorer

IE 8. Kein optimales Layout. Deutlicher Update-Hinweis. Aber alle Inhalte zugänglich.

Eine Analyse der Nutzerzahlen via Google Analytics hatte ergeben, dass in den ersten 6 Monaten des Jahres 2013 nur noch 4,5% Prozent mit einem Internet Explorer 8 oder älter auf die Site zugriffen. Tendenz sinkend. Somit erachtete ich es als vertretbar den Nutzern von alten IE's eine abgespeckte Version mit allerdings vollständigem Inhalt zu servieren.

No JavaScript. No Problem.

Auch ohne JavaScript sind alle Inhalte zugänglich.

Die Website ist auch mit deaktivertem JavaScript bedienbar. Das sieht dann zwar nicht mehr ganz so perfekt aus wie mit aktiviertem JavaScript. Aber alle Inhalte sind zugänglich.

Performance

gzip ist auf dem Server aktiviert, CSS und JavaScript sind minified und sämtliche Grafiken wurden in einem Sprite zusammengefasst, um unnötige http-Requests zu vermeiden.

Somit erreicht die Website bei Google PageSpeed Insights 90 Punkte für Desktop und 72 für Mobile. Würde ich auf die Schriften via Typekit verzichten, wäre das Resultat ein ganzes Stück besser (96 und 86 Punkte).

Die Startseite aber verursacht lediglich 15 Requests mit etwas über 500kb und ist meist in weniger als 700ms geladen. Das sind Werte, die mich durchaus ein wenig mit Stolz erfüllen.

Content Management System

Als CMS setze ich wie in den meisten Projekten auf das Open Source CMS «Redaxo». Die New Sound Website ist in Sachen Backend anders als das Frontend sehr einfach aufgebaut: Lediglich ein einziges Template und sieben verschiedene Inhaltsmodule waren nötig, um die Website aufzubauen. Dementsprechend einfach ist auch die Bewirtschaftung des Inhalts für Tommy Vetterli und sein Team.

Fazit

Ich habe grosse Freude an der New Sound Studio Website. Ein ganz grosser Dank an Tommy Vetterli und Merlin Sutter, die mir ihr ganzes Vertrauen schenkten und mir die volle Freiheit gaben, das zu tun, was ich für richtig hielt.