« 13 Wochen Projekt 2012 – SiN-Optimierungen ...
Brauchen Selbständige einen Blog? - 1. ... »


Layout-Entwicklung auf Selbständig im Netz – Rückblick mit Screenshots und Erfahrungen
Peer Wandiger - 12 Kommentare - Intern, Webdesign - Ähnliche Artikel


Werbung
TarifCheck24 Versicherungpartnerprogramm
Werbung

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 (1 Stimmen)

Loading ... Loading ...


Eure Wünsche

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


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
12 Kommentare und Trackbacks zu 'Layout-Entwicklung auf Selbständig im Netz – Rückblick mit Screenshots und Erfahrungen'

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

  1. 1 Marcel kommentierte am 31.07.2012 um 12:52 Uhr

    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.

  2. 2 Reeny kommentierte am 31.07.2012 um 13:12 Uhr

    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

  3. 3 Rico kommentierte am 31.07.2012 um 15:28 Uhr

    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.

  4. 4 Maik kommentierte am 31.07.2012 um 16:02 Uhr

    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

  5. 5 Peer Wandiger kommentierte am 31.07.2012 um 16:35 Uhr

    @ 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.

  6. 6 Manu kommentierte am 31.07.2012 um 23:08 Uhr

    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.

  7. 7 Sebastian kommentierte am 01.08.2012 um 16:18 Uhr

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

  8. 8 Rene kommentierte am 03.08.2012 um 09:36 Uhr

    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 ;)

  9. 9 Jens kommentierte am 03.08.2012 um 21:30 Uhr

    Ich verwende Adblock Plus und da scheint es wohl ein Problem zu geben, der Text rutscht in den Bereich hinein, der für die Werbung vorgesehen ist. Das möchtest Du eventuell noch ändern ;-)

    http://img407.imageshack.us/img407/3519/sinup.jpg

  10. 10 Peer Wandiger kommentierte am 04.08.2012 um 00:47 Uhr

    @ 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.

  11. 11 Arne kommentierte am 21.12.2012 um 16:35 Uhr

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

  12. 12 Andre kommentierte am 06.02.2013 um 13:03 Uhr

    Ich finde das super wie Du mit der “WEB-Zeit” mitschwimmst. Du bist echt ein Vorbild. Lg Andre



wpSEO, das Plugin fuer WordPress SEO Werbung





Twitter Selbständig
5.137
Follower
Facebook Selbständig
1.033
Fans
Google+ Peer Wandiger
6.242
Follower
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 7 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
Affiliate Booster
Mittwald Hosting
AKTUELLE ANGEBOTE
AKTUELLE UMFRAGE

Welche Jahreszeit ist für deinen Blog die beste (Traffic/Einnahmen)?

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
LINK-EMPFEHLUNGEN
AKTUELLE KOMMENTARE
Matthias
Ich habe schon knapp 2000 Dollar bei Fiverr ausgegeben. Bin eigentlich meist...
31. Oktober 2014

Lukas
Es gibt bei z.B. Fiverr natürlich viel Schwachsinn, der sich überhaupt nicht...
31. Oktober 2014

Markus Knuff
Ich habe mir kürzlich einen Banner für meine Homepage anfertigen lassen,...
31. Oktober 2014

Tobi
Outsourcing ist ein Punkt, auf dem ich ggf. schon mal zurückgreife. Es ist aber...
31. Oktober 2014

Sebastian
Also, man kann bei Fiverr durchaus gute Ergebnisse bekommen, wenn man weiß...
31. Oktober 2014

SOCIAL NETWORKING
*

View Peer Wandiger's profile on LinkedIn

Blogverzeichnis - Blog Verzeichnis bloggerei.de

INFORMATIONEN