Blog

Post Images und Mobile Navigation

Ich habe heute keine Ruhe gefunden und weiter am WordPress Thema für den Verein geschraubt.
Im letzten Artikel, in dem es um den Feed ging, habe ich schon geschrieben, dass mir dieser noch nicht gefällt. So habe ich heute den Bildern im Artikel selbst mehr Platz gegeben und so einen guten Kompromiss geschaffen, zwischen Text und Bild, wie ich finde. Aber seht selbst.

post-article-styling-images
post-article-styling-images

Ach habe ich die mobile Navigation angefangen. Viel war nicht zu erledigen, da eigentlich so gut wie alles vorkonfiguriert wurde durch UiKit. Das vorläufige Ergebnis sieht wie folgt aus:

mobile-nav
mobile-nav
mobile-nav-off-canvas
mobile-nav-off-canvas

Die Blog-Posts „Feed“ gestalten

Heute haben ich mich damit beschäftigt, die Blog-Post zu gestalten. Den So genannten Feed oder Stream. Dieser sollen für jeden einzelnen Artikel ein Beitragsbild erhalten. Mit der Größe und Position bin ich nicht ganz zufrieden. Hier werde ich weiter daran schrauben. Auch habe ich die alten Trenner, der zwischen den einzelnen Artikel war, wieder übernommen und angepasst. Auch wurde dem Hauptinhalt, in dem sich die Posts befinden, mehr Platz gegeben.

post-article-styling-feed
post-article-styling-feed

Markup und Formatierung

Diese Woche habe ich etwas Feinschliff an der Formatierung und dem Markup gemacht. Mir gefällt das Color-Schema sehr. Das dunkle Grün mit den Erdton für die Links und Titel harmoniert und ist denke ich treffend für das Thema Umwelt.

markup-formatierung
markup-formatierung

Footer Logo – Individuell einstellbar für das Theme

Ich habe heute einen Bereich im Footer für das Logo des Seitenbetreibers erstellt. Somit kann das Thema auch ein anderer Umweltverein nutzen. Das war mir wichtig.

footer-logo-schwarzweiss
footer-logo-schwarzweiss

Für den aktuellen Verein habe ich, dank des Rates eines befreundeten Designers, das Logo auch in Farbe hinterlegt. Wenn man mit der Maus drüber fährt, wird es gegen die Variante in Farbe ausgetauscht. Siehe unten.

footer-logo-farbe
footer-logo-farbe

A/B Tests with Google Optimize

Ich habe einen A/B Test für meine Startseite eingerichtet über: https://optimize.google.com/. Wer also eine GA Konto hat und A/B Tests bisher per Hand gemacht hat, wird hier an die Hand genommen. Das Tool ist intuitiv bedienbar. Nachdem man die Installationsschritte abgeschlossen hat, installiert man sich die zugehörige Chrome Erweiterung. In dieser kann man dann die Änderungen eingeben, welche getestet werden sollen. Vorher sollte man jedoch eine weitere Variante anlegen. Für mich ist das Tool neu. Auch A/B Test waren immer schwer umzusetzen für mich. Mit dem Tool werde ich aber sicher öfter solche A/B Tests durchführen. Jedenfalls bekommt Ihr die Ergebnisse dann hier geschildert.

AB-Tests 01
AB-Tests 01

Footer angefangen auszuarbeiten

Ausgearbeitet klingt vielleicht etwas komisch. Aber dennoch ist es manchmal so wie beim Steine bearbeiten. Ja so wie ein Steinmetz. Man hämmert ein bisschen und schaut ob es einen gefällt und versucht das Beste aus dem Material zu machen. Ich habe vorher noch nie mit UiKit gearbeitet. Daher finde ich die Metapher treffend. Fertig bin ich nicht damit. Bald geht es weiter. Die drei Bereiche(Schlagworte, test2, Kontakt) müssen auch irgendwie responsive werden. Mal sehen.

footer-widget-bereich-ausgearbeitet
footer-widget-bereich-ausgearbeitet