Behind The Site

Auf dieser Seite erzähle ich kurz etwas über das CMS, das auf diesen Webseiten läuft, und über das Grundgerüst YAML.

Die alte Version 4 meiner Website - Warum ich einen Wechsel wollte

Ich hatte mein Layout nach einer gewissen Weile satt: Es war nicht komplett selbst gemacht, was es mir auch erschwert hat, es nach meinen Bedürfnissen anzupassen. Außerdem ging mir Wordpress mit der exponentiell zunehmenden Anzahl von Sicherheitsupdates langsam auf die Nerven. Der Wunsch nach einem Layoutwechsel, der gleichzeitig mit einem kompletten CMS- Wechsel verbunden sein würde, wurde größer.

Version 5.3 - Die Idee

Im Sommer 2009 kam in mir langsam der Wunsch auf, doch mal das Design meiner Website zu ändern. Bestärkt wurde ich darin, als ich zum ersten Mal die Sitepoint- Website sah: Die Navigation gefiel mir sehr gut, sogar so gut, dass ich mir gleich die Bilder abspeicherte und die Navigation einmal selbst zusammenbaute.

Als ich damit fertig war, war mir klar: Genau diese Navigation musste ich auch bei meinem Relaunch einbauen. Mit dieser Entscheidung wurde mir auch klar, wie der gesamte Kopfbereich (header) der Website aussehen sollte: Wie bei der alten Version mein Name in groß, als Schriftart (auch für sämtliche andere Überschriften) sollte Georgia herhalten. Das Blau für den Kopfbereich (und auch für den Fußbereich) hat sich aus der Navigation ergeben.

Als sonstige Schriftart für den eigentlichen Inhalt (und auch die Navigation) habe ich erst Verdana in Erwägung gezogen, bin aber, nachdem ich durch praegnanz.de auf Tahoma aufmerksam geworden bin, zu dieser Schriftart übergewechselt. Sie ist zwar enger als Verdana und auch kleiner, aber auch einfach viel schöner. Verdana bleibt in der font-family aber an zweiter Stelle, gefolgt von sans-serif.

Die restliche Inhaltsgestaltung ergab sich dann im Laufe der Zeit:

• Statt drei Spalten sollten jetzt nur noch zwei Spalten existieren. Dabei sollten in der linken Spalte kleinere Randinformationen wie Links oder Downloads geboten werden und in der rechten der Hauptinhalt. Dabei sollte sich die Breite der kleinen Spalte an der einzelnen Navigationspunkten der Topnavigation orientieren. Heißt im Klartext: Die Spalte ist in der Realität genauso breit wie zwei der Navigationspunkte zusammen.
• Die Suche wurde nach rechts oben neben die Navigation plaziert.
• Die ehemalige Startseite (auch Splashseite genannt, weil sie sozusagen das Intro für den eigentlichen Webauftritt bildet) mit dem Cicero- Bild (und dem Bilderaustauscheffekt) existiert nicht mehr. Man landet jetzt direkt auf dem richtigen Webauftritt. Auf dieser neuen Startseite sind nun die jeweils aktuellsten Beiträge aus dem Weblog und der aktuellste Geschichtsaufsatz zu lesen. Auch Möglichkeiten zum direkten Feedabonnoment (für das tägliche Nachschauen, ob sich irgendwas geändert hat) wurden durch die RSS- Icons neben den jeweiligen Überschriften geschaffen. Der dicke ehemalige “Subscribe to (Weblog) feed”- Button ist nicht mehr vorhanden.

Eine erste Befragung meiner Mutter, wie sie das neue Design im Vergleich zu dem alten denn finde, verlief positiv: Sie fand das Layout (genau wie ich) irgendwie aufgeräumt, cleaner. Aber die Ähnlichkeit zu dem alten Layout besteht trotzdem noch. Sehr gut. Setzen. Eins. Genau das, was ich wollte. Diese positive Reaktion hat mich nur noch weiter bestärkt, das Projekt auch wirklich zu einem glücklichen Ende zu bringen.

Und so sieht das Ergebnis aus (Vergleich):

Prima, das Design stand. Jetzt hieß es, noch die ganzen gewünschten Javascript- Effekte einzubauen, als da wären:

• Bei den “Nach oben”- Links ein sanftes “Nach-oben-gleiten” ermöglichen
• Den Lightbox-Effekt durch das jQuery-Plugin Fancybox austauschen.
• Bestimmte Codebeispiele in Blogbeiträgen sollten Syntaxhighlighting erhalten.

Insgesamt sind die Effekte so gewählt, dass auch bei ausgeschaltetem Javascript noch gut durch die Seite navigiert werden kann.

So. Design und Javascript- Effekte waren up and running, wie man so schön sagt. Allerdings erst in einer statischen Variante der Seite. Auch den neuen Auftritt wollte ich ja nicht von Hand (also statisch) pflegen. Das wäre vor allem wegen der Blogeinträge ziemlich unhandlich geworden. Was noch fehlte, war die CMS- Integration. Hier wollte ich ja nicht mehr auf Wordpress setzen, unter anderem auch weil ich keine Lust hatte, mich mit dem absolut erbärmlichen Templatesystem auseinander zu setzen, wo man noch tausend kleine PHP- Schnipsel an verschiedensten Stellen im Quelltext plazieren muss, um die Beiträge anzeigen zu lassen.

« Das muss auch anders gehen. » habe ich mir dann gedacht und habe (nach langer Suche nach dem CMS) Expression Engine gefunden.

Das CMS meiner Wahl: Expression Engine

Die Firma Ellislab hat das wunderbare CMS Expression Engine geschaffen. Expression Engine hat mich u.a. durch sein hervorragendes Templatesystem überzeugt. Hier werden Weblogartikel über den Befehl {exp:weblog:entries weblog=“HBB”} eingebunden. Das ist irgendwie intuitiver als das Wordpress- Gedöns.

Des weiteren werden in Expression Engine alle Inhalte über sogenannte Weblogs gesteuert, wobei der Term “Weblog” nur meint: “Ein Platz zum Abspeichern deiner Daten.” Diese Daten können dabei in einer Struktur deiner Wahl vorgehalten werden. Das macht die Expression Engine so unglaublich flexibel. Selbst die Referenzen bei meiner Geschäftswebsite habe ich als kleines Weblog angelegt.

Die einzigen Nachteile der Expression Engine sind meiner Meinung nach die Kosten (eine kommerzielle Lizenz für Version 2.0 kostet 300 US-Dollar) - hier gibt es allerdings mit der Core-Version eine lohnenswerte kostenlose Alternative (sie gibt es allerdings nur für den 1.6-Zweig der EE, für EE 2.0 ist keine kostenlose Version mehr angedacht), und das etwas unbequeme Handling der Eingabe der Inhalte. Hier sollte ein WYSIWYG-Editor wie CKEditor o.ä. zum Standard gehören. Auch die Bilderverwaltung ist - verglichen mit der von Wordpress beispielsweise - ein Graus. Allerdings überwiegen die Vorteile meiner Meinung nach die Nachteile, vor allem da die genannten Nachteile vermutlich - hoffentlich - mit Version 2.0 behoben werden.

Das Grundgerüst: XHTML / CSS- Framework YAML

Von Dirk Jesse stammt das XHTML / CSS- Framework YAML. YAML hat es mir erlaubt, ohne großen Aufwand ein browserunabhängiges 2- Spalten- Layout zu erstellen. Es hat mir außerdem on the fly (wie man so schön sagt) noch alle Bugfixes für den Internet Explorer und andere Browser bereitgestellt, die in Verbindung mit Spaltenlayouts per float in diesen Browsern auftreten.

Außerdem habe ich durch YAML die Möglichkeit, mit einer kleinen Änderung im Code von fixer Breite (die momentan mit 960px festgelegt ist) auf fluides Design umzusteigen, welches sich dann über den ganzen Bildschirm erstreckt. Auch bei fluidem Design brauche ich mir dank Jesses Arbeit keine Sorgen um irgendwelche Bugs im IE und anderen zu machen, die von dem fluiden Design herrühren.

YAML bietet mir neben seinen normalen Columns auch noch die Subcolumns, mit denen ich zum Beispiel auf der Startseite die Kurzanreißer von Weblog, Geschichtsaufsätzen und Kolumnen so schön zu positionieren - ganz ohne Tabellen. Dadurch, dass man diese Subcolumns dabei beliebig verschachteln kann, konnte ich folgende komplexe Teilung erreichen: Erst wird ein Bereich in der Teilung 80% / 20% erstellt. Innerhalb des 80% großen Containers sind nochmal zwei Subcolumns im Verhältnis 50% / 50% positioniert.

Neue Funktionen & Verbesserungen (ungeordnet)

• Die wohl wichtigste Neuerung sind die mehreren Blogs, die jetzt hier auf dieser Website laufen: Das Weblog und das Blog für die Geschichtsaufsätze und die Terminübersicht auf der Startseite.
• Eine kleine, aber feine Neuerung ist, dass die Schriftgrößen im CSS nun in Prozentangaben angegeben werden. Das sorgt dafür, dass die Schriften bei Seiten- und Schriftvergrößerung schön “mitzoomen”.
• Wie schon angesprochen, werden auf der Startseite die RSS- Feeds für Weblog, Geschichtsaufsätze und Termine nun zum direkten Abo angeboten.
• Da ich nicht recht Lust hatte, mich mit der mtimport- Utility von Expression Engine zu beschäftigen (um die alten Weblogeinträge von Wordpress zu importieren), weil ich die Inhalte sowieso völlig umstrukturieren wollte, musste ich alles von Hand übertragen: Hierbei habe ich einige Rechtschreibfehler beseitigt, die sich im Laufe der Zeit angesammelt hatten. Dadurch konnte ich auch einige tote Links wieder aktualisieren (bzw. entfernen).
• Die Sidebar wurde - wie schon gesagt - völlig umstrukturiert: Hier finden sich jetzt Randinformationen zu den jeweiligen Seiten. Nur beim Weblog hat man noch die Möglichkeit, sich die einzelnen Themengebiete (innerhalb des Weblogs) und die Blogarchive anzusehen.
• Die Seite “Meine Leistungen” existiert nicht mehr. An ihre Stelle gerückt ist eine komplett eigenständige Website. Den Link zu dieser Seite finden Sie in der Fusszeile.
• Die Seite “Links” existiert in der Form, wie sie früher war, nicht mehr. Stattdessen wurden die Links, wenn sie in den Kontext passten, bei den jeweiligen Unterseiten (zum Beispiel bei den Geschichtsaufsätzen) untergebracht. Der Rest wird in Form der Wochenlinks nochmal aufgefahren. Bei den Wochenlinks, einer mit dem Relaunch neu dazugekommenen Rubrik, handelt es sich um im Wochenabstand präsentierte interessante Netzfundstücke mit einem kurzen Kommentar meinerseits, die als Kategorie im Weblog geführt werden; es besteht also auch die Möglichkeit, sich alle Wochenlink-Beiträge untereinander anzeigen zu lassen. Ein fehlerfreies Funktionieren der Links in x Jahren kann ich (aufgrund der Menge) nicht mehr garantieren.
• Der 0815-Lightbox-Effekt, der bei so gut wie allen Bildern, die ich früher eingefügt hatte, auftauchte (dieses sanfte Verdecken des restlichen Bildschirms und das Größerwerden des Bildes), wurde gegen die schönere jQuery-basierte Fancybox ausgetauscht und taucht jetzt auch nur noch an Stellen auf, wo er wirklich Sinn macht (zum Beispiel bei “Publikationen”).
• Die Breite der eigentlichen Inhaltsspalte wurde durch das komplette Weglasssen einer dritten Spalte und einer kaum merklichen Erweiterung der ganzen Website von ehemals 899px (ich frage mich gerade, warum die Breite ausgerechnet 899px war und nicht 800px oder 960px oder irgendwas anderes normaleres) auf 960px merklich größer. Das heißt im Klartext, dass man sowohl auf kleineren (normalen) 1280x1024 Bildschirmen als auch auf größeren Bildschirmen nicht soweit scrollen muss, um bis zum Ende des Artikels zu lesen.
• Bei den teilweise sehr langen Geschichtsaufsätzen (aber nur bei diesen) wurden “Nach oben”- Links am Ende der Seite eingefügt. Ein jQuery- Plugin (“scrollTo”) sorgt für ein etwas sanfteres “Nach-oben-gleiten”, als das normal der Fall ist.

Credits

• Die Navigation (Bilder) stammt von Sitepoint
• Das “Behind the site”- Bild oben rechts habe ich mir von der Zend Framework-Website geklaut.
• Sämtliche Icons stammen von famfamfam.
• Die seitenweise Navigation unten beim Weblog stammt von Amazon, ebenso wie die Kästen.
• Danke an Dirk Jesse für sein wunderbares YAML und die originelle Idee mit den “Weiterlesen”-Links.

Webhosting

All-inkl.com: Webhoster mit super Preis/Leistung-Verhältnis (Partnerlink)

Als Webhoster habe ich für diese Website all-inkl.com ausgewählt. Für rund 8 Euro im Monat bekomme ich PHP & mySQL (25 Datenbanken), sogar Cronjobs und drei Toplevel- Domains. Ein sehr gutes Preis-/Leistungsverhältnis, wie ich finde. Vielleicht noch zu erwähnen, dass die Server von all-inkl so gut wie immer (von kleineren Ausfällen mal abgesehen, die aber immer nach kürzester Zeit wieder behoben waren) verfügbar sind (bei der Webhostinglist seit jeher auf Platz 1).

Wenn Sie mich ein bißchen unterstützen wollen, gerade einen wirklich sehr guten Webhoster suchen und gerade auf den “All-inkl.com-Geschmack” gekommen sind, bestellen Sie bitte über den Partnerlink (das bringt für mich ein bißchen Provision ein und kostet Sie nicht mehr als sonst):

•