In den letzten Tagen habe ich weiter an diesem Blog gearbeitet und einige neue Features integriert.

Mobiles Layout

Beginnen möchte ich mit dem Layout, das ich nun für mobile Geräte angepasst habe. Obwohl die Meta-Angabe viewport recht unscheinbar aussieht, ist sie im Prinzip für die größte Änderung auf der mobilen Seite verantwortlich: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Dadurch wird der Anzeigenbereich der Webseite automatisch an die Displaygröße des jeweiligen Gerätes angepasst.

Weitere Änderungen gehen in Richtung eines responsive Designs: Wie im folgenden Screenshot zu sehen, wird nun bis zu einer Breite von 925 Pixel eine Burger- bzw. Drei-Linien-Navigation angezeigt, die bei einem Klick ausfährt:

Burger Navigation auf 50226.de

Auf kleineren Geräten, wie Smartphones, verschwindet die rechte Navigation ganz und wird komplett durch den Artikelinhalt ersetzt. Im Folgenden sieht man das mobile Design auf einem Google Nexus 5:

Mobiles Design von 50226.de auf einem Nexus 5

Pelican Plugins

Insgesamt habe ich folgende drei Plugins nachträglich installiert:

  • Neighbors: Dieses Plugin ermöglicht das Hinzufügen von Links zum vorherigen und nächsten Artikel. Diese Links findet ihr nun unter jedem Artikel.
  • Related Posts: Related Posts zeigt verwandte bzw. ähnliche Artikel zum aktuellen Artikel an. Die Liste dieser ähnlichen Artikel findet man nun in der rechten Navigation.
  • Summary: Pelican zeigt standardmäßig Teasertexte bis zu einer konfigurierten Länge an. Leider wirkt sich diese Automatik auf die meisten Artikel eher negativ aus: Entweder sind sie zu lang oder zu kurz. Das Plugin Summary führt zwei Platzhalter ein, mit denen man den Anfang und das Ende eines Teasertextes bestimmen kann.
blogroll
tags