Bin am Schrauben. u1amo01.de sieht gut aus und passt sich an kleine Bildschirme an.

Für das Blog kommt der gleiche Aufbau und das fast gleiche, leicht erweiterte CSS zum Einsatz. Nur das mit der Darstellung auf Handys klappt nicht. Wahrscheinlich habe ich irgendwo ein falsches Komma gesetzt. Oder so.

Mir gefällts.

Bin gestern bei einer Google-Suche auf meinem eigenen Blog gelandet. Zumindest sah es auf den ersten Blick so aus. War ein s9y-Blog mit 2k11. Das Standard-Layout sieht so gut aus, dass mir Änderungen schwer fallen. Und große Bilder im Header habe ich wegen der Bandbreitenverschwendung noch nie gemocht.

Also zurück zur Füllhalterversion. Die kommt ohne mir unbekannte Scripte aus. Auch wenn Änderungen des CSS' nicht ganz so einfach wie eine Fahrradwartung sind. Muss die Anpassung an alle möglichen Ausgabegeräte eben noch ein bisschen warten.

u1amo01.de, 320x480 Ansicht iPhone

Ehe ich über die Website der gefräßigsten besten Big Band von allen herfalle, übe ich an meiner eigenen Webseite. Mühsam ernährt sich das Eichhörnchen ...

Ach ja, das Heft »Responsive Web Design« von Ethan Marcotte kann ich empfehlen (Dan Cederholm hat das Werk schon vor Monaten gelobt – ja, ich weiß ich bin spät dran. Besser zu spät als nie).

Die Füllhalterversion dieses Blogs wurde so gelobt, dass ich mich fast nicht traue, das nach 3 Monaten zu ändern.

Aber Lesbarkeit geht vor. Jeden Tag sehe ich Dutzende von Leuten im Zug, die mit ihren Smart Phones spielen. Höchste Zeit also, diesem Trend Rechnung zu tragen. Die Zeiten, als man eine Webseite für zwei, drei gerade übliche Bildschirmgrößen bauen konnte, sind vorbei.

Das Theme »2k11« von Matthias (soll beim nächsten Serendipity-Release Standard werden enthalten sein) hat mir auf den ersten Blick gefallen. Und es passt sich automagisch an eine Vielzahl von Anzeigegeräten an. Bis ich das selbst so zusammengestrickt bekäme, müsste ich eine Menge lesen und herumprobieren. Und dann wäre es immer noch nicht halb so gut.

Also – tataaa! – hier ist das neue Bloglayout: »2k11« mit einer Handvoll zusätzlicher Zeilen in der user.css. Wie das auf verschiedenen Kleingeräten aussieht, kann man sich über das nützliche Tool von Matt Kersley ansehen.

Vor einigen Jahren habe ich unsere Bandwebsite http://www.buenotebigband.de/ komplett überarbeitet. Danach habe ich hauptsächlich an der Verbesserung der Navigation gearbeitet. Seit 2008 wurden nur noch Kleinigkeiten geändert, wie z. B. die letztes Jahr eingebaute Timeline.

Mittlerweile hat sich die Webwelt weitergedreht. Früher war es ausreichend, beim Design an einige wenige Bildschirmgrößen bzw. Auflösungen zu denken. Heutzutage gibt es mehr Ausgabegeräte und Formate, als man sich merken kann: PCs, Notebooks, iPads, Smartphones und so weiter.

Also höchste Zeit, auch als Hobbywebmaster den Hintern hochzukriegen. Und sich mit aktuellen Techniken beschäftigen. Eine gute Übersicht an Lesestoff dazu bietet Matthias unter Responsive Ressourcen 2011.

Wer lieber Papier in die Hand nimmt: da kann ich die kurz und bündig verfassten Hefte von »A Book Apart« empfehlen.

PS: die Blue-note-Seite im Wandel der Zeit kann man sich in der Artikelkomplettansicht anschauen.

Nein, keine Panik. Das wird keine feste Einrichtung hier im Blog. Die HTTP-Status-Katzen von Felix Rieseberg sind einfach gut. Musste ich verlinken.

Nachdem ich entdeckt hatte, daß mein Bloglayout verblüffend den Fahrkartenautomaten der Bahn ähnelt, musste etwas anderes her.

Ein schöner Header in »Scriptina« oder einer englischen Schreibschrift. »Libelle« hat mir gut gefallen. Nur wollte ich keine 75,- EUR dafür zahlen.

Schließlich dachte ich: vergiß all die sterilen Schriften und schreib den Header selbst.

Gesagt, getan.

Alt:

Neu:

Was sich geändert hat? Der Header ist handgeschrieben, die Lila-Links wurden durch Tintenblau ersetzt, die runden Ecken der Boxen wurden begradigt und Schatten gibt es auch keine mehr. Ich gebe zu, dass das nur Kleinigkeiten sind. Eigentlich sollte sich noch mehr tun; nur habe ich in der Zwischenzeit ein anderes Blogsystem gesehen, das ich vielleicht ausprobiere. Mal sehen.

Als ich neulich einem Fahrkartenautomaten der Bahn fasziniert beim Booten von Windows XP zugeschaut habe, ist mir aufgefallen, dass mein Blogdesign dem neuen Design der Automatenoberfläche verflixt ähnlich sieht.

Ach du liebes Lieschen!

Ich sollte mir schleunigst etwas neues einfallen lassen ...

Das Kinoblog nebenan hatte schon immer einen dezenten schwarzen Header mit einem Schriftzug in »Kinescope«.

Zeit für etwas neues. Den Experten muss ich ja nicht sagen, was das für ein Filmstreifen ist.

Das Smashing Magazine veröffenlicht ausgezeichnete Artikel rund ums Webdesign. Gestern erschien dort der Beitrag Technical Web Typography: Guidelines and Techniques von Harry Roberts.

Neugierig habe ich mich auf dessen Homepage umgesehen. Und den für mich als Webmaster der Blue note BIG BAND hochinteressanten Text Coding up a semantic, lean timeline gefunden.

Sowas muss auf die Bandseite! Harry hat die Verwendung genehmigt, also steht dem nichts mehr im Wege. Here we go.

Nachtrag: nachdem ich mir den Wolf gesucht habe, wo ich Beispiele für »time« in HTML5 finde – das alles und noch viel mehr gibt es beim HTML5 Doctor.