Werbung

Der Wechsel zum neuen Layout hat geklappt. Ich habe das gleich mit dem Wechsel auf ein neues Hosting-Paket verbunden. Der Wechsel ging relativ reibungslos von statten, auch wenn es ein paar kleinere Probleme gab.

Doch warum habe ich das Layout ĂŒberhaupt ĂŒberarbeitet und welche Überlegungen standen dahinter?

Das alte Layout – eine Bestandsaufnahme

Das alte Layout hat mir eigentlich sehr gut gefallen. Es hatte sich gegenĂŒber der Original-Version bereits deutlich verĂ€ndert. Viele Dinge, die ich in den ersten Monaten ĂŒber das Bloggen und das Gestalten eines Blogs gelernt hatte, sind schon nach und nach in die alte Version des Layouts eingeflossen.

So hat sich das Farbspektrum bewĂ€hrt und dem Blog ein wiedererkennbares Erscheinungsbild gegeben. Die Schriftausrichtung, -farbe und -grĂ¶ĂŸe habe ich in der Abstimmung mit meinen Lesern verbessert.

Die Navigation war einfach und klar, auch wenn ich mit der Zeit ein paar Verbesserungen im Hinterkopf hatte. Die Platzierung von Werbung hat sich gut eingespielt und wurde so gut wie gar nicht kritisiert. Dazu haben sicher die oft sehr langen Posts beigetragen.

Da es so viele gute und funktionierende Elemente im Blog gab, stand fĂŒr mich von Anfang an fest, dass es “nur” eine Überarbeitung und Optimierung des Layouts geben wird. Keinesfalls wollte ich alles bisherige ĂŒber den Haufen werfen.

Aber es gab auch diverse Problemstellen, die ich mit einem neuen Layout aus dem Weg rÀumen wollte.
Die rechte Spalte war doch recht unĂŒbersichtlich und enthielt Elemente, die einfach unnötig waren. So ist z.B. das Monatsarchiv raus geflogen. Es macht einfach keinen Sinn.
Auch die lange Testphase des Blogfever-Plugins hat am Ende dazu gefĂŒhrt, dass ich dieses Plugin im neuen Layout wieder entfernt habe.

Die Navigation sollte mehr Pep bekommen und deutlicher den Besuchern ins Auge stechen. Zudem wollte ich den Header-Bereich besser nutzen, da er in der alten Version recht leer und ungenutzt war.

Ein paar andere Sachen, wie z.B. die Gestaltung des Kommentar-Formulars und einige Code-Probleme (die verschiedenen H-Tags wurden teilweise mehrmals an anderen Stellen genutzt und kamen damit auf einer Seite mehrmals vor) wurden auch im Zuge der Layout-Umgestaltung behoben.

Ziele fĂŒr mein neues Blog-Layout

Doch bevor ich mich an den Code gestĂŒrzt habe, wollte ich mir ganz klar ĂŒber die Ziele des neuen Layouts sein. Ich halte nicht viel von “Es soll schön sein, nur damit es schön ist”.

Das neue Layout sollte ganz klare Ziele haben und die sollten sich natĂŒrlich in der Gestaltung niederschlagen.
Die Ziele waren:

1. Erhöhung der PageViews pro Besucher.
2. Alternative WerbeplĂ€tze schaffen, die unter anderem fĂŒr den Bannerverkauf genutzt werden können.
3. Optimierung des Programmcodes, um besser auf Suchmaschinen optimiert zu sein und schneller zu laden

Dies waren die 3 Hauptziele des neuen Layouts.

Die wichtigsten Elemente des neuen Layouts

Am neuen Layout habe insgesamt so rund einen Monat gebastelt. GrĂ¶ĂŸtenteils in Photoshop. Die eigentlich Umsetzung im Code hat dann relativ kurz gedauert.
Schauen wir doch mal auf die Ziele und wie sich diese im Layout niedergeschlagen haben:

Ziel 1: Erhöhung der PageViews pro Besucher
Die Erhöhung der PageViews pro Besucher war eigentlich mein wichtigstes Ziel. Am einfachsten wĂ€re es natĂŒrlich, ich wĂŒrde meine teilweise sehr langen Posts aufteilen und die Leser mĂŒssten sich durchklicken. Aber da ich das selber nicht mag, habe ich davon abgesehen.

Mein Ziel war es, andere Posts (die thematisch passen oder generell sehr beliebt sind), deutlich auffĂ€lliger den Lesern zu prĂ€sentieren. Sie sollten nach dem Leser des aktuellen Posts sofort auf andere interessante Links stoßen und weiterlesen.

DafĂŒr habe ich einerseits unter der Navigation einen neuen dreiteiligen Bereich geschaffen, der die unterschiedlichsten Texte und Bilder beinhalten kann. Derzeit finden sich dort “die 5 beliebtesten Posts”, “die populĂ€rsten Artikel-Serien” und “Verdienen Sie Geld mit”.

Im alten Layout waren die Top-Artikel im Footer und wurden nur von einem Teil der Blog-Leser gesehen. Nun sieht jeder Leser diese Top-Posts.

Als weitere Möglichkeit einen interessanten Post zu finden, habe ich eine Tag-Cloud eingebaut. Diese wird durch das empfehlenswerte WordPress-Plugin “Simple Tags” generiert. Dort finden sich die bisher von mir meistgenutzten Themen wieder.

Die Tag-Cloud ergĂ€nzt damit die weiterhin bestehende KategorieĂŒbersicht. Allerdings finde ich Tag-Clouds mittlerweile angenehmer als lange Kategorielisten. Aber das ist sicher Geschmackssache.

Die dritte Verbesserung habe ich unter dem Text vorgenommen. Die Ă€hnlichen Artikel werden nun direkt unter dem Text (bzw. unter den Google-Anzeigen) angezeigt. Das sollte dazu beitragen, dass diese von mehr Lesern wargenommen werden, da diese Links vorher unter dem dunkelroten “Social”-Bereich waren.

Zu guter letzt habe ich auch die Vor- und ZurĂŒck-Funktion wieder eingefĂŒhrt. Man kann also zum nĂ€chst-neueren und -Ă€lteren Post direkt springen.

Ziel 2: Alternative WerbeplÀtze schaffen
Perspektivisch möchte ich auch selber WerbeplĂ€tze auf “SelbstĂ€ndig im Netz” verkaufen. Also Banner, Buttons etc.
DafĂŒr habe ich an mehreren Stellen Möglichkeiten geschaffen diese einzubauen, ohne den Textbereich zu belasten und damit die Leser, also euch, unnötig zu Ă€rgern.

Im Header gibt es nun einen Bereich, der bereits jetzt farblich hervor sticht. Diesen Button kann ich sowohl fĂŒr interne Teaser verwenden (wie derzeit), als auch mit externer Werbung belegen.

Hier macht sich auch der Vorteil der Farbwahl des Blogs insgesamt bemerkbar. Da der Blog insgesamt in einem Rotspektrum gehalten ist, fallen andersfarbige Bereiche natĂŒrlich recht stark ins Auge. Mehr jedenfalls, als in einem bunten Blog.

Eine weitere Platzierungsmöglichkeit fĂŒr Werbebutton- und banner ist die Seitenleiste. Dort habe ich nun extra Bereiche abgegrenzt, die flexibel mit Affiliate-Bannern und auch TKP-Werbebannern bestĂŒckt werden können.

Ebenso wĂ€re es natĂŒrlich möglich, die 3 Bereiche unter der Navigation mit Werbung zu bestĂŒcken. Allerdings möchte ich es nicht ĂŒbertreiben.

Dass es manchen Leser schon stört, ĂŒberhaupt Werbung in einem Blog zu finden, ist mir klar. Aber da ich mit dem Blog Geld verdienen will, muss ich euch zumindest ein bisschen Ärgern. Deshalb werde ich versuchen auch nie zuviel Werbebanner einzubauen.

Ziel 3: Optimierung des Programmcodes
Wie schön erwĂ€hnt, hatte der Programmcode einige Probleme. So gab es z.B. in der Sidebar ebenfalls H-Tags fĂŒr Überschriften. Diese habe ich nun alle entfernt, damit die H-Tags ausschließlich im Content vorkommen.

Es gab mittlerweile auch ein paar Code-Passagen, die gar nicht mehr notwendig waren. Deshalb habe ich diese entfernt. Auch die CSS-Datei konnte ich um einige Definitionen erleichtern.

Als Hilfetool habe ich mir das YSlow-AddOn fĂŒr Firefox genommen und die Ladezeiten analysiert. Dabei konnte ich z.B. feststellen, dass mein altes Umfrage-Plugin CSS-Dateien lĂ€dt, selbst wenn es gar nicht aktiv ist. Also raus damit. Auch das ein oder andere weitere Plugin habe ich deaktiviert.

Zudem habe ich mir nochmal alle Grafiken vorgenommen und so auch noch etliche Kilobyte gewonnen.
Extrem wichtig ist aber auch der WordPress-Cache. WP-Cache verringert die Aufbauzeiten fĂŒr neue Seiten um ein vielfaches. Aus diese Grund habe ich leider auch die Anzeige der “User online” entfernen mĂŒssen. Diese Zahl kann sich bei gecachten Seiten nicht mehr aktualisieren.

Ich habe noch ein paar andere Änderungen vorgenommen, die hier aber sicher zu weit ins Detail gehen wĂŒrden. Wichtig ist, dass diese CodeĂ€nderungen vor allem der Geschwindigkeits-Verbesserung dienten und die Seiten noch besser fĂŒr Google vorbereiteten.

Der Code ist aber noch nicht perfekt und ich werde mir diesen bei Gelegenheit nochmal vornehmen.
Meine Hoffnungen liegen in der nĂ€chsten WordPress-Version, da angekĂŒndigt wurde, dass ein besonderes Augenmerk auf die Performance-Verbesserung gelegt wird.

Probleme und Optimierungen

Probleme gab es bei dem neuen Layout wenige. Semmelstatz will ja normalerweise nicht mit WP-Cache zusammenarbeiten. Nun habe ich einen Hack gefunden, der Semmelstatz weiterhin funktionieren lĂ€sst, auch wenn der Cache aktiviert ist. Allerdings scheint Semmelstatz auf dem neuen Webspace und mit dem neuen Layout noch nicht korrekt zu arbeiten. Ich werde das nochmal analysieren mĂŒssen.

Einige Plugins mussten zudem nochmal konfiguriert werden. Aber nichts aufregendes.

Probleme machte wĂ€hrend meiner Testphase die MySQL-Datenbank. Die verschiedenen ZeichensĂ€tze (UTF-8, ISO was weiß ich) hatten bei den TestlĂ€ufen meine Texte zerschossen. Allerdings konnte ich dann eine Variante finden, bei der alles problemlos funktionierte und die Texte korrekt ĂŒbernommen wurden.

Um die mittlerweile recht große Datenbank zwischen den Hosting-Paketen transferieren zu können, bedurfte es eines sehr guten MySQL-Scriptes. Damit war der Export und Import meiner Datenbank ein Kinderspiel.

Ansonsten lief alles rund, sieht man mal davon ab, dass der Blog einen halben Tag nicht erreichbar war. Aber wenn man eine Domain zwischen unterschiedlichen Hosting-Paketen (oder noch viel schlimmer, zwischen unterschiedlichen Hostern) transferieren muss, dann kann man solche Aussetzer fast nicht vermeiden. An dieser Stelle zeigt sich der große Vorteil einer Hoster-unabhĂ€ngigen Domainverwaltung. So etwas ist ja z.B. ĂŒber United Domains möglich.

Wie geht es weiter?

Derzeit versuche ich noch meine eMail-Adresse zum laufen zu bekommen. Hier scheint es irgendwelche Probleme zu geben und der Support arbeitet daran. Ansonten werde ich natĂŒrlich wieder regelmĂ€ĂŸig bloggen und weitere Ressourcen-Seiten (wie die Seite
“Geld verdienen“) nach und nach aufbauen.

Ich habe auch schon Ideen fĂŒr das ein oder andere interaktive Online-Tool. Allerdings weiß ich noch gar nicht so richtig, ob ich die Zeit dazu finden werde. Na mal sehen.

Ich werde euch natĂŒrlich darĂŒber auf dem laufenden halten, ob ich meine Ziele mit dem neuen Layout erreicht habe. Auch weitere Optimierungs-Maßnahmen werde ich euch mitteilen.

Solltet Ihr noch Probleme bei dem Layout entdecken, dann nur her damit.

Werbung

Werbung

0RETWEETSTweet

0GOOGLE +1+1

0SHARESTeilen

0LINKEDLinkedIn

Datenschutz-HinweisBei einem Klick auf diese Buttons gelangen Sie zu den jeweiligen sozialen Netzwerken. Wir haben keinen Einfluss auf den Umfang der Daten, die dort erhoben und gesammelt werden.

Der Artikel hat Dir gefallen?
Dann abonniere den Feed! Die Artikel gibt es auch per Mail