Layout-Entwicklung auf Selbständig im Netz – Rückblick mit Screenshots und Erfahrungen

Das neue Layout von Selbständig im Netz ist nicht die erste optische Veränderung meines Blogs.

In den mehr als 5 Jahren, die der Blog nun bereits existiert, habe ich einige große und viele kleine Änderungen daran vorgenommen.

Ein paar Leser haben nun anlässlich des aktuellen Relaunches darum gebeten, dass ich doch mal zurück blicke und die bisherigen Versionen meines Layouts vorstelle.

Das mache ich gern, da es auch für mich selbst eine interessanter Reise in die Vergangenheit ist. Zudem gebe ich Tipps und Erfahrungen gerne weiter.

8.2.2007 – Der Start

Im zweiten Halbjahr 2006 ist bei mir die Idee für einen eigenen Blog gewachsen. Neben den inhaltlichen Überlegungen habe ich mir natürlich auch Gedanken über das Layout gemacht. Eine kommplette Eigenentwicklung kam allerdings nicht in Frage, da ich damals mit WordPress noch nicht sehr lange gearbeitet hatte und auch nicht zu viel Zeit und Arbeit in ein Projekt stecken wollte, dessen Lebensdauer ich noch nicht abschätzen konnte.

Die Layout-Entwicklung auf SiNAlso habe ich mich nach einem kostenlosen Theme für WordPress umgeschaut.

Im offiziellen Theme-Verzeichnis bin ich dann auf das Theme “red is nice” gestoßen, was mir recht gut gefiel.

Die Farbzusammenstellung fand ich gut und auch die Tatsache, dass es sich um ein relativ schlichtes Layout gehandelt hat, kam mir entgegen. Es sollte seriös wirken und nicht zu sehr verspielt.

Dass Selbständig im Netz bis heute den Rot-Ton als “Hausfarbe” hat, liegt an diesem Ursprungs-Layout.

Das Theme gibt es übrigens heute nicht mehr im Theme-Verzeichnis. Und heute ich auch bei mir eigentlich nichts mehr vom Ursprungstheme vorhanden. Ich habe zu viel daran geändert.

Mitte 2007 – Erste Änderungen

In den ersten Monaten war ich mit dem Theme auf jeden Fall zufrieden. Mit der Zeit kamen allerdings die ersten Ideen für Änderungen auf. Ich hatte nun schon mehr Inhalte und diese wollte ich unter anderem besser präsentieren.

Zudem fand ich den Header zu hoch, da er doch viel vom Bildschirm einnahm.

Also habe ich mich hingesetzt und das Layout überarbeitet.

Der folgende Screenshot zeigt meinen Blog Mitte 2007 nach den ersten größeren Änderungen:

Die Layout-Entwicklung auf SiN

Neben einem schmaleren Header gibt es unter anderem einen neuen Footer, das Suchfeld ist nach oben gerutscht und ich habe AdSense-Werbung eingebaut.

Damit war das Layout schon mal deutlich strukturierter, aber lange habe ich es damit trotzdem nicht ausgehalten. 😉

November 2007 – das neue Layout

Im November 2007 folgte der erste große Blog-Relaunch. Die wichtigsten Ziele waren eine Steigerung der Seitenaufrufe pro Besucher, neue Werbeplätze und eine bessere Suchmaschinenoptimierung.

Das Ergebnis seht ihr hier:

Die Layout-Entwicklung auf SiN

Im Header gibt es nun einen Werbebanner und die 3 Top-Artikel-Bereiche sind direkt unter der Hauptnavigation hinzu gekommen. Diese 3 Bereiche waren hauptsächlich dafür gedacht, neuen Lesern weitere interessante Artikel zu präsentieren.

Zudem gab es in der Sidebar eine Tag-Wolke, die allerdings zu viel Ressourcen gefressen hat und die ich nach einer Weile wieder entfernt habe. Ebenso habe ich den Bereich “Ähnliche Artikel” unter jedem Artikel hinzugefügt.

Wie man sieht, sind mit diesem neuen Layout bereits viele Elemente dazu gekommen, die noch heute in meinem Layout zu finden sind.

Natürlich ist so ein neues Layout nicht fertig, sondern man bastelt auch nach dem Relaunch noch daran herum. 3 Monate nach der Veröffentlichung habe ich einen weiteren Artikel über das neue Layout samt meiner Erfahrungen geschrieben.

Alles in allem bin ich mit diesem Relaunch aber sehr zufrieden gewesen, da er eine deutliche Verbesserung mit sich gebracht hat.

2008-2009 – kleinere Anpassungen

In den Jahren 2008 und 2009 gab es keine große Layout-Überarbeitung. Es gab viel zu tun und ich habe mich vor allem auf die Inhalte konzentriert. Zudem habe ich 2009 Blogprojekt.de gestartet und war damit intensiv beschäftigt.

Trotzdem habe ich natürlich immer wieder an Details gebastelt und viele einzelnen Elemente geändert oder hinzugefügt.

Der folgende Screenshot zeigt eine leichte optische Winteranpassung 2009-2010:

Die Layout-Entwicklung auf SiN

Neben Zeitmangel war es aber sicher auch so, dass ich mit meinem Layout recht zufrieden war. Natürlich gab es immer wieder Ideen für kleine Verbesserungen, aber insgesamt lief es sehr gut. Die Besucherzahlen stiegen und die Einnahmen auch. Warum sollte ich also so schnell wieder das Layout komplett über den Haufen werfen?

2010 – das erste 13 Wochen Projekt

Mitte 2010 war es aber dann soweit, dass ich das Layout nicht mehr sehen konnte. Es dauert bei mir immer so um die 2 Jahre, bis ich etwas ändern muss, da ich mich einfach satt gesehen habe. Zudem ändert sich in dieser Zeit ja auch der eigene Geschmack und die Designtrends wandeln sich ebenfalls.

Wie man am folgenden Photoshop-Entwurf sieht (leider konnte ich keinen richtigen Screenshot finden), war das neue Layout, das ich im Rahmen meines ersten 13 Wochen Projektes Mitte 2010 erstellt habe, eine Weiterentwicklung und keine Komplett-Änderung:

Die Layout-Entwicklung auf SiN

Die 3 Top-Artikel-Bereiche unter der Navigation kamen wieder raus und auch der Header wurde ziemlich stark verändert.

Auch an der Sidebar habe ich wieder einiges geändert, da ich damit eigentlich nie wirklich zufrieden bin. Von allen Layout-Bereichen tue ich mich mit der Sidebar am schwersten.

Eine wichtige Änderung betraf die Kategorie-Übersicht. Diese wanderte vom Footer wieder in die Hauptnavigation, wo es nun ein Dropdown-Menü dafür gab. Und das gibt es ja noch heute.

Auch bei diesem Relaunch habe ich meine 80/20 Regel genutzt und nicht wochen- oder monatelang an Details gefeilt, sondern das Layout zu 80-90 % fertig gemacht und in den Folgewochen noch an Details gearbeitet.

Insgesamt kam das neue Layout gut an und viele Leser hatten noch kleine Verbesserungsvorschläge, die ich gern in den folgenden Wochen eingearbeitet habe.

Übrigens habe ich auch bei diesem Layout etwas mit dem Internet Explorer zu kämpfen gehabt. Manche Sachen ändern sich nie. 🙂

2011 – kleinere Anpassungen

Im Jahr 2011 habe ich dann eigentlich wieder nur an Details gearbeitet. Die Navigation wurde etwas verändert und ich hatte zwischenzeitlich mal mit Google Fonts experimentiert.

Zudem habe ich weiter an der Sidebar gebastelt und z.B. die Hintergrundgrafik im Header wieder entfernt. Auch mit den Social Network- und Voting-Buttons habe ich immer wieder neue Dinge probiert.

Es hat sich mal wieder gezeigt, dass so ein Layout nie fertig ist. So habe ich z.B. die Teaser auf der linken Seite eingeführt, die es in überarbeiteter Form ja auch im aktuellen Layout gibt.

Das Layout war farblich sehr rund, allerdings fehlte mir später dann doch etwas der Kontrast.

Die Layout-Entwicklung auf SiN

Was mir im Nachhinein auffällt, dass ich an den eigentlichen Artikeln und deren Optik über die Jahre sehr wenig geändert habe.


2012 – Endlich ein neues Layout

Geschichte wiederholt sich. Nach 2 Jahren habe ich wieder eine größere Layout-Überarbeitung vorgenommen und das auch diesmal wieder im Rahmen einer 13 Wochen Projektes.

Ich brauche einfach den Druck, sonst schiebe ich es doch immer wieder vor mir her.

Auch für das neue Layout hatte ich schon länger Ideen gesammelt und nun versucht, diese umzusetzen. Ein wichtiger Punkt war der Kontrast. Alles sollte knackiger wirken und nicht mehr so ein einziger Rot-Ton.

Und ich muss sagen, dass ich mit dem neuen Layout sehr zufrieden bin. Selbst die Sidebar gefällt mir sehr gut, was eine Premiere ist. 🙂

Die Layout-Entwicklung auf SiN

Größere Änderungen gab es diesmal an allen Elementen, wie z.B. der Startseite und dem Footer.

Aber natürlich werde ich auch nach diesem Relaunch wieder an Details arbeiten und weiter versuchen, das Layout zu optimieren.

Stichwort “Optimieren”. Diesmal habe ich mich zudem intensiv mit der Ladezeit-Optimierung meines Blogs beschäftigt. Und das hat sich ausgezahlt. In der Vergangenheit habe ich eigentlich immer nur am Layout gearbeitet.


Eure Meinung

Die Reaktionen in den Kommentaren zum neuen Layout waren größtenteils sehr positiv, was mich natürlich freut. Zwar soll mir das neue Layout auch gefallen, aber primär ist es natürlich für die Leser da.

In einer Umfrage zum neuen Layout haben die meisten eine gute Note für das neue Layout gegeben. Allerdings wird man es nie allen recht machen können. Aber es würde mich schon mal interessieren, warum manche eine 5 oder sogar eine 6 gegeben haben. Das kann eigentlich nur etwas mit persönlichem Geschmack zu tun haben.

Hier das Ergebnis der Umfrage:

Wie gefällt euch das neue Layout in Schulnoten?

  • 2 (33%, 61 Stimmen)
  • 1 (22%, 40 Stimmen)
  • 3 (18%, 34 Stimmen)
  • 4 (13%, 24 Stimmen)
  • 5 (7%, 13 Stimmen)
  • 6 (7%, 12 Stimmen)

Teilnehmerzahl: 184 (max. 1 Stimmen)


Eure Wünsche

Natürlich freue ich ich auch in Zukunft über konstruktive Kritik und werde diese in zukünftige Anpassungen einfließen lassen.

Peer Wandiger

12 Gedanken zu „Layout-Entwicklung auf Selbständig im Netz – Rückblick mit Screenshots und Erfahrungen“

  1. Danke für die tolle Darstellung. Echt der Wahnsinn wenn man sich vor Augen hält wie lange du hier schon regelmäßig schreibst.
    Zudem sieht man wie wichtig Durchhaltevermögen in diesem Business ist. Der Beitrag ist wieder eine Motivationsspritze für diejenigen die Ihren Blog noch nicht so lange am Laufen haben.

    Antworten
  2. Die Entwicklung ist wirklich grandios! Wahnsinnig, dass aus diesem “ich weiss nicht wohin es führt”-Projekt soetwas großes und wertvolles geworden ist.

    Basiert das jetztige Design immer noch auf dem kostenlosen Theme von damals?

    Es ist ja kaum zu vergleichen ;)!

    Grüße
    Reeny

    Antworten
  3. Hallo Peer,

    hast du denn irgendwie die Änderungen “getestet” sodass du einen Erfolg auf spezifische Elemente zurückführen konntest? Oder hast du hinterher immer einfach nur geschaut, “ob sich etwas geändert hat”?

    Ich finde Layout wird derzeit immer noch viel zu sehr aus optischen Gründen und zu wenig aus reiner Usability-Sicht betrachtet. Allerdings fehlen mir noch die Ansätze sowas konkret messbar zu machen.

    Antworten
  4. Hallo,

    vorallem das neue Menü links gefällt mir. Als ich das erste Mal wieder auf der Seite war dacht ich ” Nanu was das?”.
    Das vorher immer dieser Banner mit dem Nischenseitenchallange dort war, hat mein Auge schon gar nicht mehr erfasst.
    Ich denke alle 2 Jahre ein wenig das Design abändern macht sinn.
    Im Supermarkt werden auch regelmäßig die Regale neu umgepackt 🙂

    Gruß Maik

    Antworten
  5. @ Rico
    Ich messe bei verschiedenen Elemente die Klicks und vergleiche das mit den vorherigen Elementen.

    Zudem überwache ich natürlich die Gesamtzahlen, wenn ich einzelne Elemente ändere.

    Allerdings gibt es kein Usability Testing über einen längeren Zeitraum und ähnliches.

    Aufwand und Ertrag muss stimmen. Und solange meine Frau mit dem Blog umgehen kann, ist das ein gutes Zeichen.

    Antworten
  6. Es ist wirklich so, das Layout einer Seite ist entscheidend und ausschlaggebend für das weitere handeln des Besuchers. Ein übersichtliches und farblich abgestimmtes Design weckt definitiv mehr Interesse.

    Antworten
  7. Ich vermisse bei Bildern, die du generell Beiträgen anfügst, eine Groß-Ansicht. Gerade dann, wenn es sich um Statistiken oder Infografiken handelt.

    Antworten
  8. Also das neue Layout gefällt mir persönlich sehr gut. Ich war schon länger nicht mehr auf SiN unterwegs und hab mir eigentlich nur noch den RSS Feed angeschaut – aber das neue Layout ist tatsächlich mal wieder einladend.
    Die Chronik bzgl. der Entwicklung ist gelungen und ich kann mich tatsächlich noch an das erste Layout erinnern 😉

    Antworten
  9. @ Jens
    Nein, das werde ich nicht ändern. Nutzern von AdBlockern werde ich sicher nicht noch Wünsche erfüllen. Denk mal drüber nach, was diese Website überhaupt am Leben erhält.

    Antworten
  10. Ein übersichtliches und farblich abgestimmtes Design ist definitiv fundamental wichtig. Der visuelle Aspekt ist gerade im Internet ausschlaggebend!

    Antworten

Schreibe einen Kommentar