Meine letzten vier Veröffentlichungen Mad Scientist Journal Autumn 2018 Fiction Science The Dinosaurs of Jurassic Park and Jurassic World Steaks, Walls And Dossiers Zur Übersicht aller Veröffentlichungen Fiction Science

Redesign fertig 0 

oben Blogdesign seit 2012, unten neues Design

oben Blogdesign seit 2012, unten neues Design

Das hat ein wenig gedauert, aber hier ist sie nun, die größte Umgestaltung dieser Webseite seit Bezug der aktuellen Domain. Ich hatte schon lange kein komplettes WordPress-Theme mehr vom Reissbrett an aufgebaut (zuletzt für Sporle & Co. 2007) und musste das ein oder andere doch wieder neu erlernen.

Das neue Design ist ein aufgeräumtes, sauberes Bild, welches den Inhalten deutlich mehr Platz lässt als zuvor. Keine dicken beidseitigen Leisten mehr, jeweils vollgestopft mit Inhalt und den Text zwischen sich einzwängend. Überhaupt hat das viele Schwarz großen Weissräumen Platz gemacht. Schlicht schaut es aus, aber Dolly Parton hat es in diversen Iterationen immer wieder gesagt: „Es ist ziemlich teuer, so billig auszusehen.“
Oder in diesem Fall ziemlich schwierig so simpel auszusehen. Ich musste mir ja die Sache mit den Reitern in den Kopf setzen. Das Ergebnis jedenfalls ist ein ziemlich radikales neues Design. Normalerweise vermeide ich allzu krasse Wechsel, aber das vorherige Theme war halt wirklich sehr aus der zeit gefallen und brachte einiges an Einschränkungen mit sich. Als ein Mal die rechte Seitenleiste gefallen war, gab es kein Halten mehr und hier seht ihr nun das Ergebnis. Das sollte dafür aber auch ein paar Jahre vorhalten.

Oideoir

Das eingesetzte Theme habe ich komplett vom Reissbrett ab entworfen. Es nennt sich Oideoir (irisch: Lehrmeister). Wie es zu diesem Namen kam? Nun, ich habe ein zufälliges Wörterbuch aus meinem Regal gezogen (erwischt hat es das Foclóir Póca), darin eine zufällige Seite aufgeschlagen und das erstbeste einigermaßen geeignete Wort zum Namen des Themes erklärt. Schätzt euch glücklich, dass es nicht das Klingonisch-Wörterbuch war, sonst müsstet ihr jedes Mal, wenn ihr den Namen korrekt aussprechen wollt, den Bildschirm vollspucken. Auch wenn QaQ ein schöner Name für ein Theme gewesen wäre. Das bedeutet übrigens „gut sein“ – was hattet ihr denn gedacht, wonach es klingt?
Vieles von dem, was in normalen WordPress-Themes als PHP-Routine eingebaut ist, konnte ich durch diese Erstellung eines komplett eigenes Themes in HTML „hardcoden“, wodurch die Seite etwas schneller wird.

Kopfsache

Die Kopfzeile ist nun deutlich schlanker geworden, um den Inhalten mehr Platz zu bieten. Wo zuvor ein Logo war ist nun ein Textelement „Thomas Diehl ist…“, welches sich als Konzept in der Seite durchschlägt: Alle Seiten haben Titel, die diesen Text vervollständigen. Was noch nicht ganz funktioniert: Blogeinträge sollen statt dessen mit „…Blogger“ beginnen, allerdings nur in der Enzelansicht. In der Übersicht würde es m.E. doch etwas nerven, wenn jeder Eintrag so beginnt. Das funktioniert bisher nur oben im Browser, in der Überschrift funktioniert der (exakt identische) Code nicht. Naja, Kinderkrankheiten, ich komm da schon noch hinter.
Die Seitenlinks finden sich in dem neuen braunen Balken, gefüllt mit allerlei neuen Seiten, die teilweise noch im Laufe des Wochenendes gefüllt werden. Zugleich haben sich die Kategorienlinks in die Seitenleiste verzogen, zu der ich später komme.
Doch warum ist da jetzt ein brauner Balken? Balken, okay, für die Seiten, aber warum braun?
Die Antwort liegt im Verlauf der Neugestaltung begründet. Mein ursprüngliches Konzept sah im Dezember vor, dass die Navigation die Form eines Bücherregals im Seitenkopf annahm. Die braune Leiste war das Regal, darauf fanden sich beschriftete Bücher, die als Navigationselemente dienten. Daran habe ich eine ganze Weile herumgebastelt, bis ich schließlich zu dem Schluss kam, dass das Konzept zwar schön war, letztlich aber den Aufwand und vor allem den Platzverbrauch nicht rechtfertigte. Die Links wanderten in den ehemaligen Regalboden, die bis dahin in diesem befindliche Suchfunktion im Gegenzug nach ganz oben. Da mir das Braun in Kombination mit den grünen Farbelementen der Seite ästetisch sehr zusagte, behielt ich es kurzerhand bei.
Ich bin ein großer Fan von klar abgegrenztem Kopfbereich auf Blogs.

Barrierefreies Seitenstechen

Ganz im Ernst: Ich hatte eine Weile daran gedacht, die zweite Seitenleiste komplett verschwinden zu lassen. Ich meine, wie oft interessieren sich Leute schon für das Archiv eines Blogs? Und wenn, wann nutzen sie dafür jemals etwas anderes als die Suchfunktion oder die Kategorienliste?
Der ursprüngliche Plan war daher, das Archiv komplett zu streichen und das Meta-Feld zum Einloggen, welches nur für mich einen Nutzen hat, in der Fußzeile verschwinden zu lassen, die eh niemanden interessiert (letzteres geschah am Schluss ja auch). Die Suchfunktion und Netzwerklinks sind bereits in der ersten Ideenfindung in den Kopfbereich gewandert, die Kategorien waren schon vorher dort.
Was jetzt mit einigen Ergänzungen als Standard-Sidebar erscheint sollte in diesem ersten Entwurf die gesamte Funktion der Sidebar sein: Bewerbung der Bücher und des Newsletters.
Aber ab und an nutze ich selbst beim Besuch eines Blogs dann doch das Archiv und die Meta-Sektion brauche ich halt, um mich für administrative Vorgänge (also zum Beispiel das Schreiben von Beiträgen) einzuloggen. Da ich dennoch nur noch eine Sidebar wollte, experimentierte ich ein wenig mit einer neuen Technik, mit der ich im Webdesign noch nie gearbeitet hatte: Tabs. Und um Javascript weitgehend zu vermeiden, ist diese Funktion komplett mit HTML/CSS umgesetzt. Rauszufinden, wie das funktioniert, hat mir viel Spass gemacht, auch wenn es der Hauptgrund war, dass dieses Redesign dann doch ein paar Tage länger gedauert hat als ursprünglich geplant.
Jetzt gibt es also nur noch eine Sidebar, die zwei Tabs enthält – einen standardmäßig gewählten für die Vernetzung mit anderen Teilen des Webs (Buchlinks, soziale Medien, Blogroll und so weiter) und einen zweiten für die Navigation im Archiv mit Kategorien, und Archiv.
Eine Neuerung, die den meisten Nutzern gar nicht auffallen dürfte findet sich im Code der Seite: Die Seitenleiste steht nun am Ende des Codes der Seite. Das hat den Vorteil, dass Vorleseprogramme für barrierefreien Netzzugang jetzt nicht erst sämtliche Inhalte der Seitenleiste vorlesen müssen, sondern nach den paar Worten des Kopfbereichs direkt auf den eigentlichen Text stoßen. Ich würde nicht so weit gehen, diese Seite als barrierefrei zu bezeichnen, aber der Komfort für seh- und leseschwache Personen ist so doch erheblich gesteigert.
Der deutlichen optischen Abgrenzung vom eigentlichen Inhalt dient eine Linie in jenem Grünton, der auch im vorherigen Theme hier und dort aufgetaucht ist.

Die Buchseite

Die wichtigste einzelne Änderung war bei diesem Entwurf die Präsentation der Bücher.
Mein Nachdenken über ein neues Design wurde maßgeblich davon angestoßen, dass die Übersicht über meine Bücher zunehmend unübersichtlich wurde. Vor allem die wachsende Anzahl von Händlern, bei denen einige Titel verfügbar waren, zerschoss mir an einigen Stellen das Layout. Das sah dann so aus (man achte auf die untersten beiden Titel im Screenshot, die Liste soll alfabetisch sein):

Screenshot der Bücherliste mit fehlerhafter alfabetischer Liste

Anarchische Div-Hierarchien überall!


Das würde nur unübersichtlicher werden, je mehr Titel ich herausbringe und in nächster Zeit sollen dies eine Menge Titel werden – doch dazu mehr wenn es so weit ist. Ausserdem brauchen diese vielen Links auch ziemlich viel Platz. Das kann man mit wenigen Büchern machen, aber es stößt recht schnell an seine praktischen Grenzen.

Also gibt es jetzt nur noch die Cover zu sehen. Beim Klick auf eines der Cover öffnet sich ein Overlay (eine Art Pop-Up, das kein neues Fenster öffnet, sondern in der Seite bleibt) mit den Informationen und Links zum Buch. Und da dies den individuellen Büchern mehr Platz lässt, kann ich jetzt zu jedem Buch mehr Informationen auf dieser Seite präsentieren als zuvor, ohne um die Übersichtlichkeit der Seite zu fürchten.
Die Links zu den Online-Händlern, bei denen meine Bücher erhältlich sind, finden sich jetzt in diesem Overlay rechts von der Buchbeschreibung in Form von Icons der Händler. Einige der Icons musste ich nachbessern, um eine Version in identischer Größe zu den anderen zu haben, die nicht nur aus dem schwer zuzuordnenden Logo besteht (buecher.de und ebook.de) und von Hugendubel musste ich gleich ein komplett neues erstellen, aber ich finde, das Ergebnis hat sich gelohnt. Sieht alles sehr klar und sauber aus.
Die Amazon-Links haben eine kleine Neuerung verpasst bekommen: Es gibt nur noch einen Amazon-Link, der Besucher beim Klick automatisch zu dem Amazon schickt, welches für ihr Land liefert. So muss ich nicht die halbe Liste der Händler für verschiedene Amazon-Ableger reservieren. Möglich ist das dank der Seite Booklinker, die im Gegenzug die Werbeeinnahmen (5-10% des Preises) aus jenen Ablegern erhält, bei denen ich selbst keine Werbepartnerschaft habe.
Diese Änderungen waren hier auf der Seite schon einige Zeit aktiv, bevor der Rest der Überarbeitung ans Netz ging. Dies auch um die Technik hinter den Änderungen im laufenden System testen zu können.

In Anpassung an das neue Konzept des Webauftritts heisst die Seite für die Bücher nunmehr „käuflich“, was auch den Vorteil hat, in Zukunft andere Dinge neben Büchern aufnehmen zu können. Man weiss nie, was die Zukunft bringt. Zu einem Buch kann es schnell ein Hörspiel geben – oder gar einen Film? Wer weiss, in meinem Leben sind schon verrücktere Dinge geschehen.

Weitere Seiten

Zum Blog sind einige Seiten hinzugekommen, die meisten davon mit Fokus auf meine Veröffentlichungen. Die jetzt mit Inhalten zu füllen ist dann mein Wochenendsprojekt.

  • soziomedial enthält einen Stream von aktuellen Beiträgen von mir aus diversen sozialen Netzwerken
  • verortbar bietet eine Weltkarte, auf der meine Veröffentlichungen nach Handlungsort auffindbar sind
  • vielseitig ist eine Art Portfolio meiner Internetprojekte über die Jahre
  • zeitgemäß ist eine weitere Veröffentlichungsübersicht, eine Übersicht über die chronologischen Zusammenhänge zwischen einzelnen Werken in einer gemeinsamen Erzählwelt

Die Fußleiste

Nicht länger nutzlos, finden sich in der Fußzeile nun Impressum und die nur für mich als Seitenbetreiber wichtige Möglichkeit zum Einloggen.
Das Impressum war offen gestanden ganz einfach etwas lästig in das neue Seitenkonzept einzufügen und so nahm ich es aus diesem Zusammenhang heraus. Im Gegenzug taucht es jetzt auf jeder Einzelseite auf, was möglicherweise rechtlich sogar besser ist als die Auslagerung auf eine eigene Seite.
Oh, als kleine gestalterische Spielerei schließt die Fußzeile auch den Titel des Blogs mit einer letzten Ergänzung ab.
Die Fußzeile behält das Grün des vorherigen Themes bei

Kleckerkram

Es gibt noch ein paar kleinere Neuerungen. Alle Artikel erlauben jetzt das Versenden des Textes auf das Kindle, wobei das aufgrund der technischen Einschränkungen des Mobi-Formats natürlich nicht die Möglichkeit bietet, eingebettete Videos und interaktive Inhalte zu nutzen. Aber der reine Text und die Bilder sind da. Einfach, weil sich das so für das Blog von jemandem, der eBooks schreibt gehört.
Die Farbe der Links ist auf schwarz gewechselt, das von früher aus dem Blog bekannte Grün zeigen sie erst, wenn man mit der Maus auf den Link geht. Damit ist die Farbcodierung der Links jetzt im Text und bei Überschriften identisch.
Ein großes Problem ist noch zu lösen: Lightbox mag plötzlich nicht mehr. Ich weiss nicht, ob das Problem beim Theme oder beim aktualisierten WordPress liegt, aber es ist sehr lästig, da die Buchlinks so nicht korrekt funktionieren. Da WordPress von sich aus plötzlich bei Thumbnails keine Links mehr setzt vermute ich allerdings, dass das WordPress-Update schuld ist. Und das ist der Grund, aus dem cih Software-Updates hasse, man weiss nie, welche Inkompatibilitäten mit seit Jahren genutzten Programmen und Funktionen man sich einhandelt. Ich werde das Plugin bis zum Wochenende durch ein eigenes ersetzen. Es ist eh umso besser, je weniger auf die Entwickler externer Plugins angewiesen bin.

Extra Extra Vlogs und Geschichten Fiction Science