Eine echte kohlhof.de-Kritzelei

wieder mehr Ansporn gibt, neue Texte zu schreiben).

Dieses Layout gibt es tatsächlich nur hier – ich bitte die Leserschaft schon jetzt um Hinweise und Meinungen, wie das neue Template gefällt – und ob es irgendwo noch fehlerhafte Darstellungen gibt. Vielen Dank!

Das neue kohlhof.de-Theme heißt “kritzel” – und sieht ja auch an einigen Stellen bekritzelt aus. Die Idee habe ich aus meinem Arbeitsleben übernommen. Selbstverständlich verfolge ich Besprechungen und Konferenzen stets mit einem ebenso angemesssenen wie notwendigen Maß an Aufmerksamkeit. Aber fast schon automatisch fange ich an, auf meinen Notizzetteln herumzuklieren. So entstehen Muster aus Kringeln, Kurven und Linien – und manchmal auch kleine Bildchen (meine Omi war übrigens auch eine ganz eifrige Kringel-beim-Telefonieren-Malerin).

Also habe ich mal angefangen, mit dem Grafik-Tablett zu kritzeln. Drei Dinge sind an diesem Theme besonders:

• Da wären zunächst die blauen grafischen Elemente, insbesondere die kleinen Pictogramme, die neben einigen Postings angezeigt werden. Sie werden abhängig von den verwendeten Schlagwörtern angezeigt und sollen für unendliche Neugier bei Ihnen, geschätzte Damen, werte Herren sorgen, weil sie sich stundenlang durchs Blog klicken, um neue exklusive Zeichnungen aus der Hand des Blogbetreibers zu finden.
• Die Meta-Daten jedes Beitrags wie das Veröffentlichungs-Datum, die Anzahl der User-Kommentare und die Schlagwörter stehen nun rechts neben jedem Text. Ich hatte es zuvor lange als störend empfunden, dass Schlagwörter und dergleichen immer über und/oder unter dem Text zu finden waren. Meinem Eindruck nach hindert das den Lesefluss. Sicherlich sind Meta-Angaben notwendig – aber rechts am Rand lenken Sie hoffentlich nicht mehr so stark vom Wesentlichen ab.
• Dieser Blog ist mein digitales Wohnzimmer, und ich habe einen Untermieter: katharineum94.de. Hier gibt es Infos für meine ehemaligen Mitschüler. Auch wenn Sie nicht zu den Katharineern gehören, klicken Sie doch gleich mal oben auf den Link, sie werden dann schon merken, was die dritte neue Besonderheit ist.

Ich habe hier schon öfter über das Layout von Internetseiten geschrieben. Die Tatsache, dass kohlhof.de nun also so bekritzelt aussieht, dass die Meta-Daten verrückt sind, dass Fotos nun einen Rahmen haben – all das lässt sich mit Hilfe von CSS-Angaben

Eine von vielen CSS-Zengarden-Varianten: Das Template "Entomology" erinnert an die Schmetterlings-Sammlung im Naturhistorischen Museum.

einstellen. Cascading-Style-Sheets dienen zur Definition jedes einzelnen Layout-Elements einer Internetseite: Schriftart, -größe, -farbe und hunderte andere Werte. Ich kenne mich damit ein wenig aus. Aber tatsächlich nur ein wenig. Trotzdem macht es mir erschreckend viel Spaß, stundenlang Blöcke, Klassen und Absätze zu definieren.

Inspiration kommt dabei unter anderem von der wundervollen Internetseite csszengarden.com.

Das Template "Mediterranean" macht aus der Standard-HTML-Datei eine Internetseite mit Meerblick. Da waren Profis am Werk.

Dort zeigen Designer, die wahrscheinlich sogar in CSS träumen, was mit diesen Layout-Definitionen wirklich möglich ist. Das Konzept des CSS-Zen-Gardens ist, dass Designer eine unveränderliche, vorgegebene HTML-Seite, also eine Internetseite, neu gestalten, und zwar allein

Der Kreativität sind keine Grenzen gesetzt. Dieses Template heißt "60's Lifestyle". Was versierte Designer mit Grafikprogrammen, CSS und vor allem den richtigen Ideen alles schaffen, zeigt der CSS-Zen-Garden in hunderten Beispielen.

mit CSS-Angaben (und mithilfe grafischer Elemente, die über CSS eingebunden werden). Das Durchblättern dieser Designs kann tatsächlich einen gewissen meditativen Einfluss haben.

Wie lief der Erneuerungsprozess von kohlhof.de?

Grundsätzlich: Wenn es keine Style-Sheets gäbe, dann sähen Internetseiten 1. alle sehr ähnlich und zudem langweilig aus. Gäbe es kein Style-Sheet, sähe diese Seite so aus:

Alles untereinander: Ohne spezielle Layoutangaben stellen Browser Internetseiten nach einem standardisierten Schema dar: Blaue Links, und alles im Times.

Wir sind uns sicherlich alle einig: So kann es nicht bleiben. Um für WordPress-Blogs, wie dieses eines ist, ein neues Layout zu entwickeln, lädt man sich am besten eines der tausenden bereits vorhandenen Templates, um dieses dann an eigene Bedürfnisse anzupassen. Dabei sollte man darauf achten, dass die Vorlage, die man modifizieren möchte, nicht zu überladen ist (Das vorherige kohlhof.de-Layout basierte auf dem Template-System “k2″ – einem sehr mächtigen System, das nicht nur jede Menge zusätzliche, praktische Layout-Features beinhaltete, sondern auch zusätzliche Funktionen – das alles ist aber für Laien, Anfänger und einigermaßen Fortgeschrittene schwer zu durchschauen und leider auch nicht besonders gut dokumentiert – was man von einem kostenlosen und ehrenamtlichen Projekt ja auch nicht grundlegend erwarten muss).

Eine vergleichsweise einfache, schlanke Layout-Vorlage ist zum Beispiel das Theme “toolbox”. Es ist auf dem aktuellen technischen Stand – und der Code ist auch schon recht übersichtlich. Mit Toolbox in seier ursprünglichen Form sieht dieser Blog dann so aus:

Grundsätzliches Layout: "Toolbox" schafft schon mal Ordnung: Es gibt einen Seitenkopf, eine Menüzeile, einen Hauptteil und eine Seitenspalte. Aber die Schriftformatierung ist noch sehr... nun ja: unangenehm.

Was dann folgt, ist stundenlanges Layouten, Eintippen von Abständen und Laufweiten, Farbcodes, dazu das Zeichnen mit dem Grafiktablett sowie das Überprüfen im Browser. Für gewöhnlich ist in dieser Periode keine Zeit für Dinge wie Rasieren, frische Luft schnappen oder Mal-Rechtzeitig-Ins-Bett-Gehen. Keine Woche später sieht kohlhof.de nun also so aus.

Mit Stil bekritzelt: kohlhof.de im neuen Design. Was halten Sie davon?

Das alles ist nur möglich, wenn man weiß, wo man nachschlagen kann, falls etwas nicht auf Anhieb funktioniert (und das kommt häufig vor, speziell wenn man tief in verschachtelten Element-Klassen rumfuhrwerkt). Literatur über das Arbeiten mit CSS-Konfigurationen war und ist unter anderem:

• Meyer, Eric A.: Cascading Style Sheets Das umfassende Handbuch; O’Reilly, Köln (2005)
• Shea, Dave, Holzschlag, Molly E.: Zen und die Kunst des CSS-Designs; Addison-Wesley, München (2008)
• Hoffmann, Manuela: Modernes Webdesign Gestaltungsprinzipien Webstandards Praxis; Galileo Press, Bonn (2008)
• Dazu dann noch das immer noch sensationelle Internet-Handbuch selfhtml, das auch über CSS-Angaben aufklärt.

Jüngste Neuerungen für die neuen CSS-Versionen 3 und HTML 5 sind in obigen Nachschlagewerke aber kaum berücksichtigt.

Entscheidend ist aber auch zu wissen: Jeder Browser stellt Webseiten leicht anders dar. Das liegt auch an den Schriftarten, die auf dem Rechner installiert sind, von dem aus Seiten aufgerufen werden. Wer also Webseiten gestaltet, muss wissen, dass sie nicht auf allen Monitoren identisch angezeigt werden. Das Ziel ist also, die Darstellung in allen möglichen Programmen annähernd identisch zu bewerkstelligen. Auch in diesem Zusammenhang bitte ich um sachdienliche Hinweise per Mail oder in den Kommentaren.

Viel Spaß mit kohlhof.de!

Ich verspreche, dass das nicht wieder passieren wird und habe schnell alles behoben. Nach dem zwischenzeitlichen iran-grünen Auftritt ist hier nun also alles wieder ordnungsgemäß kohlhof.de-rot.

Die Marmeladeurin meines besonderen Vertrauens jedenfalls hat sich bereit erklärt, eine in der Peergroup entstandene Dissertation zu korrigieren – und die liegt in Form von tex.-Dateien vor. Seit Stunden beschäftige ich mich nun damit, geeignete Software auszuprobieren, Zusatzpakete herunterzuladen und LaTex zu verstehen. Und ja, am besten sollte die korrigierte Version des mehrere hundert Seiten starken Textes gestern wieder beim Autor sein. Es ist ja nicht so, dass ich auf solche Herausforderungen bloß gewartet hätte. Und ich kann mir kaum vorstellen, dass es noch eine angenehmere Art geben kann, das Wochenende zu verbringen. Sobald ich den Nutzen und Frommen dieses Latech-Dingens einigermaßen durchschaut habe, werde ich gern ein Exzerpt meines Erkenntnisgewinns hier preisgeben. Zu irgendetwas muss das alles ja gut sein.

An dieser Stelle möchte ich die Gelegenheit nutzen und ein Werk zitieren, dessen Lektüre mich in meiner Jugend stark geprägt hat: Es sind die Comic-Abenteuer von Clever&Smart und der darin mannigfaltig verwendete Fluch “Grmblfjx!”. Ich finde, der passt.

PS: Immerhin wird mir dieser Eintrag ein par Suchmaschinentreffer von Leuten liefern, die nach irgendwelchem Latex-Zeugs für quietschende Stunden zu zweit suchen. Schließlich beschert mir auch der Eintrag Ultra-Porno in steter Regelmäßigkeit Besucher aus allen Schichten, Milieus, Gruppen und Ecken dieser Welt…

• Stand der Dinge:
• Habe jetzt ein Backup der Datenbank und sämtlicher Dateien, die kohlhof.de bilden, gemacht und gut verpackt in den Tresor gelegt. Das ist meine Lebensversicherung, denn wenn das Update fehlschlägt, kann ich hoffentlich den vorherigen Zustand wieder herstellen.
• Jetzt schalte ich sämtliche Plugins ab. Ab jetzt werden das auch die Leser hier merken.
• Die nächsten Schritte sind dann löschen der alten und ersetzen durch die neuen Dateien… wir sehen uns (hoffentlich bald wieder)
• Weitere Infos für WordPress-Nutzer gibt es hier: Upgrade-Anleitung
• 09:14 – Herrlich, alles funktioniert. Das Update an sich lief problemlos. Die Nutzer werden nun feststellen, dass sich auch imHintergrund einiges geändert hat. Dazugleich mehr.

Einziges bisher festgestelltes Problem betrifft die Optik -und damit vor allem Theme-Entwickler. WordPress vergibt nun für einige Absätze andere CSS-Klassen-Namen. Das ist äußerst misslich. Dadurch wird das Layout wieder zurückgeworfen. Hintergrund: In einer CSS-Datei sind die Layoutinformationen für jedes Element auf einer Internetseite enthalten, also Schriftgröße, Position, Ränder und Abstände. Mankann nahezu jedem einzelnen Zeichen spezielle Layoutangaben zuweisen, wenn man es mit einer so genannten Klasse eindeutig bezeichnet. So könnten zum Beispiel diese Wörter mit “.dicker” bezeichnet und damit formatiert werden, weil diese Klasse eben mit diesen Layout-Angaben verbunden ist. Das gilt für alle Bereiche, die mit dieser Klasse ausgezeichnet sind.

In einem komplexen System wie WordPress werden zig dieser Klassen automatisch vergeben. Dieser Absatz zum Beispiel gehört unter anderem zu den Klassen “hentry p1 post publish author-christian“. Das erleichtert den Betreibern eines Blogs die Arbeit. Sie müssen nur noch in der CSS-Datei die entsprechende Klasse definieren, bzw. sie können dies tun, müssen es aber nicht. Wenn man die Klasse nicht explizit definiert, wird eben das entsprechende Element in der Standard-Einstellung dargestellt. Hätte ich eine Klasse author-christian definiert, könnte ich zum Beispiel festlegen, dass alles mit grünem Rand umflort wird, was zu dieser Klasse gehört.

Mit dem Update auf die neue WordPress-Version haben sich nun offensichtlich einige der automatisch generierten Klassenbezeichnungen geändert, was hier vor allem die Meüs-Spalten betrifft. Da stehen jetzt also neue Bezeichnungen im Code, die in meiner mühsam zurechtgefrickelten CSS-Datei nun aber ins Leere weisen. Ich kann nicht gerade behaupten, dass mich das glücklich macht (das Anpassen war dann aber doch in kurzer Zeit erledigt).

Die Startseite und chronologische Übersicht der Artikel erscheint weiterhin in einem Rot-Ton (aber nicht mehr ganz so knallig):

Beiträge mit tagesaktuellem Bezug sind grün gehalten

Texte zum Thema Radio und Journalismus sind knusprig goldbraun eingefärbt…

… und allgemeine Beiträge kommenin einem dezenten Blau daher.

Ist diese Farbenspielerei grundsätzlich hilfreich oder bloß verwirrend?