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.
Continue reading "Lesestoff für Webdesigner"
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. 
Nachdem dieses EDV-Thema mit dem Monitorpapier und dem grünen Rand schon seit unglaublich langen Wochen zu sehen war, habe ich angefangen umzubauen.
Nein, lieber Leser, lamentieren hilft nicht. Widerstand ist zwecklos. Das ist mein Blog. Früher hat man an der elektrischen Eisenbahn herumgefrickelt, heuer muss das Blog dran glauben.
Das vorherige Layout war um Ostern entstanden und wurde deshalb natürlich »Osterei« getauft. Dank des Statistikwerkzeugs Piwik hatte ich festgestellt, dass mehr Besucher als gedacht über Suchmaschinen hier landen. Und deshalb das Blog leicht modifiziert. Weil Piwik schuld war, hieß das Layout dann zwischendurch »Kiwi«.
Die aktuellen Farben stammen vom Cover einer Count-Basie-Platte. Und wie heißt dann das aktuelle Thema? Eben.
Wie immer bei Umbauten ist noch (?) nicht alles perfekt. Und wie immer kann es sein, dass mir morgen die alte Version besser gefällt. Nun ja. Schaun'wer mal.
Für optimale Lesbarkeit wird eine Anzahl von 45 bis 75 Zeichen/Zeile empfohlen. Der folgende Satz aus dem bekannten Blindtext hat einen Mittelwert von 69 Zeichen:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan
Ich bin ein Satz mit einer Zahl von 46 Zeichen.
Dies ist ein Satz mit genau der als Max. empfohlenen Anzahl von 75 Zeichen.
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.
Endlich bin ich dazu gekommen, die Chronik der Blue note Big Band weiterzuschreiben. Das Jahr 2009 wurden um Fotos ergänzt, die Seite für 2010 neu geschrieben.
Wobei die Texte hoffentlich bald noch ein bisschen ausführlicher werden. Früher habe ich regelmäßig Auftrittsberichte gebloggt, die ich mit kleinen Änderungen auf die Website übernehmen konnte. Das hatte ich die letzten Monate schleifen lassen – und das rächt sich jetzt.
Bei der Gelegenheit ein herzliches Dankeschön an Holger Knecht | Pfalzfotos.de, der die Band fleißig fotografierte und uns die Nutzung der Bilder erlaubt hat.