Boehrsi.de - Blog

Das Aussehen einer Website definiert maßgeblich ob Benutzer selbige aktiv nutzen oder schnell wieder verschwinden. Der Inhalt ist natürlich auch wichtig, aber der erste Eindruck muss eben auch passen. Aus diesem Grund habe ich viel Arbeit in mein aktuelles Design oder im Hugo-Kontext Theme fließen lassen. Initial dachte ich darüber nach ein fertiges Theme zu nutzen und es vielleicht nur anzupassen. Da ich aber relativ spezielle Anforderungen habe, baute ich schlussendlich doch alles selbst. Inspiriert wurde ich aber vom Hugo AMP Design open_in_new, wie man vielleicht am schrägen Header erkennt.
Erstellt habe ich alles von Grund auf neu, unter Zuhilfenahme meiner alten HTML Struktur, kombiniert mit dem moderneren Ansatz aus dem oben genannten Theme.

Wichtig waren mit vor allem die folgenden Punkte:

• Kein Dropdown- / Aufklappmenü für die Hauptnavigation, denn dies sorgt nur für Probleme auf mobilen Seiten
• Eine zentral eingebundene Suche, welche sowohl auf Mobile, wie auch auf dem Desktop mit wenig Aufwand nutzbar ist
• Diverse Informationen vermitteln, welche neben dem eigentlichen Content in einer Seitenleiste übersichtlich verfügbar sind, aber auch auf Mobile genutzt werden können ohne zu viel Platz zu blockieren
• Weniger verschiedene Bild-Ressourcen, um den Aufwand beim Erstellen von Inhalten zu minimieren und die Ladezeiten zu optimieren
• Alle Kernfunktionen sollen vorhanden bleiben, auch wenn das Design und vor allem die Navigation schlichter werden soll
• Das Design soll einfach, schlicht, funktional und responsive (Mobile) sein, dabei aber gut aussehen

Wenn man diese Punkte grob überfliegt bemerkt man einen relativ starken Widerspruch. Zum einen soll alles hübsch bleiben und dabei schlichter werden, es sollen aber genauso viele Informationen vermittelt werden. Dies war einer der Hauptpunkte die mir Kopfschmerzen bereiteten, denn die Umsetzung benötigte teilweise einiges an Hirnkapazitäten.
Final lief aber alles soweit und ich und schaffte es den Blog-Bereich mit Kategorien, Tags und Sammlungen zu integrieren. Die Über-Seite wurde auf eine einzelne Seite reduziert, welche aber weiterhin alle relevanten Informationen vermittelt. Abschließend konnte ich auch die Projekte-Seite mit ihren verschiedenen Bereichen, sowie einer Statusübersicht einbinden. Einige weitere Links, wie z.B. für das Impressum, verlinken direkt auf Unterseiten und befinden sich im unteren Bereich der Webseite.
Die Navigation konnte dabei simple bleiben, die Seitenleiste passt sich dynamisch dem jeweiligen Bereich an und die Unterseiten geben wenn nötig weitere Navigationselemente preis. Auf eine Unternavigation / Second-Level-Navigation habe ich bewusst verzichtet, da ich der Meinung bin hier und dort etwas mehr zu scrollen und dafür allgemein den Navigations-Overhead zu reduzieren, ist ein durchaus angebrachter Weg.
Die Suche konnte ich mich etwas JavaScript sowohl auf dem Desktop, wie auch auf Mobile gut nutzbar machen und ähnliches gilt auch für die Seitenleiste auf mobilen Geräten. Das Design der Beiträge wurde etwas vereinfacht, sodass es nun nur noch den großen Header gibt und ich somit weniger Ressourcen erstellen muss. Um das Ganze responsive zu machen, habe ich zusätzlich einige wenige CSS Anpassungen vorgenommen, die Elemente leicht verändern, sofern der genutzte Bildschirm eine konkrete Größe unterschreitet (Stichwort: CSS Media Queries open_in_new).
Das Design ist aktuell noch nicht ordentlich optimiert und die speziell für mich relevanten Typen sind noch nicht gut genug gekapselt. Sobald das allerdings der Fall ist überlege ich das Design als Open-Source Theme zur Verfügung zu stellen. Solltet ihr also ebenfalls Interesse haben das Design zu nutzen, welches selbst übrigens quasi ohne Assets auskommt und fast alles via CSS regelt, so könnt ihr euch vielleicht bald freuen. Dazu aber ein Hinweis, aktuell habe ich für diesen Schritt noch keinen Zeitplan festgelegt. Meldungen in den Kommentaren bezüglich Interesses könnten diesen Vorgang beschleunigen.