Skip to content

s9y 2.1 rc1

Logo s9y Wie jedermann im Handumdrehen aus dem Beitragstitel schließt, gibt es von der Blogsoftware Serendipity (s9y) von der Version 2.1 einen ersten Release Candidate (rc1).

Ich zitiere aus Chefentwickler Garvins Blogpost:

»We feel comfortable with suggesting you to try out this release in productive environments (of course always make a backup of your database and files first).«

Neu sind u. a. die Themes »Timeline«, »Clean Blog« und »Skeleton«. Unter der Haube wurde eine Menge Code überarbeitet, was dem gemeinen Benutzer auf den ersten Blick (oder überhaupt?) nicht auffällt.

Ich werde es die Tage installieren und berichten.

Schrift bleibt bei Google und OpenSans

Ich hatte vor einiger Zeit die Schrift hier im Blog von schnödem Arial auf die etwas schönere OpenSans geändert. Arial ist meiner Meinung nach gerade in kleinen Größen auf Bildschirmen gut lesbar. Allerdings ärgere ich mich jedesmal über den fehlenden echten Kursivschnitt.

Deshalb habe ich ganz bequem hier im Serendipty-Blog beim Theme 2k11 von Matthias Mees auf die Option »Webfont OpenSans einbinden« geklickt. Die wird bei Google gehostet. Über Pro und Contra wurden ganze Kataloge verfasst und Glaubenskriege ausgefochten.

Matthias hat dazu den Artikel »Selbst gehostete Webfonts in Serendipity« verfasst. Wollte ich schon immer mal ausprobieren. Heute gemacht, gleich noch die preiswerte Schrift Calendas Plus erworben und eingebaut.

Ergebnis: es bleibt bei OpenSans von Google.

  • Weil die Calendas Plus in meinen Augen eine gewisse Schriftgröße braucht, die bei meinem Bloglayout nicht passt.
  • Weil die Ladedauer einfach zu lang ist – ruft man das Blog auf, sieht man einen Augenblick keinen Text.
  • Weil ich zwar Ligaturen mag (man achte in Matthias' Artikel auf die schönen s-t-Verbindungen, aber gerade keinen Nerv habe, mich zum Thema einzulesen, wie ich das hier eingebaut bekäme.
  • Und weil Arial, die Default-Schrift von 2k11, auf meinem Linuxrechner mit Firefox grottenschlecht aussieht.

Nunja, immerhin habe ich mir damit experimentell bewiesen, dass die aktuelle Lösung gar nicht übel ist. QED ;-)

Jetzt auch mit Avatoon!

Vorspiel

Ich lese ja mit Begeisterung Meldungen über Erdogan vs. Böhmermann. Über Rivva.de bin ich zu einem Artikel des Nullenundeinsenschubsers gekommen. Und von da zum Beitrag »Satirefreiheit ist nicht verhandelbar« auf e13.de.

Weil ich mich auf der Suche nach Futter für den Feedreader gerne auf Blogs ein bisschen umsehe, bin ich über das Avatoon-Angebot bei Kiki gestolpert. Ich liebe gute Zeichnungen! Habe ich schon erwähnt, dass ich alle Bände von »Tintin et Milou« (Tim und Struppi) im Regal habe?

Beim Preis habe ich erst einmal geschluckt. Na, eigentlich brauche ich sowas doch gar nicht. Andererseits wäre es schon schön. Hmm. Und wenn man sich vorstellt, wie viel Arbeit da drin steckt relativiert sich der Preis.

Hmm.

Aha, Kiki fährt zur re:publica – in den nächsten Tagen hat sie ganz sicher andere Dinge auf dem Plan als Avatoons zu zeichnen. Ich setze mir deshalb den 7. Mai als Termin. Wenn ich dann immer noch denke, dass ein Avatoon eine gute Idee wäre, sehen wir weiter.

Bis dahin kann ich ja mal ein paar Fotos von mir zusammensammeln und überlegen, was ich in den Bestelltext schreiben könnte. Natürlich nur so theoretisch, falls ich überhaupt bestelle.

Judgement Day*

Ach verwünscht. Ich will so ein Ding. Außerdem muss man sich ab und zu etwas gönnen. Ein Eis. Oder ein Avatoon. Also erstmal höflich bei Kiki angefragt, ob sie überhaupt Zeit hat. Sie hat. Und möchte wissen, was mir inhaltlich und stilistisch so vorschwebt. Tief luftgeholt und eine Mail geschickt, die ich hier in Auszügen wiedergebe:

Ja, was schwebt mir vor? Da habe ich mir jetzt schon einige Zeit den Kopf zerbrochen und keine wirklich konkrete Vorstellung.

Da ich zu viele verschiedene Hobbys habe (Saxophon spielen, fotografieren, Hörbücher sprechen), scheidet es wohl aus, eins von diesen Themen ins Bild einzubauen.

Ich hab einfach mal ein paar Fotos zusammengeworfen, vielleicht kannst Du damit etwas anfangen?

Fotos

Wie ich selbst überrascht festgestellt habe, trage ich fast immer diese grüne Kaputzenjacke (in HTML wäre das etwa #99d738). Und täglich eine Mütze (im Winter schwarz, im Sommer beige) oder einen Hut.

Ich mag gerne kräftige Farben - also nicht pastell, mag auch blau, hmm ... und mein Blog hat immer wieder die Farbe Blau (#3c60b4) und ein leichtes Gelb für den Hintergrund (#fffaed). Muss aber nicht sein.

Zum Stil: tja, was nimmt man da? Im Regal habe ich die kompletten Bände von Tintin stehen, natürlich Asterix, Lucky Luke und Gaston. Vielleicht hilft das?

Jones Aktuell habe ich bei Twitter als Bild das hier mit dem Indiana-Jones-Hut drin ...

Fotograf ... bei Google-Plus das mit der Sucherkamera:

Äh, ja. Schwierig auf den Punkt zu bringen, sorry. Am ehesten wahrscheinlich mit grüner Jacke und Mütze, oder?

Kannst Du damit etwas anfangen?

Natürlich konnte sie. Und hat gefragt, ob sie nicht doch ein Saxophon aufs Bild nehmen könnte? Klar.

Ergebnis

Sobald ich den Entwurf sah, breitete sich ein lang anhaltendes Grinsen auf meinem Gesicht aus. Nach ein paar Korrekturen, bei denen es um den S-Bogen ging (ich spiele ja kein Alt-Saxophon) hier das Ergebnis:

Avatoon

Gefällt mir. Gefällt mir sehr! :-)

Schriftwechsel

Die Beispiele in diesem Beitrag funktionieren nur im Blog, nicht im Feedreader

Bisher hatte ich im Blog die vom Template 2k11 gesetzten Schriftarten: Helvetica / Arial / sans-serif. Für die Nicht-Webdesigner: ist auf dem Rechner die Schrift Helvetica vorhanden, wird die benutzt, wenn nicht dann Arial, wenn es die auch nicht gibt, eine serifenlose Schrift.

Was Serifen sind? Die kleinen ähm, Dingelchen an den Buchstaben. Das kann ich besser zeigen als erklären:

Ich bin ein Text in Serifenschrift

Ich bin ein Text in serifenloser Schrift. Auf französisch »sans serif«

Wo war ich? Also im Endeffekt dürften die meisten Leser mein Blog in Arial zu Gesicht bekommen haben. Die wird oft als langweilig geschmäht. Außerdem hat sie keinen Kursivschnitt. Was das schon wieder ist? Auch hier Beispiele:

Bla blub gurgel normal

Bla blub gurgel kursiv

Bla blub gurgel normal in Arial

Bla blub gurgel kursiv in Arial

Bei Arial werden die Buchstaben bei der Einstellung kursiv einfach nur, hm, sagen wir schräg oder schief angezeigt. Während bei guten Schriften dafür eigene Formen zum Einsatz kommen. Am besten sieht man das am Buchstaben a.

Die aktuelle Schrift hier im Blog ist gerade PT Sans, die ich im Blog von Isabel Bogdan entdeckt habe (via Mokita bzw. dort dann über Die letzte Drachentöterin, die ich mir auch anschaffen möchte – Danke, Fabian!).

Die Schrift ist über Google Fonts eingebunden (Achtung Achse des Bösen!). Führt zu geringfügig längeren Ladezeiten, sieht aber interessanter als Arial aus. Und kann man beim Template 2k11 per Mausklick einbinden (Alternativ ginge es auch, die Fonts auf meinen Webserver zu speichern und von dort zu laden).

Ich bin mir nur nicht sicher, ob sie auch wirklich angenehmer zu lesen ist. Denn man kann über Arial sagen was man will: auf kleinen Bildschirmen finde ich sie gut lesbar.

Machen wir doch einen Textvergleich:

Blindtext in PT Sans (zumindest am 3. Mai 2016)

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen.

Blindtext in Arial bzw. sans-serif

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen.

Timeline Test

Wie berichtet hat Don ein neues s9y-Theme gebaut. Musste ich natürlich ausprobieren.

Hier ein paar erste Erfahrungen damit.

  • Unbedingt das Readme-File lesen. Es gibt ein paar Besonderheiten, die man beachten muss, z. B. notwendige Plugins.
  • Das Theme ist darauf aufgebaut, dass es für jeden Eintrag ein Bild gibt, das sog. Entry Image. Das wird über "Erweiterte Optionen" aus der Mediendatenbank ausgewählt. Steht anschließend bei jedem Artikel über der Überschrift. In der Einzelartikelansicht je nach Breite über oder links neben dem Text.
  • Das Bild muss eine Mindestgröße haben, andernfalls wird es "hochskaliert", was bei kleinen Bildern bescheiden aussehen kann (sehr pixelig wie das Serendipity-Logo in diesem Beitrag). Habe Don nach einer optimalen Größe gefragt. Will nicht jeden Handy-Nutzer mit 1200px-Grafiken ärgern.
  • Ohne Bild wird eine Default-Grafik angezeigt, den man durch ein eigenes Bild ersetzen kann (im Template-Ordner unter ..timeline/img). Nicht wundern, ich habe aktuell die Default-Grafik-Datei gelöscht. In manchem Browsern wird deshalb ein kleines Quadrat links oben in jedem Beitrag dargestellt.
  • Anscheinend wird dieses Entry-Bild nicht im Feed angezeigt, zumindest erscheint es nicht in meinem tiny tiny rss.
  • Ich nutzte bisher das 2k11-Theme, das ich per user.css ein bisschen angepasst hatte. Diese user.css im 2k11-Template wird VON JEDEM THEME benutzt, wenn dort keine eigene user.css vorliegt. Deshalb unbedingt unter templates/timeline wenigstens eine leere Datei user.css erstellen!
  • Links werden nicht unterstrichen dargestellt. Manche sogar ohne farbliche Kennzeichnung. Hm. Generell scheint mir, das das von mir gewählte Dunkelblau sich bei den Links schlecht vom normalen Text abhebt. Hmm.

Update

Ich glaube, ich habe eine Lösung für das entry-image gefunden. Siehe bei diesem Eintrag. Kann noch ein bisschen Feinschliff vertragen, scheint mir aber ein gangbarer Weg. Das Bild hat die Maße 800x150px, scheint mir ein guter Kompromiss. Und das muss dann auch nicht im Feed sein. Damit die Timeline funktioniert, sollte das entry-image >= 390px sein.

Update 2

Das entry image wird in der Artikelansicht als Bild links oben angezeigt. Je nach Größe fließt der Artikeltext drum herum oder auch nicht. Das Default-image wird NICHT in der Artikelansicht gezeigt.

Doch kein responsive Design für Blue note

Wer sich wundert, was aus meinem Projekt Responsive Design für Blue note geworden ist: nichts.

Ich habe ein paar Bandkollegen gefragt, welche Punkte sie am meisten stören würden und von allen die Rückmeldung bekommen, dass der aktuelle Stand gut sei. Anscheinend bin ich der einzige, dem es nicht gefällt. Das ist aber keine ausreichende Begründung für eine größere Webseitenumgestaltung.

Mach ich in der Zeit eben Sprechübungen. Oder lese in der Badewanne.

Responsive Design für Blue note

Ursprünglich hatte ich mein Blog angefangen, um den Umbau bzw. die Renovierung der Website der Blue note BIG BAND zu dokumentieren. Das ist lange her.

Genauso lang wie die letzten großen Änderungen an der Webseite. In den letzten Jahren habe ich nur Inhalte aktualisiert. Also Termine eingetragen, Fotos der Gäste hochgeladen und sowas.

Änderungen am Aussehen habe ich schleifen lassen. Genauso die Bandchronik. Wobei ich bei der die Hoffnung hatte, dass der Berndleader vielleicht an der weiterschreibt.

Das soll jetzt alles besser werden. Seit Dezember habe ich ja ein Smartphone. Und festgestellt, dass die Bandseite damit, ähm, suboptimal aussieht. Also höchste Zeit, das zu verbessern. Stichwort Responsive Webdesign. Für die glücklichen Unwissenden: damit ist gemeint, dass eine Webseite sich dem Gerät des Betrachters anpasst, also auf jedweder Bildschirmgröße gut lesbar und auch bedienbar ist. Also über Touchscreens und Tastatur (ohne Maus).

Klingt wie die eierlegende Wollmilchsau? Ist auch genauso komplex.

Für den Anfang habe ich die Problemfelder Navigation, Fotogrößenanpassung und Behandlung der Sidebar ausgeguckt.

Bei der Navigation stellt die Chronik und der Bereich um Jazz an Neujahr mit der Subnavigation die größte Herausforderung dar. Auf einem Telefon würde allein die Navigation den Bildschirm mehr als ausfüllen. Die muss also überarbeitet und ausblendbar sein.

Genauso ist die Sidebar zu überarbeiten. Dummerweise enthält genau die auf der Homepage die interessanten Informationen (neue Termine, aktuelle Infos etc.), ist im Gerüst der Webseite nach alter Tradition aber am Ende angeordnet. Außerdem sollte sie auf kleinen Bildschirmen nicht neben, sondern unter dem Hauptinhalt angezeigt werden.

Daraus habe ich mir für den Anfang diese Ziele gesetzt:

  • die Navigation muss auf kleinen Bildschirmen ausgeblendet werden und über einen Knopf einblendbar sein. Möglichst simpel und ohne JavaScript-Gedöns
  • die Seitenspalte muss auf Mobiltelefonen automagisch nach unten wandern
  • die wichtigsten Inhalte müssen oben stehen und im Haupteil, nicht in der Seitenspalte
  • Fotos müssen sich an kleine Bildschirme anpassen
  • Fotos generell eher wieder kleiner machen, um die Ladezeiten zu verbessern

Für die ersten beiden Punkte habe ich mit der Lösung von Ian Yates herumgespielt. Warum mit der? Ich wollte keine Lösung mit diesem sogenannten Hamburger-Symbol (☰), weil das nicht jedem Nutzer geläufig ist. Und nichts mit Scriptsprache.

Dabei sind nacheinander die folgenden 4 Versionen entstanden:


http://u1amo01.de/css_tst/musterloesung_content_amo-v1/index.html
http://u1amo01.de/css_tst/musterloesung_content_amo-v2/index.html
http://u1amo01.de/css_tst/musterloesung_content_amo-v3/index.html
http://u1amo01.de/css_tst/musterloesung_content_amo-v5/index.html

Nächster Schritte: größere Schrift, größere Flächen bei der Navigation für Leute mit dicken Fingern (wie mich), skalierende Fotos.

Alle Webseiten sehen gleich aus?!

Der Artikel All Websites Look The Same bei Webdesign-Altmeister Zeldman verdirbt mir gerade ein bisschen den Spaß am neuen Layout. Weil er recht hat ...

Screen Shot

Eigentlich braucht kein Mensch so ein großes Bild oben. Verlängert nur die Ladezeit. Ebenso die eingebundene Schrift. Hmm. Ich denke drüber nach und gehe so lange zurück auf 2k11. Zugegeben, das ist als Default-Serendipity-Template auch kein Ausbund an Originalität, sieht aber wenigstens ein bisschen anders aus. Und scheint mir wesentlich schneller zu laden.

Und damit es richtig Old-School wird, habe ich das Zitat-Plugin wieder eingebaut ;-)