soeren-hentzschel.at 2.0 – die Highlights des neuen Blogs

Genau eine Woche ist vergangen seit dem großen Relaunch dieser Seite. Mit diesem Artikel möchte ich auf ein paar Highlights der neuen Seite eingehen.

Mit der Ankündigung des Blog-Relaunch vor genau einer Woche wurde bereits einiges erzählt, ohne auf all die Details einzugehen, welche den neuen Blog ausmachen. Wer unter anderem etwas über das „die Timeline“ genannte Design-Konzept der Seite lesen möchte, sollte diesen Artikel unbedingt auch lesen.

Responsive Design – in beide Richtungen

Das neue Design ist responsive, das heißt, es passt sich dynamisch der Fensterbreite an, was vor allem Nutzern von Smartphones und Tablets zu Gute kommt. Während die meisten Webseiten mit Responsive Designs diese nur in eine Richtung denken, nämlich in Richtung immer kleinerer Bildschirme, wurde bei diesem Design auch in die andere Richtung gedacht: nicht nur Smartphones und Tablets werden immer häufiger genutzt, immer mehr Leute nutzen an ihrem Computer auch große Bildschirme, deren Platz auf gefühlt 99 Prozent aller Webseiten nicht ausgenutzt wird und zu viel leerem Platz links und rechts von der eigentlichen Seite führt. Nicht so hier. Wenn Platz vorhanden ist, wird dieser auch genutzt.

Das Navigations-Konzept

Bestmögliche Ausnutzung des Platzes bedeutet nicht nur eine Anpassung der Dimensionen, es bedeutet auch, bei vorhandenem Platz sinnvolle Informationen anzuzeigen, welche bei nur wenig vorhandenem Platz vermutlich verzichtbar sind. So besitzen in der „Desktop-Version“ die Navigationspunkte zusätzliche Beschreibungen, welche erklären, was einen bei einem Klick darauf erwartet.

Die Navigation in der mobilen Ansicht verzichtet auf die Beschreibungen. Hier kommt ein Konzept zum Einsatz, welches unter der Bezeichnung Off-Canvas bekannt ist: die Navigation befindet sich außerhalb des sichtbaren Bereichs und wird per Klick auf das Menüsymbol in den sichtbaren Bereich geschoben. Sichtbar ist dabei immer nur eine Navigationsebene. Bei Klick auf einen der Menüpunkte wird die darunter liegende Ebene sichtbar – oder per Klick auf den entsprechenden Eintrag wieder die darüber liegende Ebene.

Ein weiterer Kniff der Navigation ist der Folgende: Bekanntermaßen spielen nicht nur die Inhalte eine große Rolle, auch der zugrundeliegende Quellcode ist wichtig. Inhalt, der weit oben steht, wird bei der automatischen Verarbeitung, das heißt in erster Linie durch Suchmaschinen, als tendenziell wichtiger angesehen als Inhalt, der weit unten steht. Das ist ein Problem, wenn man die Navigation am oberen und nicht am unteren Fensterrand hat, wo doch der Inhalt das Wichtige ist und nicht die sich auf jeder Seite wiederholenden Links in der Navigation. Auf diesem Blog befindet sich die Navigation fast ganz am Ende des HTML-Codes – und wird dynamisch nach oben gesetzt.

Grafik-Optimierungen auf einem neuen Niveau

Grafiken sind ein wichtiges Element auf Webseiten. Sie veranschaulichen Dinge und machen Webseiten schöner. Der Preis sind entsprechend höhere Ladezeiten, so dass man darauf achten sollte, die Webseite dennoch nicht zu grafiklastig zu gestalten. Zumal die immer größere Verbreitung von HiDPI-Bildschirmen erfordert, Grafiken in mindestens doppelter Größe bereitzustellen, damit Nutzer keinen Pixelmatsch ertragen müssen. Darum wurde auf die entsprechende Optimierung allergrößter Wert gelegt. Hier kommen verschiedene Techniken zum Einsatz.

Grafiken, die keine sind

Eine Technik sind Grafiken, die in Wahrheit überhaupt keine sind. Diese Technik sieht man unter anderem in der Navigationsleiste. Seien es die Pfeile, welche bei geöffnetem Menü zu einem Kreuz werden, das Menü-Symbol in der mobilen Ansicht oder die Lupe – all das sind in Wahrheit überhaupt keine Grafiken, sondern pures CSS. Das ist nicht nur performant, sondern ermöglichte schließlich auch die Animationen bei Klick von einer „Grafik“ in die andere. Auch die Lupe bei in den Artikeln eingebundenen Bildern oder die Ladegrafik beim Klick auf diese Bilder sind reines CSS.

Symbol-Schrift

Eine andere Technik sieht man gehäuft in der Sidebar auf der rechten Seite. Bei den Grafiken dort handelt es sich um keine einzelnen Pixelgrafiken, sondern um eine Symbolschrift, was nicht nur den Vorteil hat, dass es für alle diese „Grafiken“ nur eine einzige Anfrage an den Server benötigt, auch skalieren diese Symbole ohne Qualitätsverlust, das heißt, es werden für HiDPI-Bildschirme keine eigenen Grafiken benötigt, und Dinge wie Farbe oder Größe lassen sich einfach per CSS verändern ohne die Grafiken austauschen zu müssen.

Neueste Webtechnologie

Und schließlich gibt es noch Stellen, wo tatsächlich echte Grafiken zum Einsatz kommen, wie die Kategoriegrafiken auf der linken Seite. Die einfache Lösung wäre es, eine Grafik auf konventionellem Wege einzubinden:

[pastacode lang=“markup“ message=“HTML“ highlight=““ provider=“manual“]

[/pastacode]

Aber das wäre zu einfach und würde dem Anspruch dieser Seite nicht gerecht werden. Stattdessen werden hier tatsächlich vier (!) verschiedene Versionen für jede Kategoriegrafik ausgeliefert – natürlich an jeden nur die jeweils passende Version: Normale PNG-Grafiken, PNG-Grafiken in doppelter Größe für HiDPI-Bildschirme und für Chrome-Nutzer WebP-Grafiken anstelle von PNG-Grafiken, auch hier wieder normal oder HiDPI je nach Bildschirm. Das Beispiel von oben sieht damit wie folgt aus:

[pastacode lang=“markup“ message=“HTML“ highlight=““ provider=“manual“]

[/pastacode]

Spürbar gesteigerte Performance

Mehr Geschwindigkeit und weniger Schwerfälligkeit, das war eines der wichtigsten Ziele des Relaunches. Die eben genannten Optimierungen tragen naheliegenderweise einen wesentlichen Teil dazu bei, wie auch die Auswahl einer spürbar leichtgewichtigeren Lightbox für Bilder in den Artikeln. Erwähnt sei in diesem Zusammenhang auch der Einsatz des Premium-Plugins WP-Rocket, der besten am Markt verfügbaren Caching-Lösung für WordPress-Systeme. Ergänzt zur Bildoptimierung wird dies in Kürze durch Imagify aus dem gleichen Haus.

Weniger Aufwand für die Veröffentlichung von Artikeln

Ein Ziel des Relaunches war es, die Veröffentlichung von Artikeln zu vereinfachen. Wenn Artikel in dieser Anzahl veröffentlicht werden, sollte die Hauptarbeit das Schreiben sein und nicht auch noch der Veröffentlichungsprozess viel Zeit beanspruchen. So musste beispielsweise das Artikelbild für jeden Artikel manuell festgelegt werden. Dies ist einer der Schritte, welcher automatisiert worden ist: sei es die Kategoriegrafik auf der linken Seite, das Bild für das Facebook-Sharing oder das Bild für das Twitter-Sharing – dieser Bilder werden nun vollkommen automatisch anhand der primären Kategorie (ein Feature, welches WordPress im Originalzustand übrigens auch nicht kennt) ausgewählt. Dies vereinfacht nicht nur den Ablauf der Veröffentlichung, man liest es bereits: je nach Anwendungsfall kommen unterschiedliche Grafiken zum Einsatz. Vorher wurde für all die genannten Zwecke die jeweils gleiche Grafik verwendet, was zur Folge hatte, dass die Bilder für Facebook und Twitter alles andere als optimal waren, sprich sie wurden abgeschnitten angezeigt, was nun der Vergangenheit angehört.

Ein weiteres neues Feature dieses Blogs ist etwas, was für die meisten Blogs selbstverständlich ist: die Anzeige eines kurzen Artikel-Ausschnitts bereits auf der Startseite. Aber auch hier macht es dieser Blog wieder ganz anders als der Durchschnitts-Blog: der übliche Weg funktioniert entweder über eine definierte Länge (zeige die ersten x Wörter oder Zeichen auf der Startseite an) oder durch manuelle Eingabe durch den Artikel-Autor (verwende den Text bis hierhin für die Startseite). Ganz im Sinne des vorherigen Abschnittes wurde für diesen Blog auch dafür eine Lösung entwickelt, welche vollkommen automatisch den gewünschten Textbereich erkennt und für die Anzeige auf der Startseite auswählt. Die Definition fixer Workflows macht’s möglich.

Geschätzte Lesedauer

Automatisch findet auch die Berechnung der geschätzten Lesedauer dieser Artikel statt. Natürlich ist die tatsächliche Lesegeschwindigkeit individuell, nichtsdestominder lassen sich die Angaben in Relation zueinander setzen und so beurteilen, ob ein Artikel eher kurz oder lang ist. Auch wenn es zu diesem Zweck einige bereits fertige Plugins gibt, kommt auch hier wieder eine Eigenentwicklung mit einem eigens entwickelten Berechnungs-Algorithmus zum Einsatz. Dieser Algorithmus basiert auf der Grundlage wissenschaftlicher Erkenntnisse zur durchschnittlichen Lesedauer eines Menschen und berücksichtigt auch die Einbindung von Bildern und Code-Beispielen auf dieser Seite – etwas, was einem fertige Plugins normalerweise nicht liefern. Diese zählen in der Regel einfach nur die Wörter.

SEO und strukturierte Daten

Auch wenn es in erster Linie um die Benutzer und nicht um Suchmaschinen geht, so lässt sich nicht leugnen, dass der Großteil der Besucher nun einmal über Suchmaschinen den Weg auf diese Seite findet, was die Suchmaschinen-Optimierung zu einer Aufgabe macht, die von existenzieller Bedeutung für diesen Blog ist. Vergangene Updates der Google-Algorithmen haben den Blog teilweise schwer getroffen. Darum war klar, dass auch die SEO-Strategie Teil des Relaunches werden muss. In diesem Zusammenhang wurde das von Sergej Müller entwickelte wpSEO gegen das SEO-Plugin der Suchmaschinen-Experten von Yoast inklusive Google News-Erweiterung ausgetauscht, welches deutlich mehr Möglichkeiten der Optimierung bietet und im Gegensatz zur Vorgängerlösung auch aktiv bei der Content-Optimierung hilft.

Um Suchmaschinen die Inhalte noch begreiflicher zu machen, setzt diese Seite auf strukturierte Daten. Während für den Leser dieser Seite sofort klar ist, was Artikel-Inhalt, was Kommentar usw. ist, ist das für Suchmaschinen alles andere als eine triviale Aufgabe, denn diese besitzen (noch) nicht die notwendige Intelligenz, das zu erkennen. Dank strukturierter Daten wissen nun auch Suchmaschinen ganz genau, womit sie es zu tun haben. So sehen Suchmaschinen beispielsweise nicht nur den Zeitpunkt der Veröffentlichung eines Artikels, wie wir es lesen können, sondern bekommen dieses gleichzeitig auch in einem standardisierten Format mitgeteilt, welches es eindeutig macht, dass es sich a) um das Veröffentlichungsdatum und nicht um ein anderes Datum handelt und b) wie das Datum zu verstehen ist. Auch ist es nun eindeutig aus dem Quellcode interpretierbar, was Artikel und was Kommentare sind und noch exakter, was beispielsweise der Verfasser des Kommentars und was der Kommentar-Inhalt ist. Das sieht zum Beispiel so aus:

[pastacode lang=“markup“ message=“HTML“ highlight=“1,7-9,14,17″ provider=“manual“]

<li id="comment-22563" property="comment" typeof="Comment" class="comment byuser comment-author-cadeyrn bypostauthor odd alt thread-odd thread-alt depth-1 target animated-snippet">
    <div class='image'>
        <img alt='' src='https://secure.gravatar.com/avatar/576ed3c393f7828f28d16d5f93da64ac?s=80&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/576ed3c393f7828f28d16d5f93da64ac?s=160&d=mm&r=g 2x' class='avatar avatar-80 photo' height='80' width='80' />
    </div>
    <div class='snippet clear'>
        <div>
            <span property='author' typeof='Person'>
                <span property='name'>Sören Hentzschel</span>
            </span>
        </div>
        <small>
            schrieb am
            <a href='https://www.soeren-hentzschel.at/aktuelles/firefoxosdevices-org-2-2-online/#comment-22563'>
                <time datetime='2015-10-29T10:07:20+01:00'>29. Oktober 2015 um 10:07 Uhr</time>
            </a>:
        </small>
        <div class='content' property='text'>		
            Der Inhalt des Kommentars.
        </div>
    </div>
</li>

[/pastacode]

Bessere Code-Beispiele

Nicht nur die Darstellung von Code-Beispielen wurde spürbar gegenüber dem alten Blog verbessert, sondern auch funktional erweitert. So ist es nun nicht mehr nur möglich, Code-Beispiele farblich hervorzuheben, sondern auch zu benennen und bestimmte Zeilen hervorzuheben. Diese Neuerung dürfte sich als sehr praktisch erweisen, wenn es in Zukunft wieder neue Tutorials zur Entwicklung von Add-ons auf diesem Blog gibt. Beispiel? Siehe Abschnitt darüber.

Integration von Inhalten von firefoxosdevices.org

Nachdem firefoxosdevices.org bereits die News von soeren-hentzschel.at integriert, war für den Relaunch des Blogs sowie firefoxosdevices.org 2.2 auch der umgekehrte Fall ein Schwerpunkt: die Integration von Inhalten von firefoxosdevices.org auf soeren-hentzschel.at.

Einer der neuen Integrationspunkte ist die Anzeige eines zufällig ausgewählten Gerätes in der Sidebar des Blogs. Angezeigt werden hier neben dem Namen des Gerätes und einem Bild außerdem der Zeitpunkt der Markteinführung sowie die Version von Firefox OS. Mit einem Klick gelangt man zur Detailansicht auf firefoxosdevices.org. Die Farbe der Boxen ist abhängig vom Typ des Geräts und entspricht exakt der Farbgebung von firefoxosdevices.org.

Ein weiterer Integrationspunkt betrifft einzelne Artikel. Dazu sehr ähnlich gehaltene Infoboxen können direkt in den Artikel integriert werden. Auch wird berücksichtigt, ob es sich dabei um ein Gerät handelt, welches es nicht auf den Markt geschafft hat.

Die Integration ist für den Autor des Artikels denkbar einfach: das entsprechende Gerät muss einfach nur aus einer Liste ausgewählt werden, fertig. Der Rest geschieht automatisch.

Anpassbarkeit durch den Benutzer

Um dem Nutzer mehr Kontrolle zu geben, kann dieser diverse Aspekte der Oberfläche anpassen. Das kann bedeuten, bestimmte Elemente wie die geschätzte Lesedauer auszublenden oder das sanfte Scrollen zugunsten eines normalen Scrollverhaltens zu deaktivieren. Für die Speicherung der Einstellungen kommt die Local Storage-Technologie zum Einsatz.

Neuer Kommentar-Editor

Um dem Leser mehr Komfort beim Schreiben von Kommentaren zu geben, kommt hier nun ein richtiger Texteditor zum Einsatz, welcher grundlegende Formatierungen erlaubt und diese direkt so anzeigt, wie sie später im Beitrag erscheinen.

Mehr Konsistenz im Design

Konsistenz im Design ist ein wichtiger Punkt für ein gutes Design. Und während die Social Media-Grafiken in der Vergangenheit zusammengewürfelt waren und überhaupt keine Konsistenz vorweisen konnten, ist dies nun anders.

Sonstige Verbesserungen

In diesem Relaunch steckt so viel Liebe zum Detail, dass gar nicht alles genannt werden kann. Ein paar Dinge wollen aber einfach noch erwähnt werden. Dazu gehört, dass die Suchfunktion nun wieder die Ergebnisse nach Datum sortiert. Standardmäßig sortiert WordPress Artikel seit einigen Jahren nach einer kalkulierten Relevanz, mit deren Ergebnis ich überhaupt nicht zufrieden war. Auch erwähnt sei, dass es nun eine brauchbare Druckansicht gibt. Im alten Design war die Druckansicht nicht nur schlecht, sie war schlicht und ergreifend nicht funktional.

Mehr Funktionalität & dennoch weniger Drittanbieter-Plugins

Obwohl der neue Blog deutlich mehr Funktionalität bietet, kommen weniger Drittanbieter-Plugins als im alten Blog zum Einsatz. Ein Ziel des Relaunch war es, die Abhängigkeit von Drittanbietern zu verringern und mehr Funktionalität selbst bereitzustellen. Das macht Updates der Software weniger zu einem Glücksspiel, da Abhängigkeiten von anderen immer ein gewisses Risiko mit sich bringen. Wo Drittanbieter-Plugins eingesetzt werden, wurden diese teilweise durch andere ersetzt, welche eine aktivere Entwicklung vorweisen können.

Zukunftssichere Basis

Fast am Wichtigsten ist die Tatsache, dass mit diesem Relaunch eine solide und zukunftssichere Grundlage geschaffen worden ist, welche es erlaubt, Änderungen schneller ausliefern zu können. Anders als bis zu diesem Relaunch wird es bis zum nächsten Update keine drei Jahre dauern.