Bibra-OnlineWebdesignWordpressWWW
15. May 2012
B

Schon wieder über einen Monat Funkstille, aber diesmal habe ich einen besonderen Grund gehabt: das neue Template ist fertig und ich wollte vorher nichts neues mehr posten. Fast genau vier Jahre, nachdem ich Bibra-Online auf WordPress umgestellt hatte, gibt es jetzt ein Design-Facelifting: Version 3.0 der Webseite ist weniger eine komplette Umgestaltung als ein völliger technischer Neuaufbau des Templates, das ich nun komplett von Grund auf selbst geschrieben habe und dabei viele Probleme und Ungenauigkeiten beseitigen konnte. Wie ich schon im letzten Posting erwähnt hatte, gab es bei der Umsetzung vom HTML-Gerüst ins WordPress-Template ein paar Rätsel zu lösen, aber nachdem ich die letzten Nüsse geknackt hatte, ging es relativ schnell und streßfrei.

Der größte Unterschied befindet sich unter der Haube, denn das Template verwendet CSS3-Technik und benutzt für Zeichensätze, runde Ecken und Farbverläufe keine Grafiken mehr, sondern nur noch reinen CSS-Code. Dadurch ist vieles viel einfacher geworden und Sachen, für die vorher eine eigene Grafik notwendig gemacht haben, können jetzt durch eine kleine handvoll CSS-Befehle erzeugt werden. Sogar das Logo rechts oben ist keine Bitmap mehr, sondern nur ein CSS-Rahmen mit Farbverlauf und ein großer Buchstabe mit eingebundenem Font. Einen Nachteil hat das ganze allerdings: während die neuesten Versionen vom Firefox, Opera, Chrome und Safari problemlos damit zurechtkommen, klappt es mit keiner Version des Internet Explorers mehr, auch nicht 8 und 9. Deswegen gilt ab jetzt das, was ich schon vor einiger Zeit angekündigt hatte: diese Seite funktioniert nicht mehr mit dem Internet Explorer! Es ist im Moment noch keine Browserweiche eingebaut, aber in Zukunft werde ich wohl eine Warnung für Besucher anzeigen, die mit dem Microsoft-Browser unterwegs sind.

Die Änderungen an der Oberfläche halten sich in Grenzen, aber ich habe einige völlig redundante Elemente wie den ganzen Blog-Header rausgeworfen, das Logo ins Hauptmenü gesetzt und einige Links aus dem Header in die Sidebar gepackt. Statt Grafiken wird nun ein per @font-face eingebundener Zeichensatz für die Logos und Buttonns verwendet, für den ich leider den früheren Font, HandelGothic, nicht benutzen konnte, da ich keine Webfont-Lizenz für ihn besitze – stattdessen habe ich nach langer Suche bei Fontsquirrel Sansation gefunden, den ich schon für das Logo von Bibra-Medien benutzt hatte und der mir hier noch besser gefällt. Außerdem habe ich das Kommentar-Formular komplett neu gestaltet und viele kleinere Änderungen im Design gemacht, um die ganze Webseite ein klein bißchen professioneller aussehen zu lassen. Ganz konnte ich mich aber nicht von dem alten Design trennen, aber vielleicht kommt das mit Version 4.0 in ein paar Jahren.

Das Facelifting betrifft im Moment nur das Blog selbst – wenn man auf die anderen alten Seiten klickt, erscheint noch der frühere Header. Ich habe noch keine Lust gehabt, das zu ändern, weil sich der neue Header nicht ganz so einfach in das alte Frame-Layout einbauen läßt und ich dafür die alten Seiten nochmal überarbeiten müßte. Das kommt dann in Phase 2, die ich auf jeden Fall im Laufe des Jahres angehen werde: die Seiten Bücher, Musik, Computer, Spiele und Sim werden dann ins WordPress-System integriert und auf deren jeweiligen Einstiegsseiten werden Postings aus der passenden Kategorie von der Hauptseite angezeigt. Dazu muß ich mir aber noch etwas zur Gestaltung einfallen lassen, denn die derzeitigen Seiten sind so alt, daß man sie im Prinzip nur noch wegwerfen kann. Und das werde ich nach und nach demnächst auch tun und mal etwas ganz anderes zu den Themen versuchen.

Das neue Template für Bibra-Online ist erstmal ein kleiner Renovierungs-Schritt, der hauptsächlich dazu da ist, mich zu motivieren, hier in Zukunft wieder mehr zu schreiben. Ich werde zwar nicht wieder damit anfangen, dauernd die Artikel vom DVDLog und vom Foto-Archiv zu doppeln, aber mit dem neuen Design habe ich auch wieder Lust, mehr zu anderen Themen zu schreiben. Jetzt muß ich aber erstmal noch eine kleine Pause einlegen, aber danach gehts mit irgendetwas weiter :-).

Write a Comment