« Wie findet man den günstigen Handy-Tarif?
So findet man ein profitables Blog-Thema »


Wie und Warum ist das neue Blog-Layout entstanden?
Peer Wandiger - 11 Kommentare - Intern - Ähnliche Artikel


Werbung
TarifCheck24 Versicherungpartnerprogramm
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

Selbständig im Netz altes Layout
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

Selbständig im Netz neues 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.

Selbständig im Netz neues Layout
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.

Selbständig im Netz neues Layout
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.

Selbständig im Netz neues Layout
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.

Selbständig im Netz neues Layout
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.

Selbständig im Netz neues Layout
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.


Hier findest Du weitere Informationen zu diesem Thema:
Werbung
Werbung

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



Kommentare
11 Kommentare und Trackbacks zu 'Wie und Warum ist das neue Blog-Layout entstanden?'

Kommentare zu 'Wie und Warum ist das neue Blog-Layout entstanden?' mit RSS

  1. 1 Monika Meurer kommentierte am 29.11.2007 um 09:30 Uhr

    Also mir gefiel das alte Layout besser! Es war strukturierter und ordentlicher. Im Header ist mir jetzt einfach zu viel. Und es wird nicht direkt klar, dass es Links sein sollen. Tag-Clouds mag ich persönlich überhaupt nicht, weil der Leser meist nur auf die sowieso schon großen Stichworte klickt und diese werden dann noch prominenter. Wenn ich ein Nischenthema suche, dann habe ich es bei der Tag-Cloud sehr schwer.

    Du schreibst gar nichts über barrierefreiheit in Deinem neuen Layout. Wie sieht es denn damit aus??

  2. 2 Maloj kommentierte am 29.11.2007 um 13:13 Uhr

    Ich muss sagen, mir gefällt das neue Layout. Ausserdem sollte, die Seite nicht nur dem User was nützen, sondern auch dir. Dafür hast du ja mit dem neuen Layout gesorgt :)

  3. 3 Michael kommentierte am 29.11.2007 um 14:13 Uhr

    Danke, das Du das so ausführlich erklärt hast.
    Insbesondere das Thema “Ähnliche Einträge” werde ich überdenken und voraussichtlich auf meinem Blog auch implementieren..
    Tagclouds finde ich entbehrlich.

  4. 4 Matthias Lehming kommentierte am 29.11.2007 um 16:10 Uhr

    Gefällt mir sehr gut, das neue Design. Allerdings sind die Ladezeiten bei mir immer noch recht hoch.
    Sind die Links im Header manuell oder per Script erstellt worden?

  5. 5 Peer Wandiger kommentierte am 29.11.2007 um 22:13 Uhr

    @ Monika
    Naja, es wird immer unterschiedliche Geschmäcker geben. Danke für deine ehrliche Meinung. Was die Links angeht, die nicht unterstrichen sind, hast du nicht ganz unrecht. Da wägt man oft zwischen Optik und Usability ab. Manche unterstreichen es, andere nicht.Ich finde es ohne Unterstreichung einfach schöner. :smile:

    Bzgl. der Barrierefreiheit muss ich gestehen, dass ich da relativ praktisch an die Sache ran gehe. Ich versuche meine Layouts halbwegs übersichtlich zu halten, gebe den meisten Bildern Alt-Texte, schaue, dass es auch im Lynx benutzbar ist etc.. Aber ich prüfe sicher nicht alle Kriterien die es gibt.

    @ Michael
    TagClouds scheinen wirklich nicht sooo sonderlich beliebt zu sein. Das einzige, was ich bei TagClouds nicht so gut finde ist, dass ich das Gefühl habe, nicht alle möglichen Links zu sehen. Da ist eine Liste schon übersichtlicher :-)

    @ Matthias
    Ich habe die Caching-Zeit nun sehr hoch gesetzt, so dass viele Leser sehr schnell die Seiten serviert bekommen sollten. Aber auch die nicht gecachten Seiten laden bei mir relativ flott, zumindest erträglich. Und ich hab nur DSL 1.000.

  6. 6 Matthias Lehming kommentierte am 29.11.2007 um 22:23 Uhr

    Läuft schon besser. Nur bevor sich die Seite aufbaut, braucht’s ein bisschen. Aber es gibt sicherlich schlimmeres. Die Beitragsqualität überwiegt eh. :)

  7. 7 Peer Wandiger kommentierte am 29.11.2007 um 23:07 Uhr

    Ja das ist ein Problem des Caching. Erst wartet man kurz und dann popt die ganze Seiten auf.

  8. 8 Oli kommentierte am 02.12.2007 um 20:58 Uhr

    Danke für deine ausführlichen Erläuterungen. Ich arbeite gerade auch an einem Blogdesign und konnte einige Inspirationen mitnehmen. Tolles Design!

    Grüße
    Oli

  9. 9 Matthias Lehming kommentierte am 05.01.2008 um 00:49 Uhr

    Kannst du schon was dazu sagen, inwiefern sich die neuen Design-Element auf die PIs ausgewirkt haben?

  10. 10 Peer Wandiger kommentierte am 05.01.2008 um 18:52 Uhr

    Hi Matthias,
    die PageViews/Visit sind auf jeden Fall gestiegen. Genaueres werde ich in einem kommenden Artikel zum Thema PageView-Steigerung verraten.

Trackbacks

  1. Besucherzahlen steigern - Matthias Lehming



Werbung





Twitter Selbständig
5.006
Follower
Facebook Selbständig
875
Fans
Google+ Peer Wandiger
5.614
Kreise
WER SCHREIBT HIER?
Peer Wandiger Mein Name ist Peer Wandiger. Ich bin selbstständiger Webentwickler und Blogger. Hier im Blog findest du mehr als 3.000 Fachartikel, die besten Artikel aus über 6 Jahren und alles über den Blog und mich.
Alle neuen Artikel als RSS-Feed (mehr als 5.000 Leser) oder als Newsletter.
Impressum & Datenschutz
AKTUELLE ARTIKEL
BELIEBTESTE ARTIKEL
WERBUNG
Backlinkseller - SEO
Website-Tooltester
Market Samurai kostenlos testen
AKTUELLE ANGEBOTE
AKTUELLE UMFRAGE

Wie hat euer Umfeld auf eure Selbständigkeit reagiert?

Ergebnis anschauen

Loading ... Loading ...
TOP 5 EINNAHMEQUELLEN*
  1. Backlinkseller.de
    Geld verdienen mit Backlinks.
  2. Adiro.de
    Geld verdienen mit Text-Anzeigen.
  3. Finanzen.de
    Versicherung- und Kredit-Partnerprogramm.
  4. Everlinks.net
    Linkverkauf und bezahlte Artikel.
  5. Superclix.de
    Affiliate-Netzwerk mit Sofortfreischaltung.
TIPPS
ARTIKELSERIEN
BLOG NETWORK
WERBUNG
Blog-Camp
LINK-EMPFEHLUNGEN
AKTUELLE KOMMENTARE
Iris
Hi Peer, da ich einen Food-Blog neuerdings betreibe lerne ich gerade viel über...
24. Juli 2014

Thomas
Super Artikel. Ich benutze ja recht viele, eigene Bilder in meinem Blog und ein...
24. Juli 2014

Peter
Ich hatte als Selbständige über die 20 Jahre die ich dies ausführte auch viele...
24. Juli 2014

Tobi
Hallo Peer, danke für diesen tollen Beitrag. Ich bin Jungunternehmer und Leiter...
24. Juli 2014

Elli
Ich finde es immer wieder interessant, wenn Leute ihr Geschäftsmodell preis geben....
24. Juli 2014

SOCIAL NETWORKING
*

View Peer Wandiger's profile on LinkedIn

Blogverzeichnis - Blog Verzeichnis bloggerei.de

INFORMATIONEN