Skip to content

Doch kein responsive Design für Blue note

Wer sich wundert, was aus meinem Projekt Responsive Design für Blue note geworden ist: nichts.

Ich habe ein paar Bandkollegen gefragt, welche Punkte sie am meisten stören würden und von allen die Rückmeldung bekommen, dass der aktuelle Stand gut sei. Anscheinend bin ich der einzige, dem es nicht gefällt. Das ist aber keine ausreichende Begründung für eine größere Webseitenumgestaltung.

Mach ich in der Zeit eben Sprechübungen. Oder lese in der Badewanne.

Responsive Design für Blue note

Ursprünglich hatte ich mein Blog angefangen, um den Umbau bzw. die Renovierung der Website der Blue note BIG BAND zu dokumentieren. Das ist lange her.

Genauso lang wie die letzten großen Änderungen an der Webseite. In den letzten Jahren habe ich nur Inhalte aktualisiert. Also Termine eingetragen, Fotos der Gäste hochgeladen und sowas.

Änderungen am Aussehen habe ich schleifen lassen. Genauso die Bandchronik. Wobei ich bei der die Hoffnung hatte, dass der Berndleader vielleicht an der weiterschreibt.

Das soll jetzt alles besser werden. Seit Dezember habe ich ja ein Smartphone. Und festgestellt, dass die Bandseite damit, ähm, suboptimal aussieht. Also höchste Zeit, das zu verbessern. Stichwort Responsive Webdesign. Für die glücklichen Unwissenden: damit ist gemeint, dass eine Webseite sich dem Gerät des Betrachters anpasst, also auf jedweder Bildschirmgröße gut lesbar und auch bedienbar ist. Also über Touchscreens und Tastatur (ohne Maus).

Klingt wie die eierlegende Wollmilchsau? Ist auch genauso komplex.

Für den Anfang habe ich die Problemfelder Navigation, Fotogrößenanpassung und Behandlung der Sidebar ausgeguckt.

Bei der Navigation stellt die Chronik und der Bereich um Jazz an Neujahr mit der Subnavigation die größte Herausforderung dar. Auf einem Telefon würde allein die Navigation den Bildschirm mehr als ausfüllen. Die muss also überarbeitet und ausblendbar sein.

Genauso ist die Sidebar zu überarbeiten. Dummerweise enthält genau die auf der Homepage die interessanten Informationen (neue Termine, aktuelle Infos etc.), ist im Gerüst der Webseite nach alter Tradition aber am Ende angeordnet. Außerdem sollte sie auf kleinen Bildschirmen nicht neben, sondern unter dem Hauptinhalt angezeigt werden.

Daraus habe ich mir für den Anfang diese Ziele gesetzt:

  • die Navigation muss auf kleinen Bildschirmen ausgeblendet werden und über einen Knopf einblendbar sein. Möglichst simpel und ohne JavaScript-Gedöns
  • die Seitenspalte muss auf Mobiltelefonen automagisch nach unten wandern
  • die wichtigsten Inhalte müssen oben stehen und im Haupteil, nicht in der Seitenspalte
  • Fotos müssen sich an kleine Bildschirme anpassen
  • Fotos generell eher wieder kleiner machen, um die Ladezeiten zu verbessern

Für die ersten beiden Punkte habe ich mit der Lösung von Ian Yates herumgespielt. Warum mit der? Ich wollte keine Lösung mit diesem sogenannten Hamburger-Symbol (☰), weil das nicht jedem Nutzer geläufig ist. Und nichts mit Scriptsprache.

Dabei sind nacheinander die folgenden 4 Versionen entstanden:


http://u1amo01.de/css_tst/musterloesung_content_amo-v1/index.html
http://u1amo01.de/css_tst/musterloesung_content_amo-v2/index.html
http://u1amo01.de/css_tst/musterloesung_content_amo-v3/index.html
http://u1amo01.de/css_tst/musterloesung_content_amo-v5/index.html

Nächster Schritte: größere Schrift, größere Flächen bei der Navigation für Leute mit dicken Fingern (wie mich), skalierende Fotos.

Erste Schritte zur responsiven Webseite

u1amo01.de Screen Shot Februar 2012
u1amo01.de, 320x480 Ansicht iPhone
Das Blog ist vorerst (?) mit dem Rundum-Sorglos-Fertigpack 2k11 versorgt. Auf Bernds iPhone sieht das gut aus.

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).

Lesbarkeit geht vor

Screen Shot Füllhalterversion 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.

Screen Shot 2k11 "out of the box" 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.

screen shot vom neuen Layout 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.

Lesestoff für Webdesigner

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.

"Lesestoff für Webdesigner" vollständig lesen