Ein neues Theme für NecroSlaughter.de

2017-04-07 // Tags:

Im Web herrscht ständige Entwicklung. Entsprechend sollte man seine Webpräsenzen auch regelmäßig an neue Trends und Standards anpassen. So habe ich - mal wieder - ein neues Theme für mein Webzine NecroSlaughter.de erstellt.

Das ist leider kein einfaches Unterfangen. Ich hatte bereits vor zwei Jahren mal ein neues Theme geschrieben, modern mit Slider, dreispaltigem Layout für News, Reviews und Interviews und viel Platz für den eigentlichen Inhalt. Das kam gar nicht gut an. Zu steril und modern, so war das Feedback. Also habe ich relativ schnell mit Bones ein anderes Theme erstellt. Leider war die optik eher ein generischer Blog. Die kritischen Stimmen waren beruhigt, aber so richtig zufrieden war ich eigentlich nie.

Zwischenzeitlich habe ich viel aus der Vergangenheit gelernt und mein anderes Musikmagazin TheNocturnalSilence.de gänzlich anders aufgezogen. Zum einen gab es hier von Anfang an ein modernes Design mit viel Freiraum für den eigentlichen Inhalt. Und ich habe von Anfang an den eigentlichen Inhalt von Meta-Daten getrennt, was mir wesentliche Freiheit bei der Darstellung lässt.

NecroSlaughter.de ist historisch gewachsen. Seit 14 Jahren betreibe ich das Magazin und seit beinahe 10 Jahren auf Wordpress. Damals noch unwissend um die Möglichkeiten des CMS - und sicherlich auch dem damals etwas reduziertem Umfang an Möglichkeiten geschuldet -, habe ich Bilder, Youtube- und Bandcamp-Player oder Links direkt in die Artikel eingebunden, alle möglichen Taxonomien schlicht mit dem Schlagwort-System abgebildet.

Nun musste das Chaos dennoch irgendwie ansprechend aufbereitet werden….

Freilich hätte ich einfach den Grundaufbau von TheNocturnalSilence.de übernehmen können und auf Spielereien wie ein dediziertes Beitragsbild, Bandcamp-Player oder Hintergrundbild verzichten können. Doch da es sich um zwei unterschiedliche Webzines mit unterschiedlicher Ausrichtung handelt, wollte ich auch unterschiedliche Designs.

Less is More!

Aufräumen

In der Konzeption ging es erstmal an die Informationsarchitektur. Früher gab es viele Kategorien und Taxonomien. News, Downloads, Bandcamp-Tipps, Videos, Live-Berichte und so weiter. Mittlerweile hat sich der typische Inhalt stark gewandelt. Zum einen aus persönlichen Grunden wie Zeit und Motivation, zum anderen auch aus der Veränderung durch das Internet. News gibt es auf größeren Magazinen sicherlich aktueller und mehr. Doch die meisten Leute holen sich ihre Informationen direkt von den Bands über Facebook. Diese Rubrik ist für mich also obsolet. Gleiches gilt für Konzert-Berichte, da ich selber kaum noch welche schreibe und mir auch über die entsprechende Zielgruppe unschlüssig bin.

Schlussendlich bleiben als aktuell noch gepflegte und relevante Rubriken Reviews und Interviews übrig. Diese sollten auch schnell und einfach erreichbar sein. Damit ergibt sich auch schon die Menü-Struktur.

Die meisten Leser bekomme ich über die Google-Suche und über Facebook. Ich glaube kaum, dass ich wirkliche Stammleser habe, die durch die Seite stöbern. Doch für den Fall habe ich die unterschiedlichen Navigationen über Taxonomien in einem Megaflyout in der Desktop-Version der Seite untergebracht. Hier kann man die Archive für Autoren, Schlagworte, Kategorien oder nach Monaten aufrufen.

Dieses Menü ist für eine mobile Ansicht nicht vorgesehen. Vielleicht mache ich hier einen Fehler, aber ich glaube fast, dass auf Smartphone und Tablet noch weniger auf der Seite gestöbert wird, und eine simple Navigation über die beiden Menüpunkte “Reviews” und “Interviews” ausreicht. Auf der Startseite gibt es ja auch die letzten Beiträge als rein chronologisches Archiv.

Um auch die Suchergebnisse etwas zu entschlacken, habe ich die mittlerweile wohl gnadenlos veralteten News auch mal archiviert und gelöscht. Vielleicht stelle ich sie noch als statisches Archiv irgendwann mal online…

Focus, Baby!

Nachdem das Menü auf das nötigste Reduziert ist, und quasi die traditionelle Sidebar ersetzt, kann der Inhalt ganz für sich alleine stehne. Keine störenden oder ablenkenden Elemente links oder rechts.

In diesem Zuge habe ich auch direkt weiteren Ballast entfernt. Früher habe ich noch “ähnliche Artikel” oder Teilen-Knöpfe für soziale Netzwerke unter dem Artikel gehabt. Der Nutzen ist für mich eher fragwürdig. Viele Leute teilen einen Link entweder über das Teilen-Menü ihres (mobilen) Browsers, kopieren einen Link aus der Adresszeile oder teilen direkt einen entsprechenden Facebook-Beitrag.

Die Kommentare waren das nächste, was rausflog. Auf der Seite selber habe ich kaum Rückmeldungen bekommen. Die meisten Kommentare kamen entweder unter geteilten Beiträgen auf Facebook oder sogar dort als Nachricht. Auf der Seite selber gab es alle paar Monate mal irgendwen, der mich persönlich wegen meiner Meinung beschimpft hat oder der Werbung für sein eigens Review (verfasst auf russisch) gemacht hat. Da hatte ich keine Lust mehr zu, also weg mit dem Kommentar-System.

Am Ende steht nun der Artikel ganz für sich alleine.

Eye-Candy: (Mikro-)Animationen

Damit es nicht ganz so minimalistisch und steril aussieht, habe ich ein paar Animationen untergebracht. Beispielsweise Bilder und Überschriften blenden ein, lenken somit auch etwas die Aufmerksamkeit des Lesers auf den Inhalt.

Das Eingabefeld für die Suche blendet erst auf Klick auf das Lupen-Icon ein und das Menü mit den erweiterten Taxonomien fährt auch erst auf Wunsch aus. Somit bleibt die Navigation im ersten Schritt erst mal reduziert und übersichtlich.

Technische Details

An und für sich, ist das Theme recht simpel. Die Vorlage für ein Wordpress-Theme lieferte mir Bones, mit etwas Arbeit wurde das Bootstrap-Framework für das nette Grid-Layout inkludiert.

Doch ich wollte eine statische Seitenleiste, die sich nicht mit dem Inhalt der Seite bewegt. Mit Hausmitteln ist das bei Bootstrap nicht vorgesehen. CSS3 bietet hier eine nette Möglichkeit mit position: sticky, was ein klebriges Element erzeugt, das allerdings nicht aus dem DOM gelöst wird. Leider unterstützen das nur aktuelle Browser. Ein Arbeitskollege hatte mit Chrome Version 55 bereits Probleme, weil diese Version das Attribut noch nicht kannte.

Also musste ich die Seitenleiste mit position: fixed aus dem DOM lösen und das Offset für den Inhalt manuell angeben.

Nun bleibt mir nur noch ein Problem: Das Megaflyout kommt nicht ganz damit klar, wenn der Inhalt dynamisch durch das Nachladen eines iframes vergrößert wurde. Beispielsweise durch einen Youtube- oder Bandcamp-Player. Dann stimmt das per Javascript ermittelte Offset für die obere Kante des Flyouts nicht. Komischerweise aber auch nur im Chrome Version 57. Im aktuellen Firefox und Chrome Version 55 klappt das scheinbar wunderbar.