Welche Layout-Anpassungen ich warum gemacht habe – Blog Case Study Teil 16

Welche Layout-Anpassungen ich warum gemacht habe - Blog Case Study Teil 16Natürlich gab es im Zusammenhang mit dem Aufbau meines Blogs auch einige Layout-Anpassungen.

In meinem heutigen Case Study Artikel gehe ich darauf ein, wie ich das Theme für meinen Blog ausgewählt habe und welche Layout-Anpassungen ich genau vorgenommen habe.

Zudem blicke ich wie immer auf die Entwicklung der Google-Rankings und der Besucherzahlen.

Teile der Blog Case Study:
1. Idee, Start und erster Traffic 2. Suchmaschinenoptimierung, Backlinks und mehr 3. Artikelideen, Inhaltsplanung, zeitlose Artikel und mehr 4. Social Networks Werbung und Traffic-Entwicklung 5. Fotos machen und im Blog einsetzen 6. Welche WordPress-Plugins ich einsetze und warum 7. So schreibe ich meine Reviews 8. Veranstaltungen und Events nutzen – Messe SPIEL 9. Round-Up Post als Backlink- und Traffic-Bringer 10. Auswirkungen der SSL-Umstellung und 1. Geburtstag 11. API-Nutzung, Brettspiel-Box und AJAX-Voting 12. Meine Brettspiel-Infografik und was sie gebracht hat 13. So habe ich die DS-GVO umgesetzt 14. So hat sich meine Motivation entwickelt 15. Wie aufwändig sind Artikeltypen und was bringen sie? 16. Welche Layout-Anpassungen ich warum gemacht habe 17. Sidebar - Was sie bringt und wie ich sie nutze 18. So nutze ich Facebook, Twitter, Instagram und Co. 19. Podcast-Einblicke und Traffic-Explosion 20. Meine YouTube-Videos und noch mehr Traffic 21. Blog-Monetarisierung und meine Einnahmen 22. Großes Geburtstags-Gewinnspiel und mein Vorgehen 23. Wie wichtig ist die Ladezeit? Tipps & Plugins 24. 250 Blog-Artikel - Erfahrung, Top-Artikel, Aufwand ... 25. Inhalts-Aktualisierung statt immer neuer Blog-Artikel 26. Mein Podcast Zeitmanagement, Formate, Technik, Abos ... 27. Interviews nutzen für Content und Kontakte 28. Seiten oder Artikel nutzen? Erfahrungen und Tipps 29. Zeitmanagement: Zwischen Hobby und Arbeit 30. Was bringt die VG Wort in meinem Brettspiel-Blog? 31. Mein YouTube-Studio und ein neuer Traffic-Rekord 32. Verwaiste Inhalte in Blog oder Website optimieren 33. Neues YouTube-Studio, Technik, Traffic-Rekord ... 34. Weihnachtsgeschäft mit Rekord-Einnahmen und aktuelle Rankings 35. Website-Optimierung mit dem Varvy SEO Tool 36. Corona Auswirkungen auf Content, Traffic, Einnahmen ... 37. Pflegeaufwand vs. Ertrag von individuellen Website-Features 38. 18.000 Seitenaufrufe an einem Tag + Content-Strategie & Zeitplanung 39. Startseiten-Dilemma, SEO und Sommer-Traffic 40. 5 Erkenntnisse auf dem Weg zu 100.000 Seitenaufrufen/Monat 41. 5 Erkenntnisse auf meinem Weg zu 100.000 Seitenaufrufen/Monat 42. Produkt-Berater - Umsetzung, Erfahrungen, Einnahmen & Plugin-Tipps 43. Content Audit: Welche Website-Inhalte machen wirklich Sinn?


Für Werbe-Links auf dieser Seite zahlt der Händler ggf. eine Provision. Diese Werbe-Links sind am Sternchen (*) zu erkennen. Für dich ändert sich nichts am Preis. Mehr Infos.

Welche Layout-Anpassungen ich warum gemacht habe

Lexoffice
Werbung

Viele WordPress-Nutzer installieren einfach ein Theme, welches ihnen gefällt und das war es dann. Ich habe dagegen meist recht genaue Vorstellungen, wie das Layout einer Website oder eines Blogs aussehen soll. Da sind mehr oder weniger starke Layout-Anpassungen unumgänglich.

Im Folgenden schildere ich, wie ich bei der Auswahl des Themes vorgegangen bin und welche Anpassungen ich vorgenommen habe.

Auswahl des Themes

Es gibt so viele gute kostenlose, aber auch viele interessante kostenpflichtige WordPress-Themes. Doch wenn ich eine neue Website aufbaue, stehe ich regelmäßig vor der Qual der Wahl.

Die Suche nach einem passenden Theme ist meist nicht einfach. Ich habe recht genaue Vorstellungen im Kopf und meist stören mich einzelne Dinge an ansonsten guten Themes. Gerade bei Premium-Themes, die eigentlich viele Vorteile bieten, stört mich oft die Feature-Überladung. An sich gefällt mir so ein Theme, aber leider sind auch noch 10 andere Features dabei, die ich meist nicht brauche.

Deshalb greife ich meistens dann doch auf ein kostenloses Theme zurück. Diese sind meist viel einfacher gehalten und bieten nur die grundlegenden Features. Das ist mir lieber, denn darauf kann ich aufbauen und ggf. zusätzlich benötigte Funktionen per Plugin ergänzen.

Ich habe mir für meinen Blog abenteuer-brettspiele.de auf jeden Fall ein recht einfaches Theme gesucht. Es sollte schlicht wirken, da ich wusste, dass ich viele Fotos nutzen werde.

Zudem sollte es eine gute Ladezeit und ein responsive Design bieten. Ebenfalls etwas eigen bin ich bei der Navigation, wo ich konkrete Vorlieben habe.

Nicht zuletzt sollte das Theme gut gepflegt sein, denn es soll ja auch noch in Jahren Updates erhalten und keine Probleme verursachen.

Am Ende habe ich mich für ein kostenloses Theme entschieden. Es ist das Theme Hemingway.

Welche Layout-Anpassungen ich warum gemacht habe - Blog Case Study Teil 16

WERBUNG
Mehr Einnahmen mit dem Amazon Partnerprogramm! Das Amazon Affiliate Plugin für WordPress bietet Bestseller-Listen, Vergleichstabellen, Produktboxen, aktuelle Angebote und mehr. Als SiN-Leser sparst du 20% auf mein Lieblings-Plugin für das Amazon Partnerprogramm. www.aawp.de

Layout-Anpassungen

Doch mit der Auswahl des Themes war es nicht getan. Es handelt sich um ein sehr beliebtes Theme, welches man auf vielen WordPress-Websites und Blogs relativ unverändert wiederfindet.

Das war ein Grund, warum ich es meinen Wünsche anpassen wollte. Damit es nicht wie jedes andere aussieht. Aber auch mein eigener Geschmack und meine Präferenzen färben natürlich auf das Layout meiner Websites ab.

Das Hemingway-Theme hat keine eigenen Theme-Einstellungen, wie sie viele Premium-Themes bieten. Solche zusätzlichen Layout-Optionen machen es für den Laien zwar oft einfacher Layout-Änderungen vorzunehmen, aber ich kenne mich sehr gut mit CSS aus und bevorzuge direkte Layout-Anpassungen. Die Theme-Einstellungen sind eben doch eingeschränkt und mittels CSS kann man alles anpassen was man will.

Dazu nutze ich seit einer Weile das Plugin Simple CSS. Damit sind keine Änderungen an den Theme-Dateien notwendig, was z.B. Updates etc. unproblematisch macht.

Welche Layout-Anpassungen ich warum gemacht habe - Blog Case Study Teil 16

Es ist aber gar nicht so einfach herauszufinden, welches Element man mit neuen CSS-Einstellungen verändern muss. Zum Glück haben die Browser Firefox und Chrome ein nützliches Werkzeug von Haus aus mit an Board.

Im Firefox klickt man rechts oben auf das Hamburger-Menü und wählt dort erst “Web-Entwickler” und anschließend “Inspektor” aus. Nun werden die einzelnen HTML-Elemente einer Website farblich hervorgehoben, wenn man mit der Maus darüber fährt.

Welche Layout-Anpassungen ich warum gemacht habe - Blog Case Study Teil 16

Aber nicht nur das. Man bekommt auch die entsprechenden Codestelle im Quellcode angezeigt und es werden alle CSS-Angaben aufgelistet, die das Elemente betreffen. Das macht es sehr einfach, eigene CSS-Angaben einzubauen, die das Elemente entsprechend den eigenen Wünschen verändern.

Im Chrome findet sich der “Inspektor” unter den drei Punkten rechts oben. Dort klickt ihr auf “Weitere Tools” und dann auf “Entwicklertools”. Hier kann man dann auch den Inspektor aktivieren (kleines Symbol mit Pfeil) und sich einzelne Elemente der Website genauer anschauen.

Hier nun die wichtigsten Anpassungen, die ich am Layout vorgenommen habe.

Header

Ich mag sichtbare Header, da man damit gut die Einzigartigkeit einer Website herstellen kann. Schließlich ist der Header das erste, was ein Besucher sieht und der Wiedererkennungseffekt ist stark mit dem Header verbunden.

Doch der Header des Hemingway-Themes war mir zu hoch. Beim Laden der Website war fast nur der Header zu sehen und das ist meiner Meinung nach schon wieder zu viel des Guten. Mit CSS war es sehr einfach die Höhe des Headers zu verändern.

Hier seht ihr das Ergebnis (im Vergleich zum Original-Header im Screenshot weiter oben):

Welche Layout-Anpassungen ich warum gemacht habe - Blog Case Study Teil 16

Zudem habe ich den Hintergrund des Headers durch ein anderes Bild ersetzen und ein eigenes Logo eingebaut. Beides war mit den Standard-Bordmitteln von WordPress problemlos möglich.

Navigation

Welche Layout-Anpassungen ich warum gemacht habe - Blog Case Study Teil 16Eine weitere wichtige Anpassung betrifft die Hauptnavigation. Da bin ich doch recht eingefahren, was meine Vorlieben angeht. Ich habe eine horizontale Hauptnavigation auf allen meinen Websites und Blogs im Einsatz.

Das war auch ein Grund, dass ich dieses Theme ausgewählt habe, denn es ist nicht so einfach die Hauptnavigation eines Themes stark zu verändern bzw. zu verschieben.

Ich habe hier die Schriftart verändert und die Schrift zudem größer gemacht. Des Weiteren habe ich die Hintergrund-Farbe verändert.

Zudem habe ich mit Hilfe des Plugins myStickymenu für eine mitscrollende Navigations-Leiste gesorgt.

In der mobilen Ansicht habe ich lediglich den Button für das Hamburger Menü nach rechts verschoben und die Lupe nach links. Auch das war mit CSS sehr einfach zu machen.

Schrift

Zu den Layout-Anpassungen gehört auch die Schrift. Oben habe ich ja schon erwähnt, dass ich die Schriftart der Navigation geändert habe. Die Text-Schrift fand ich von Anfang an gut und passend, aber die Schriftart der Überschriften und der Navigation eben nicht.

Ich habe das per CSS geändert und stattdessen Google Fonts genutzt. Im Zuge der DS-GVO habe ich diese Schriftarten lokal eingebunden, was man über diese Website machen kann.

Ansonsten habe ich die Schrift wie gesagt gleich gelassen. Diese ist in meinem Brettspiel-Blog recht groß, was aber passt und angenehm zu lesen ist. Auf anderen Websites und Blogs habe ich ebenfalls größere Schrift ausprobiert, aber da hat es nicht gut ausgesehen. Es hängt also schon stark vom Einzelfall ab.

Farben

Insgesamt sollte das Layout nicht viele Farben haben, da ich von Anfang an viele Fotos einsetzen wollte. Das ist ein großer Unterschied zu meinen anderen Blogs und Websites, wo ich viel weniger eigene Fotos nutzen kann.

Damit diese besser wirken, sollte die Website an sich schlichter sein. Deshalb habe ich auch bei den Farbänderungen nichts besonders auffälliges gemacht.

Ich habe z.B. für die Navigation und den Footer einen roten Farbton genutzt, der an das Rot aus dem Logo angelehnt ist.

Die Farbe der Headlines habe ich auf nicht ganz so schwarz geändert, da sie vorher doch sehr kontraststark und damit aggressiv wirkten. Die Links sind nun in blau, was einfach die gelernte Farbe für Links ist.

Zudem habe ich den Suchen-Button grün gemacht, damit dieser in der Sidebar etwas heraussticht.

kleine Änderungen

Natürich gab es darüber hinaus noch viele kleine Layout-Anpassungen, die ich gemacht habe. Wenn mir da was kleines aufgefallen ist, was ich anders haben wollte, habe ich die entsprechenden CSS-Änderungen eingetragen.

Das ist nach und nach passiert und keineswegs alles am Anfang. Noch heute bastle ich an kleinen Details, wenn mir etwas auffällt.

Fazit zu meinen Layout-Anpassungen

Der Großteil der Layout-Anpassungen ist natürlich beim Aufbau des neuen Blogs passiert. Hier hilft es sehr, wenn man sich mit CSS auskennt. Das ist auch nicht so schwer, also traut euch.

Aber auch später gibt es immer mal wieder kleinere Anpassungen, denn so eine Website lebt und man selbst lernt natürlich ebenfalls neue Dinge kennen.

Ich halte eine gute Layout-Anpassung für sehr wichtig, denn damit kann man die Website optisch einzigartig machen, Emotionen wecken und die Usability verbessern.

Passt ihr das Layout/Theme eurer Websites selber an?

Ergebnis anschauen

Rankings und Traffic

Zum Abschluss des Artikels blicke ich wieder auf die aktuellen Rankings und die Traffic-Werte von Google.

Die Rankings haben sich stabilisiert. Für “Brettspiel” und “Brettspiele” ranke ich weiterhin auf Position 2 in Google, auch wenn es hin und wieder kleine Schwankungen gibt. Insgesamt hat sich bei den Top-Rankings kaum was getan.

Rankings

Das kann unter anderem auch damit zusammenhängen, dass ich aktuell etwas weniger blogge. Die Temperaturen von 30 und mehr Grad sorgen einfach dafür, dass ich Abends oft keine Energie mehr habe mich noch an einen Artikel zu setzen.

Entsprechend stabil ist auch der Static OVI von XOVI geblieben, der anzeigt, wie die Gesamtrankings sich entwickeln:

Static OVI

Positiv hat sich dagegen die Zahl der Besucher direkt von Google entwickelt. Gerade in den letzten 2 Wochen gab es hier nochmal einen Anstieg. In den letzten Wochen waren es deutlich über 4.000 Sitzungen pro Woche. Das sehe ich gerade auch unter dem aktuellen Hochsommer-Wetter sehr positiv.

Besucher direkt von Google pro Woche

Da wundert es nicht, dass sich auch die Gesamt-Besucherzahlen weiter positiv entwickeln. Der Juli war mit 18.323 Sitzungen und 30.786 Seitenaufrufen der bisher beste Monat meines Blogs.

Besucher gesamt pro Monat

So kann es gern weitergehen. Auch wenn aktuell noch kein Ende des warmen Wetters absehbar ist, so freue ich mich doch irgendwie auf regnerisches Herbstwetter. Dann sollte das Interesse an Brettspielen wieder zunehmen, wie man an diesem Google Trends Chart sehen kann, der das Interesse an “Brettspiel” in den 12 Monaten des Jahres 2017 zeigt. Das sollte dann auch für mehr Traffic sorgen.

Interesse an Brettspielen über das Jahr

So geht es weiter

Nächsten Monat nehme ich mir in meinem Case Study Artikel etwas spezielleres vor. Ich analysiere die Sidebar in meinem Blog und gehe darauf ein, was ich daran optimiert habe, welche Erfahrungen ich gemacht habe und so weiter.

Zudem blicke ich natürlich wieder auf die aktuellen Rankings und Besucherzahlen. Bis dann.

ALL-INKL.COM - Webhosting Server Hosting Domain Provider
Werbung

5 Gedanken zu „Welche Layout-Anpassungen ich warum gemacht habe – Blog Case Study Teil 16“

  1. Hi,

    vor meinem Start meiner Nischenseite stand ich vor der Frage, ob die Seite ein Onepage-Layout bekommen sollte. Dafür habe ich mich dann auch letztendlich entschieden. Jedoch zweifel ich teilweise, ob ich damit falsch lag. Was bevorzugst Du?

    Dankeschön

    Antworten
    • Ich bin kein großer Verfechter von One-Page Websites, habe damit aber auch nicht so viele Erfahrungen. Dennoch würde ich vom Gefühl immer Unterseiten zu verschiedenen Themen bevorzugen, da ich selber dies im Netz auch bevorzuge, als ewig lange One-Pager.

      Aber andere haben viel Erfolg mit One-Page-Layouts, es funktioniert also ebenfalls.

      Antworten
  2. Hi, ich habe da mal eine Frage zu deinem Webdesign, dass du angepasst hast:
    Testest Du deine Änderungen auch, was die Nutzer Erfahrung angeht oder machst Du das eher nach Gefühl?

    Was ich meine, vergleichst Du Werte wie Absprungrate und Aufenthaltsdauer vor und nach der Webdesign Änderung?

    VG

    Antworten
    • Natürlich schaue ich mir verschiedene Kennzahlen nach größeren Änderungen an. Allerdings ist es ja nicht so, dass nicht auch andere kleine Dinge sich ändern. Es ist deshalb nicht hundertprozentig sicher, was genau für Änderungen verantwortlich war. Aber wenn die Gesamtentwicklung passt, dann bin ich zufrieden.

      Antworten
  3. Hallo Peer,
    sehr aufschlussreich und informativ…
    Was mich interessieren würde ist, mit welchem Tool du Ranking und Traffic überwachst. Die Search Console von google kenne ich, ist mir aber zu unübersichtlich. Der Screenshot in deinem Artikel gefällt mir da viel besser. Man sieht auf Anhieb die verschiedenen Keywords, Position (Ranking) und Suchvolumen. Klasse! Gibts da eventuell kostenlose Tools? Welches verwendest du? Danke für dein Feedback

    Antworten

Schreibe einen Kommentar