Wasserstand #16: Es geht wieder weiter

Alexander Trust, den 17. Juli 2020

Es ist rund zwei Wochen her, als ich das letzte Mal über den Status Quo bei Macnotes informierte. Dieser Wasserstand fällt etwas kürzer aus als der letzte. Dafür hat er deutlich bessere Nachrichten in petto. Und zwar geht es um die nahe Zukunft von Macnotes, also das, was schon recht bald kommt.

Denn letzten Sonntag hab ich das Gröbste für einen Kundenauftrag erledigt und widme mich seitdem auch einem neuen Layout/Theme für Macnotes. Natürlich mache ich damit auf den ersten Blick tolle Fortschritte. Denn man hat „schnell mal“ was zusammengeschustert. Mir kommt es aber auch aufs Detail an und es gibt genügend Fallstricke, die über Wohl und Wehe entscheiden können.

Ich bin jedenfalls froh, dass ich Euch aktuell zeigen kann, was ich in der kurzen Zeit seit vergangenen Sonntag auf die Beine gestellt habe.

Neues Design in mehreren Phasen

Entsprechend werde ich aber trotzdem die Kirche zunächst im Dorf lassen und versuchen die Funktionalität von Macnotes jetzt nachzubauen, und aber den Schnickschnack für später übrig zu lassen. Beispielsweise möchte ich mittels Javascript Inhaltsverzeichnisse implementieren, wo dies angebracht erscheint, oder aber auch eine eigene Bildergalerie und womöglich auch ein Glossar etablieren. Das muss aber noch ein wenig warten.

Die neue Startseite

Stand heute habe ich die neue Startseite bereits „fertig“. Es fehlen dort im Prinzip Änderungen im Detail.

Die neue Startseite wird allerdings ein wenig von allem enthalten. Also aus bestimmten Kategorien die Inhalte bereitstellen. Sie erhält dafür keine Seiten-Navigation zum Blättern. Denn meines Erachtens ist sie dafür nicht gedacht.

Sehr wohl möchte ich aber mittelfristig auch die Usability erhöhen und habe damit bereits begonnen. Denn jeder Abschnitt der Startseite enthält eine Navigation, über die man zu den Abschnitten springen kann. Ein kleines Detail ist, dass das Pfeil-Symbol immer auch in die Richtung zeigt, in der sich der Bereich befindet (und selbstredend ist der sichtbare Bereich nicht gleichzeitig Teil der Navigation).

Sieht man mal vom Bild ab, das in meiner Entwicklungsumgebung fehlt, bin ich derzeit damit ganz zufrieden.

Die neue Artikelseite

Die neue Artikelseite zeigt, dass man ein Design nicht einfach so aus der Taufe heben kann. Sie gefällt mir noch nicht (ganz). Abstände und Details passen irgendwie noch nicht zusammen und wirken noch unrund. Aber zumindest kann sie sich trotzdem sehen lassen.

In der Seitenleiste gibt es zugehörige Firmen, Events, Plattformen, Personen und Produkte, wenn denn welche ausgewählt sind. Die Event-Seiten beispielsweise enthalten ihrerseits Links zu Nachrichten über das Event. So könnt Ihr dann bei der kommenden WWDC 2021 schon alle Meldungen an einer Stelle abrufen.

Am unteren Ende gibt es eine Vor- und Zurück-Navigation und außerdem „ähnliche Nachrichten“. Diese sind „hausgemacht“. Denn ich habe für WordPress und auch auf Macnotes schon vor Jahren eine zusätzliche Taxonomie eingerichtet, die jedoch unsichtbar ist. Ich frage dann Beiträge ab, die über gleiche „Keywords“ verfügen und gebe sie aber außerdem per Zufall wieder. Auf diese Weise möchte ich sowohl die Themenzugehörigkeit sicherstellen als auch die Neugier von Euch befriedigen. Denn vielleicht gibt es ja noch etwas zu lesen, das Ihr noch nicht kennt. Und also werden bei einem Seitenabruf regelmäßig neue ähnliche Beiträge angezeigt. Wie ich das technisch umgesetzt habe, darüber werde ich Euch auch „später“ (alias irgendwann und nicht heute) noch informieren, sodass Ihr das auf Euren Webseiten womöglich nachmachen könnt.

Auch hier fehlen bei meiner lokalen Installation einige Bilder, aber das soll Euch nicht weiter stören, weil es, wenn das neue Design live geht, anders sein wird.

Das neue Archiv

Auch für das/die Archiv(e) habe ich bereits angefangen ein neues Design anzulegen. Natürlich bekommen außerdem die Archive eine Seitennavigation. Denn dort macht sie Sinn.

Beim Überfahren der Bilder nutze ich CSS-Effekte, die ich leider im Standbild nicht wiedergeben kann. Aber auch das ist etwas, das ich Euch „später“ noch im Detail vorstelle, damit Ihr es eventuell auf Eurer Webseite nachmachen könnt.

Wenn ich allerdings „Effekte“ benutze oder Funktionen umsetze, dann möchte ich diese mit möglichst wenig Ressourcen am Browser einrichten. Umso dankbarer bin ich, dass es mittlerweile auch CSS-Effekte und -Animationen gibt. Also ich mit dem Web Ende der 1990er anfing lauteten die HTML-Befehle noch ganz anders und steckte Javascript noch in den Kinderschuhen. Heute ist vieles wesentlich eingängiger als damals. Doch meine Devise lautet: Ich werde keine Javascript-Bibliothek installieren, nur weil es womöglich einfacher ist. Sieht man davon ab, dass WordPress von Haus aus JQuery lädt, nutze ich für meinen Alltag sogenanntes „Vanilla Javascript“, für das man keine zusätzlichen Dinge laden muss.

Was noch fehlt

Hier und da muss ich auf jeden Fall noch am Kontrast schrauben. Ich bin selbst rot-grün-fehlsichtig. Entsprechend sind mir manche Farbkombinationen leider ein Dorn im Auge und muss ich entsprechend nachbessern. Es ist auch nicht ausgeschlossen, dass ich im Zuge der Arbeiten die Schriftarten noch auswechsle.

In jedem Fall werden ich versuchen sie lokal auf dem Webserver abzulegen, damit auch in diesem Fall keine Kommunikation mit fremden Server stattfinden muss.

Macnotes hab ich im November 2019 gekauft, wie ich es vorgefunden habe. Entsprechend gibt es noch super viel zu tun. Aber es kommt jetzt wieder ein wenig mehr Fahrt in die ganze Geschichte, selbst wenn es „noch“ nicht danach ausschaut.

Was schon da ist: Responsivität

Ja und in einer Angelegenheit habe ich aber auf ein Framework gesetzt, und zwar ein CSS-Framework. Dabei wollte ich vor allem eines, das nicht zu viele Features bietet und von Haus aus eher einen kleinen „Fußabdruck“ hinterlässt. Mit Bulma denke ich, hab ich eine gute Alternative gefunden. Denn ich habe in der Vergangenheit auch mit anderen, deutlich größeren Frameworks gearbeitet, wie beispielsweise Bootstrap, Foundation oder Materialize. Ausprobieren möchte ich irgendwann auch noch Tailwind. Aber wenn man Fortschritte erzielen möchte, dann muss man Entscheidungen treffen, und also fiel die Wahl auf Bulma, weil es mir nicht ganz fremd war und ich die überschaubare Größe schätze.

In jedem Fall habe ich auch die „Responsivität“ im Blick. Ein Thema in diesem Zusammenhang sind natürlich auch die Überschriften oder Typographie im Allgemeinen. Denn es gibt zwar Lösungen, aber die sind entweder sehr komplex oder eben begrenzt einsatzfähig. Wie ich dieses Problem gelöst habe, werde ich auch an anderer Stelle explizit breittreten. ;)

So in etwa sieht dann das neue Macnotes auf dem iPhone aus: Also zumindest, wenn Google Euch keine AMP-Version liefert.

Mittelfristig möchten wir auch dafür eine eigenständige Lösung anbieten. Aber vermutlich macht es da mehr Sinn, gleich ein eigenes CMS zu programmieren, was durchaus auf unserem Schmierzettel als Idee vermerkt ist.

Falls Euch das Thema langweilt, habt Ihr hoffentlich nicht zu viel von dem Beitrag gelesen. Ansonsten sind wir auch gerne offen für Feedback schon zu diesem frühen Zeitpunkt, damit wir das neue Macnotes schon in der Entwicklungsphase optimieren können. Das ist auch der Grund, warum ich diesen Wasserstand loswerden wollte.