Nach dem Redesign: Tolle Dinge

Groß und klein

Die bereits angekündigte dynamische Schriftgröße ist umgesetzt. Insbesondere auf dem Handy war das dringendst nötig. Ich habe dafür alle Fontgrößen im CSS auf relative rem-Angaben umgestellt und setze per @media-Query die Basis-Schriftgröße auf 14 bis 20px:

Teaser […]

Weiterhin hat das Blog Anrisstexte bekommen: Da ich die Schrift vergrößert und gleichzeitig die Zeilenlänge begrenzt habe und außerdem die letzten Blogartikel nicht gerade kurz waren, wurden die Artikelübersichten (Startseite, Kategorie-Ansicht, Suchergebnisse, Monatsübersicht, …) total unübersichtlich. Jeder einzelne Artikel war zwar für sich schön anzusehen, aber bereits das Durchscrollen von drei Suchergebnissen auf der Suche nach den jeweiligen Überschriften hat keinen Spaß mehr gemacht.

Ich überlegte nebenläufig, was man da wohl machen kann, da tauchte rein zufällig ein passender Beitrag in Yellowled’s Blog auf, in dem er beschreibt, dass er für seine Startseite Anrisstexte umgesetzt hat. Bevor ich meine Frage „ja wie geht das denn?“ formulieren und abschicken konnte, schob er bereits einen zweiten Artikel „Und übrigens: so geht das technisch“ hinterher.

Darauf konnte ich dann direkt aufsetzen – eine Umwandlung aller Übersichten war noch einfacher als das, was er gebaut hat, und wie das bei mir nun genau funktioniert, habe ich bei ihm im Blog als Kommentar hinterlassen.

Sharing is caring

Und ich habe mir Social Media Buttons gebaut, da bin ich ein wenig stolg drauf ;-) Ich wollte sowas immer schon mal haben – natürlich daten­schutz­kon­form. Also habe ich mir mal den c`t Shariff angeguckt und ausprobiert. Der Trick dort ist, dass letztendlich nur ein Link auf die Submission-Seiten der jeweiligen Dienste eingebaut wird – damit kommen Facebook & Co. erst dann an die Daten, wenn man auf deren Seite ist und nicht schon vorher beim Anzeigen der eingebundenen Share- und Like-Buttons.

Shariff bietet noch eine Backend-Komponente, die serverbasiert Zahlen für die Buttons abfragen kann („schon x Mal geteilt“). Dummerweise hat ausge­rech­net Twitter das Interface dafür im November 2015 abgestellt – das wäre die einzige Zahl gewesen, die mich interessiert hätte: Facebook und Reddit nutze ich nicht und Google+ kaum (Reddit ist überhaupt nur eine Verlegenheitslösung, damit ich mehr als drei Buttons eingebunden habe ;-). Aber das ist ok, ohne Zahlen brauche ich keine zusätzliche Anwendung auf meinem Server laufen zu lassen. (Und wenn ich wissen will, welcher Artikel oft geteilt wird, gucke ich in mein Server-Log ;-)

Nächster Punkt: JavaScript. Das mag ich ja nicht, wird für Shariff aber benötigt, um die Links auf die Submission-Seiten zu errechnen. Da das Zusammenbauen dieser Links kein Hexenwerk ist und ich sowieso gerade mit Smarty-Templates rumgespielt habe, habe ich das jetzt direkt in die Blogsoftware eingebaut. Ergebnis: Meine Share-Links werden direkt im statischen HTML ausgeliefert, kein JavaScript nötig.

Dann war noch das Problem, die Buttons hübsch zu bekommen. Shariff hat Font Awesome eingebunden, um Icons für die Buttons zu kriegen. Ich hatte keine Lust, für popelige vier Icons noch einmal mehrere hundert Kilobyte Font nachzuladen. Außerdem mag ich keine Seiten, bei denen irgendwelche kryptischen UTF8-Platzhalter stehen, solange der Font noch nicht geladen ist… (als NoScript-Nutzer sieht man das ständig, wenn die Fonts über JavaScript eingebunden sind). Kurze Zeit später bin ich zufällig über Fontello gestolpert und das war die Lösung: Dort konnte ich mir a) einen Mini-Font mit nur vier Symbolen zusammenklicken und b) die Symbole auf beliebige Zeichen mappen. Jetzt liegt z.B. das Twitter-Icon auf dem Buchstaben t und wird auch in einem Textmodus-Browser halbwegs sinnvoll angezeigt (der Link-Titel „auf Twitter teilen“ bleibt ja erhalten).

Mini-Problem: Fontello hat aktuell nur Font Awesome 4.3 im Bauch, damit kriege ich nur das alte Google+-Logo, das leider in der inversen Darstellung manchmal schlecht lesbar ist (es ist einfach zu filigran und das Antialiasing scheint eher die gefüllten Flächen zu betonen).

Zusammenfassung: Kein zusätzlicher Webservice, kein JavaScript, ein minimaler Icon-Font, die Icons auch im Textbrowser halbwegs brauchbar: Ein voller Erfolg :-)

So sieht das aus:

Wenn das nicht so total minimal mit acht Zeilen Code in der entries.tpl umzusetzen wäre, könnte man glatt in Versuchung kommen, die Funktion als s9y-Plugin anzubieten. Dann müsste, wenn sich mal ein Submission-Link ändert oder ein neuer Dienst dazukommt, auch nur einmalig zentral was geändert werden. Aber das Programmieren des Plugins (insbesondere die Administrationsoberfläche) wird halt deutlich umfangreicher, als das „mal eben schnell“ direkt im Template zu ändern…