So, endlich geht’s weiter mit einem neuen Beitrag, der letzte ist ja doch schon knapp 2 Wochen her. Das liegt daran, dass ich einerseits auch sonst so einiges zu tun hatte (wenn alles klappt, erscheint Mitte November mein erstes Buch, yay!). Aber auch daran, dass der jetzige Aspekt der Homepage-Erstellung einer ist, mit dem ich bisher noch weniger Erfahrung hatte: Ästhetik und CSS.

Webseite Stand neu

Es wird es wird 🙂

Bisweilen ist das Ganze auch ein bisschen eine Fitzelei, bis man das genau so hinbekommt wie man will. Und da ich ja auf einem vorhandenen Theme aufbaue, verhält sich aufgrund nicht immer sofort durchschaubarer Querverbindungen nicht immer alles so, wie es sollte.

Im Großen und Ganzen habe ich mich in den letzten Wochen vor allem mit folgenden Aspekten beschäftigt:

  • Header
  • Farbgestaltung
  • Schriften
  • Menügestaltung (und zwar so, dass es auch beim Runterscrollen funktioniert)
  • Responsive Layout (also Optimierung für Handy etc.)
  • Bugfix (Fehler finden und ausbessern)

Header-Bild

Das Header-Bild im Hintergrund entstand ursprünglich bei einem Spaziergang, als mir auffiel, wie viele schöne bunte Blätter gerade herumliegen. Rechts oben (hinter dem Profilbild von mir) findet sich eine Trommel aus Brasilien und ein Astloch, das ich unlängst beim Bergsteigen mitgehen habe lassen. Irgendwie gefiel mir die Idee, das anzuordnen.

Verrückterweise passt das Foto von mir zufällig mit den Übergängen richtig gut zum Hintergrund. War nicht geplant so, aber freut natürlich 🙂

Farbgestaltung

Das Wort “bunterrichten” erlaubt ja jetzt grundsätzlich eine recht bunte Auswahl an Farben. Im Sinne der Lesbarkeit sollten es dann jedoch auch nicht zu viele sein. Die Kombination aus Gelb- und Brauntönen als Grundfarben gefällt mir erstmal gut.

Langfristig werde ich da wohl noch etwas experimentieren.

Schriften

Die Wahl der Schriften macht viel aus, und auch die Schrift-Größe hat einen großen Einfluss auf die Lesbarkeit. Auch hier ist noch Experimentier-Spielraum vorhanden.

Die Schriften hier werden lokal auf dem Server gespeichert und eingebunden. Man könnte auch Google Fonts verwenden, aber offenbar ist das nicht DSVGO-konform.

Menügestaltung

Einer der Punkte, der dieses Mal am meisten Zeit gekostet hat. Vor allem, weil das Theme, auf dem ich aufbaue, da viele teils schwer zu durchschauende Querverbindungen aufweist.

Am Ende hab ich das Menü dann von Grund auf neu gestylt, weil alles andere zu kompliziert wurde. Jetzt “fährt” es auch mit, wenn man scrollt, im ursprünglichen Menü klappte das irgendwie nicht.

Responsive Layout

Responsive Layout Fehler

Sieht etwas seltsam aus noch…

Das sieht noch nicht so aus, wie ich es haben will, aber ich weiß jetzt im Großen und Ganzen, wie ich dorthin komme. Derzeit ist das Menü von der Handy-Version über ein Plugin gelöst, langfristig werd ichs wohl selber nachbauen. Jetzt weiß ich ja, wie es funktioniert.

Bugfix/Fehler finden und ausbessern

Jede Änderung an einer Stelle hat potentielle Auswirkungen an anderer Stelle. Da ist ausführliches Testen angesagt. Einige dieser Fehler hab ich schon entdeckt, etwa dass die mobile Version noch nicht so klappt wie sie soll, dass einige Widgets (das sind die Elemente seitlich) noch nicht so gestylt sind wie sie sollen oder dass in der Archiv-Beitrags-Übersicht ab dem zweiten Beitrag keine Überschriften mehr angezeigt werden.

Wo sind die Überschriften abgeblieben?

Wo sind die Überschriften abgeblieben?

Aber das wird im Laufe der nächsten Wochen besser 🙂

Nächste Woche steht dann hoffentlich mal die Mobile Version, und der Großteil der offensichtlichen Fehler ist raus.

Ungefährer Aufwand in Stunden bisher: 15h (vorher) + 20h (jetzt) = 35h gesamt.

Auch hier würd ich beim nächsten Projekt aufgrund der gewonnen Erfahrung wohl schneller sein, daher im Durchschnitt bis hierher vielleicht 20h.

Niklas

-> Nachhaltiges Online Marketing – Eine Homepage erstellen mit dem CMS WordPress, Teil 0: Die Entscheidung treffen

-> Nachhaltiges Online Marketing – Eine Homepage erstellen mit dem CMS WordPress, Teil 2: Funktionelles Layout umsetzen

Kommentar verfassen