Nach über 8 Monaten Work-in-Progress-Status und nur 1,5 Monaten Verspätung nach meinem eigenen Zeitplan ist das neue Design endlich online.

Design

Im Vergleich zu früher eigentlich gar nicht so viel geändert. Evolution statt Revolution ist angesagt. Zu Erinnerung, so sah es vorher aus:

Das alte Design

Ich wollte das Ganze etwas breiter und heller gestalten sowie ein paar Javascript-Spielereien einbauen. Außerdem kommt für Mobilbrowser das schon mal vorgestellte Mediatyping-Plugin mit einem entsprechenden Stylesheet zum Einsatz.

Technik

Die Seite verwendet HTML5, CSS3, Mootools und viele Wordpress-Plugins der Marke Eigenbau für diverse Kleinigkeiten. Und ein paar lustige CSS-Hacks:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #wrapperhead, head~body #wrapperfoot { position:relative; left:-1px; } }

html>/**/body #semi_live_preview_wrapper > div, x:-moz-any-link, x:default { overflow:auto !important; padding-bottom:20px; }

Der wesentlichste Unterschied zwischen dem Internet Explorer und sonstigen Browsern ist eben, dass ersterer mit den Conditional Comments eine zuverlässige Browserweiche anbietet und letztere einen zu Konstruktionen wie den obrigen zwingen.

Code-Highlighting – auch für Kommentare

Da wir es hier ja meist mit eher technischem Inhalt zu tun haben, bietet es sich an, für längere Codeabschnitte Syntaxhighlighting zu verwenden. Das gibt es ab jetzt sowohl für meine Posts als auch für Kommentare. Es können folgende Code-Tags verwendet werden:

  • {html}{/html}: HTML
  • {php}{/php}: PHP
  • {js}{/js}: Javascript
  • {css}{/css}: CSS
  • {code}{/code}: Allgemeiner Code (kein Highlighting)

Das Escapen von HTML-Sonderzeichen zwischen den Tags passiert automatisch, man kann also bedenkenlos direkt HTML hineinschreiben:

{html}<p>
    Es gilt die <a href="/kontakt/datenschutz/">Datenschutzerklärung</a>.
</p>{/html}

… wird zu:

<p>
	Es gilt die <a href="/kontakt/datenschutz/">Datenschutzerklärung</a>.
</p>

Das Highlighting wird durch das patente Mootools-Plugin Lighter.js bereitgestellt. Einzige Voraussetzung ist ein vernünftiger Browser – der Internet Explorer unterstützt das Farbenspiel (zumindest im Moment) nicht.

Inhalt

Inhaltlich ist fast alles beim alten geblieben, was unter anderem daran liegt, dass ich die geplanten Neuerungen nur bedingt auf die Reihe bekommen habe. Startseite und Portfolio sind beide noch nicht wirklich fertig, besonders bei letzterem fehlt die Hälfte–  das wird dann im Laufe der Wochen nachgeliefert. Im Blog bleibt, das zur Entwarnung, inhaltlich alles wie bisher.

Baustellen

Ich wüsste gerne, warum das Highlighting im IE nicht fluppt. Sowohl die verwendete Framework-Version als auch der Highlighter selbst sind zwar Beta, aber kompletter IE-Ausfall ist doof. Wenn auch nicht wirklich schlimm. Falls jemand eine Ahnung hat, warum das so ist … ich wäre für Mitteilung dankbar. Ansonsten bin ich natürlich auch für die Meldung von Schreibfehlern und verbockten Darstellungen in exotischen Browsern dankbar.