u1amo01

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.

Eine eindrucksvolle Sammlung von Weblogs (oder vielleicht sollte man es besser Webmagazin nennen?), die jeden Artikel mit individuellem Layout versehen: Unicqe Article Design bei Coldheat.

Sehenswert!

via praegnanz.de

Schon vor vielen Monaten hat Jason Santa Maria seine Website radikal verändert. Anstelle eines durchgängigen Layouts für alles hatte jeder Bereich plötzlich ein anderes Aussehen. Mittlerweile hat das jeder einzelne Blogartikel.

Am Anfang dachte ich noch »Hey, was für eine bescheuerte Idee!«. Das hat sich nach einiger Zeit geändert; und auch dieser Artikel »Stop designing Websites, start designing posters« hat mich ins Grübeln gebracht.

Die Seite der Big Band ist mir schon eine Weile zu langweilig, die repräsentiert optisch eher einen Haufen Beamter als ein Rudel, ähm, von Individualisten, das mit Begeisterung eine Musikrichtung pflegt, die ziemlich ausser Mode ist.

Ich hab mal versucht, erste Entwürfe zu basteln. Natürlich kann ich keine Saxophonistin auf die Eingangsseite nehmen, da meutern die Blechbläser. Das ist nur mal so eine Idee: ein Musiker oder eine Gruppe neben dem Text; vielleicht auch einfach nur Instrumente. Kann ja beim Workshop fotografieren, was noch fehlt.

Vielleicht hat ja einer der Mitleser eine Meinung zu alledem

Aktuelles Layout

Idee Homepage

Idee Terminplan

Ein Anliegen, das alle betrifft, die sich auch nur ein wenig mit Webdesign beschäftigen: Rettet den Internet Explorer Vers. 6.

Gründe gibt es viele:

• Proven technology. It’s been around since 2001.
• NO bugs.
• No unnecessary features that use up valuable screen space, such as tabs.
• Handles GIF transparency.
• First with AJAX technology (XMLHttpRequest, available since IE5).
• Renders all pages as they are supposed to look by the only standard that really matters.
• Consistent rendering of pages makes it the web designer’s best friend.
• The most aesthetically pleasing web browser logo.
• Highly secure (has received lots of security updates).
• Clear interface.

Danke für diesen wichtigen Link, Mark!

Seit ewigen Zeiten verwende ich bei meinem Firefox die Erweiterung Web Developer. Ein praktisches Werkzeug, das unter anderem Referer unterdrückt und Java, Javascript und Cookies abschalten kann. Dazu gibt es Messwerkzeuge, viele Infos und natürlich die Möglichkeit, Webseitenelemente hervorzuheben.

Am meisten nutze ich die Möglichkeit, CSS-Angaben zu verändern und die Ergebnisse zeitgleich angezeigt zu bekommen. Ist alles zur Zufriedenheit geändert, kann man die Datei bequem lokal speichern.

Neuerdings verwende ich auch Firebug. Ein feines Werkzeug!

Einmal installiert macht es sich in der rechten unteren Bildschirmecke bequem. Und bisher habe ich es immer angecklickt, um bei einer Webseite unter die Haube zu schauen und zu sehen, welche CSS-Eigenschaften für ein Element wirksam sind und wo sie gesetzt werden (natürlich kann das Tool viel mehr; siehe Homepage).

Es geht aber viel einfacher, wie mir Matthias gestern erklärt hat. Man fährt einfach mit der Maus an die Stelle der Webseite, über die man Infos haben will, klickt dann mit der rechten Maustaste das Kontextmenue auf und wählt »Element untersuchen«. Und schon liefert Firebug alles, was man über das CSS dieses Elements zu wissen gibt.

Nochmal vielen Dank, Matthias.