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!

Nette Spielerei: Das da ist ein Ausschnitt aus der  Blog-Matrix, welche auf dem Bloggeramt.de zu finden ist. Jedes Häuschen ist der Link zu einem Blog. Wer kohlhof.de findet … wird sehr viel Geduld bewiesen haben.

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.

So funktionierts, zum Beispiel mit Links:

• Klicken Sie bitte auf die Schaltfläche “Link”
• Ein neues Fenster erscheint, kopieren Sie hier bitte den kompletten Link rein.
• Klicken Sie in dem Fenster auf OK.
• Der passsende HTML-Code wird ins Kommentarfeld eingefügt. Da steht dann zum Beispiel <a href=”http://www.kohlhof.de/kohlhof”>
• Klicken Sie jetzt auf  “Close-Tags”. Dann ist der Link komplett. <a href=”http://www.kohlhof.de/kohlhof”></a>
• Zwischen den beiden HTML-Befehlen sollten Sie jetzt noch den Text eingeben, auf den andere Leser später klicken können. Also zwischen den beiden spitzen Klammern. Zum Beispiel so: <a href=”http://www.kohlhof.de/kohlhof”>Blog von Christian Kohlhof</a>

• Ein zweites Fenster erscheint, hier können Sie einen Text reinschreiben, der statt der Internetadresse angezeigt wird, und auf den man dann klicken kann.
• Klicken Sie wieder mal auf OK.

Dieses Kommentarfeld hier unten ist dann zum Testen freigegeben. (Bedenken Sie bitte, dass der Spamschutz-Mechanismus mehr als zwei Links in einem Kommentar als Werbemüll einstuft und dieser dann erst vom Blog-Chef freigeschaltet werden muss.)

Viel Spaß weiterhin auf kohlhof.de!