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

Natü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.

Welche Layout-Anpassungen ich warum gemacht habe

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.

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.

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.

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

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

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

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.

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:

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.

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.

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.

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.

• Über
• Letzte Artikel

Peer Wandiger

Studium der BWL und langjährige Arbeit in einem mittelständischen Unternehmen. Seit 2006 selbständig als Webentwickler und Website-Betreiber, 2007 Gründung von Selbständig im Netz.

Wer wir sind und wie wir arbeiten. In unserem Büro im Zentrum von Köln arbeiten ausgebildete Redakteur/innen an der Ausarbeitung erstklassiger Inhalte, auf die du dich verlassen kannst. Sämtliche Artikel werden nach dem Vier-Augen-Prinzip publiziert: Nach Fertigstellung der Rohfassung werden die Texte von (mindestens) einem/r anderen Redakteur/in auf orthografische und inhaltliche Richtigkeit hin überprüft.

Diese Seite ist ein Angebot der 4pub GmbH mit Sitz in Köln. Wir haben uns auf den Betrieb hochwertiger redaktioneller Online-Portale spezialisiert und berichten stets redaktionell unabhängig.

Letzte Artikel von Peer Wandiger (Alle anzeigen)

• Danke für 16 tolle Jahre - 13. Juli 2023
• So erstellst du deine erste Newsletter-Mail in 10 Schritten mit CleverReach - 13. Juli 2023
• Die 5 besten Features des Amazon Affiliate WordPress Plugin – AAWP - 12. Juli 2023