Reden wir heute mal ausschließlich über die Webseite. Ihr wisst ja, dass ich sowas immer gerne für die Nachwelt (=mich) ausführlich festhalten will. Denn dem ein oder anderen ist vielleicht aufgefallen, dass ich noch ein bisschen mehr am Design von Beim Christoph rumgespielt habe. Meine ersten Erfahrungen mit Claude in der Hinsicht haben mich quasi angefixt, weitere Punkte anzugehen, die mir schon ewig auf den Geist gingen:
Mobile Darstellung
Die Tabellen wie z.B. die “Gespielt“-Übersicht, haben auf Smartphones immer das Layout gesprengt. Also sie sind nach rechts übergelaufen. Ich hab’ mir das entsprechend jetzt nochmal angeschaut und im ersten Lösungsversuch einen horizontalen Scrollbalken eingeführt. Das hat an sich technisch auch funktioniert – das Layout wurde nicht mehr gesprengt. In Sachen “Usability”, wie man so schön sagt, war es für unterwegs trotzdem nicht geeignet.
Entsprechend habe ich in den sauren Apfel gebissen und ein eigenes mobiles Design für diese Unterseiten definiert. Über eine @media-Regel wird nun bei einer Darstellungsbreite von unter 700px automatisch gewechselt. Es war dabei Chattys Vorschlag, den Tabelleninhalt als sogenannte “Cards” darzustellen. Sprich: die gleichen Informationen, aber halt kompakter. Dadurch fällt zwar die Sortierfunktion weg, doch die Übersichtlichkeit auf dem Smartphone ist viel besser.
Da die Tabellen auf den Unterseiten selbstverständlich nicht identisch sind (Anzahl Spalten, Spaltentypen, usw.), ist die style.css-Datei durch diese Anpassung allerdings um einiges länger geworden. Oder ums in Zahlen auszudrücken: Vorher hatte sie rund 650 Zeilen, jetzt sind wir bei knapp 1.250. Hätte es eine elegantere Lösung gegeben? Möglicherweise. Aber vermutlich dann nur mit Hilfe von Methoden, die ich nicht unbedingt benutzen möchte oder von einigen Besuchern sowieso standardmäßig blockiert werden (z.B. mehr JavaScript). Insofern eben die “Quick ‘n’ Dirty”-Lösung mit der Konsequenz, dass ich daran denken muss, die Datei anzupassen, wenn ich doch mal die Spaltenaufteilung der Tabellen ändern sollte.
Das Ergebnis sieht aus meiner Sicht definitiv schick aus. Nun müsste ich besagte Unterseiten nur mal wieder auf den aktuellen Stand bringen… Bislang habe ich es nur mal geschafft, das jQuery-Plugin Tablesorter von Version 2.0.5 auf 2.32.0 zu aktualisieren. Das ermöglicht die Sortierfunktion für die Tabellen. Keine Ahnung, was sich durch den Versionssprung geändert hat. Aber schon allein weil in der Zwischenzeit irgendwelche Sicherheitslücken behoben worden sein könnten, ist bei sowas ein Update immer sinnvoll.
MOAR SPACE!
Jetzt haben wir also die Ansicht für kleine Bildschirme verbessert. Die nächste Änderung habe ich hingegen für diejenigen unter uns gemacht, die was Größeres auf dem Schreibtisch stehen haben: Beim Christoph nimmt jetzt mehr Platz ein. 2014 haben wir die Seite für eine Bildschirmauflösung von 1920×1080 entwickelt. Das ist auch immer noch eine sehr verbreitete Auflösung. Und die Inhalte müssen am Ende immer noch anständig lesbar sein. Es hat glaube ich keiner was davon, wenn meine Einträge auf einem 8K-Ultrawide zu einem Strich verkommen. Trotzdem: Auf großen Monitoren war recht viel leerer Platz links und rechts neben dem Inhalt. Entsprechend habe ich das ein wenig angepasst.
Konkret bedeutet das: Ab einer Größe von 1.600px wird der Inhaltsbereich jetzt 1.400px breit dargestellt. Das sind 230px mehr als bisher (1.170px) bei immer noch guter Lesbarkeit. Die beiden Kästen “Kategorien” und “Kommentare” sind hingegen unverändert breit (292px). Mir ist freilich bewusst, dass manche “moderne” Seiten tatsächlich mittlerweile hergehen und den Lesebereich sogar auf 700-800px verringern. Aber der Grund dafür erschließt sich für mich ehrlich gesagt nicht. Also außer, dass ich mehr Platz für Werbung an den Seiten habe
. Dank “Responsive Design” kann ich im Zweifel die Seite eh so hinschieben, wie es für mich am angenehmsten ist. Jetzt gibt es einfach noch eine weitere Konfigurationsebene dafür.
Passend dazu habe ich auch mal Bootstrap aktualisiert. Das ist das Framework, das viel von diesen Responsive-Sachen ermöglicht. Davon war noch die Version 3.0.0 aus 2013 installiert. Allerdings bin ich nicht auf die aktuelle Version 5.3 gewechselt. Bootstrap hat nämlich so einige Sachen grundlegend geändert. Entsprechend müsste ich tiefergreifende Änderungen am Theme machen. Das war mir erstmal zu heikel. Es bleibt aber auf meiner ToDo-Liste und immerhin läuft jetzt Version 3.4.1 im Hintergrund.
Dunkel war’s, der Sicarius schien helle
Ein Vorteil, den allerdings der Wechsel auf Bootstrap 5.3 gebracht hätte, wäre die native Unterstützung eines Dunkelmodus gewesen. Das ist nämlich die nächste Änderung, welche die Schattenliebhaber unter uns (=ich) bereits festgestellt haben. Ist euer System entsprechend eingestellt, blendet euch Beim Christoph nun nicht mehr. Das geht wieder über eine @media-Regel in der style.css.
Es gab natürlich ein paar Knackpunkte, die ich noch im Detail fixen musste. Mein Logo hatte beispielsweise plötzlich einen weißen Rand und war logischerweise in Schwarz nicht mehr wirklich gut erkennbar. Aber durch das Erzwingen von Transparenz und einer Invertierung war das tatsächlich ohne Bildanpassung erledigt. Und die Rundungen bei “Kategorien” und “Kommentare” auf der rechten Seite sind jetzt per CSS definiert. In der normalen Darstellung kommen hier hingegen Bilder zum Einsatz, die so nicht mehr funktionierten.
Bei den bereits erwähnten Tabellen waren hingegen die Überschriften nicht mehr lesbar, weil ich sie falsch definiert hatte und auch der Button zum Abschicken der Kommentare wollte eine Sonderbehandlung. Am meisten Aufwand hat hingegen vermutlich die Simple Lightbox verursacht. Dank dieses Plugins könnt ihr die Bilder anklicken und eine größere Version sehen. Das hat zwar von Haus aus eine dunkle Variante im Angebot – in den Einstellungen ist es aber eine 0 oder 1-Entscheidung, also nicht dynamisch. Sprich, ich erzwinge nun die passende Darstellung, wenn ihr im entsprechenden Modus unterwegs seid.
Aufgrund des dazugehörigen Aufwands (ja, selbst mit Claude-Unterstützung) gibt es jedoch keinen Umschalter. Wenn ihr es doch wieder hell wollt, müsst ihr stattdessen die Einstellung in eurem System/eurem Browser ändern. Sollte ich aber jemals auf Bootstrap 5.3 (oder neuer) wechseln, dann kommt damit vielleicht auch der Umschalter in der Navigationsleiste.
Mit dem Ergebnis bin ich definitiv zufrieden – sonst hätte ich es schließlich nicht so gelassen
. Selbstverständlich hat Beim Christoph im dunklen Modus einen etwas anderen Charme als im hellen und das eine oder andere Detail am Design geht dadurch verloren. Aber im Gegenzug beim Konsum der Seite montags pünktlich um Mitternacht nicht mehr geblendet zu werden, ist diesen Kompromiss definitiv wert.
Unter der Haube
Und das müssten die für euch sichtbaren Änderungen gewesen sein, die ich an der Seite durchgeführt habe. Nicht nur, aber auch mit der Hilfe von Claude. Am Backend habe ich aber ebenso weiter rumgeschraubt. Neben Analysen der Webseitedateien durch Claude, bei denen er veraltete Methoden und sogar Schreibfehler gefunden hat, habe ich mich dafür vor allem auf die Seite PageSpeed Insights gestützt. Die analysiert neben der Geschwindigkeit der Seite auch die Barrierefreiheit, ob moderne Methoden eingesetzt werden und grundlegende SEO-Sachen. Und das sowohl für die Desktop- als auch die mobile Ansicht. Sehr coole Sache.
Beim Christoph war grundsätzlich schon in einem ganz guten Zustand, als ich angefangen habe. Hauptpunkte waren die Barrierefreiheit (81 Punkte) und die Performance in der mobilen Ansicht (ebenfalls irgendwo in den 80ern). Daraus ist beispielsweise die Umstellung der Bilder auf das WebP-Format entstanden. Aber auch die Reihenfolge, in der die Seite geladen wird, und wann der Browser tatsächlich Sachen neu laden muss statt sie aus dem Cache zu nehmen, habe ich nun optimiert. Und siehe da: Jetzt sind die Werte in den einzelnen Bereichen alle zwischen 96 und 100 von 100 Punkten. Bitte? Ob man davon tatsächlich bei der Nutzung der Seite in irgendeiner Weise merkt? Keine Ahnung. Schaden wird es nicht und wenn das Tool glücklich ist, dann bin ich auch glücklich. Lobet die Software, den Algorithmus und den geheiligten Chatbot!
P.S.: Bei der ganzen Aktion habe ich festgestellt, dass sich Vivaldi auf dem Smartphone sehr stark an den Cache klammert. Ich konnte meine ganzen Änderungen nur in einem privaten Tab überprüfen und musste dann schlussendlich mal den kompletten Browsercache leeren. Anders hätte ich die neue Darstellung nicht bekommen.











