Skip to content

Modernisierung Blue note Webseite (1)

Eigentlich hab ich mit diesem Blog vor Ewigkeiten angefangen, um die Überarbeitung der Blue note Webseite zu dokumentieren.

Seit langer Zeit habe ich dort nur noch Aktualisierungen vorgenommen und fast gar nichts mehr am Aufbau geändert. Höchste Zeit, die Seite auch für Mobiltelefonbenutzer attraktiver zu machen.

Ja, ich weiß dass einige angesprochene Mitmusiker meinten: »Wozu das denn, sieht doch gut aus?« Nein, tut es nicht. Moderne Webseiten sollen auf jedwedem Gerät problemlos auf Anhieb lesbar und nutzbar sein.

Ich hab da mal schnell ein paar Kleinigkeiten im CSS eingebaut. Zur Demonstration, was ich meine die beiden Seiten auf dem Handy anschauen.

Aktuell / alt: https://www.bluenotebigband.de/index.html

Entwurf / Zukunft: https://www.bluenotebigband.de/index_responsive.html

Die Abstände stimmen noch nicht, es braucht mehr Breakpoints und die Navigation sieht grottig aus. Vermittelt trotzdem einen Eindruck, wie es werden sollte bzw. könnte.

Erste Rückmeldung:

»ja, beim ersten Anschauen ist die Startseite für die Augen angenehmer. Ich hätte mir noch Blocksatz für den Text gewünscht - und die links oben sehen noch etwas wirr verteilt und wenig geordnet aus.«

Weil ich ein Freund von Lösungen bin, die auch ohne Javascript funktionieren, werde diese Lösung des Navigationsproblems genauer unter die Lupe nehmen: https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/

Audio in Webseite einbinden

Kein Hexenwerk.

Man speichert seine Audio-Datei im mp3-Format. Das wird von den meisten Geräten abgespielt. Wenn man zusätzlich eine Version im ogg-Format anfertigt, hat man auch z. B. die Linux-Nutzer ohne mp3-Unterstützung versorgt.

Anschließend die Dateien auf den Server hochladen. Hier im Blog habe ich dafür ein Verzeichnis audio eingerichtet.

Um die Datei direkt online abzuspielen, fügt man den folgenden Code ein:

<audio id="audio_with_controls" controls preload="none">
<source src="/blog/uploads/audio/schiller_der-handschuh_v2.mp3" type="audio/mp3" />
<source src="/blog/uploads/audio/schiller_der-handschuh_v2.ogg" type="audio/ogg" />
Ihr Browser kann dieses Tondokument nicht wiedergeben.
Sie können es unter <a href="/blog/uploads/audio/schiller_der-handschuh_v2.mp3">/blog/uploads/audio/schiller_der-handschuh_v2.mp3</a> abrufen.
</audio>

Damit wird zuerst versucht, die mp3-Datei abzuspielen, falls das nicht klappt, die ogg-Datei. Für Seitenbesucher mit antiken Webbrowsern ist der Teil ab »Ihr Browser kann dieses Tondokument nicht wiedergeben ...« eingefügt. Standardmäßig würde beim Seitenaufruf angefangen, die Audio-Datei herunterzuladen. Um damit erst beim Druck auf den Play-Button zu beginnen, verwende ich immer die Option »preload="none"«

Damit man die Audio-Datei bequem herunterladen kann, füge ich meistens noch den folgenden Code ein:

Herunterladen als <a href="http://u1amo01.de/blog/uploads/audio/schiller_der-handschuh_v2.mp3">mp3-Datei</a> oder im <a href="http://u1amo01.de/blog/uploads/audio/schiller_der-handschuh_v2.ogg">ogg-Format</a>.

Und hier das Ergebnis:


Herunterladen als mp3-Datei oder im ogg-Format.


Weil man sich sowas nicht merken will, habe ich mir einen Musterblogbeitrag angelegt, den ich immer wieder kopiere. Immer wieder lustig, wenn ich vergesse die Dateinamen entsprechend anzupassen :-)

Quelle und alle möglichen Optionen: SelfHTML.org

Jetzt auch mit Avatoon!

Vorspiel

Ich lese ja mit Begeisterung Meldungen über Erdogan vs. Böhmermann. Über Rivva.de bin ich zu einem Artikel des Nullenundeinsenschubsers gekommen. Und von da zum Beitrag »Satirefreiheit ist nicht verhandelbar« auf e13.de.

Weil ich mich auf der Suche nach Futter für den Feedreader gerne auf Blogs ein bisschen umsehe, bin ich über das Avatoon-Angebot bei Kiki gestolpert. Ich liebe gute Zeichnungen! Habe ich schon erwähnt, dass ich alle Bände von »Tintin et Milou« (Tim und Struppi) im Regal habe?

Beim Preis habe ich erst einmal geschluckt. Na, eigentlich brauche ich sowas doch gar nicht. Andererseits wäre es schon schön. Hmm. Und wenn man sich vorstellt, wie viel Arbeit da drin steckt relativiert sich der Preis.

Hmm.

Aha, Kiki fährt zur re:publica – in den nächsten Tagen hat sie ganz sicher andere Dinge auf dem Plan als Avatoons zu zeichnen. Ich setze mir deshalb den 7. Mai als Termin. Wenn ich dann immer noch denke, dass ein Avatoon eine gute Idee wäre, sehen wir weiter.

Bis dahin kann ich ja mal ein paar Fotos von mir zusammensammeln und überlegen, was ich in den Bestelltext schreiben könnte. Natürlich nur so theoretisch, falls ich überhaupt bestelle.

Judgement Day*

Ach verwünscht. Ich will so ein Ding. Außerdem muss man sich ab und zu etwas gönnen. Ein Eis. Oder ein Avatoon. Also erstmal höflich bei Kiki angefragt, ob sie überhaupt Zeit hat. Sie hat. Und möchte wissen, was mir inhaltlich und stilistisch so vorschwebt. Tief luftgeholt und eine Mail geschickt, die ich hier in Auszügen wiedergebe:

Ja, was schwebt mir vor? Da habe ich mir jetzt schon einige Zeit den Kopf zerbrochen und keine wirklich konkrete Vorstellung.

Da ich zu viele verschiedene Hobbys habe (Saxophon spielen, fotografieren, Hörbücher sprechen), scheidet es wohl aus, eins von diesen Themen ins Bild einzubauen.

Ich hab einfach mal ein paar Fotos zusammengeworfen, vielleicht kannst Du damit etwas anfangen?

Fotos

Wie ich selbst überrascht festgestellt habe, trage ich fast immer diese grüne Kaputzenjacke (in HTML wäre das etwa #99d738). Und täglich eine Mütze (im Winter schwarz, im Sommer beige) oder einen Hut.

Ich mag gerne kräftige Farben - also nicht pastell, mag auch blau, hmm ... und mein Blog hat immer wieder die Farbe Blau (#3c60b4) und ein leichtes Gelb für den Hintergrund (#fffaed). Muss aber nicht sein.

Zum Stil: tja, was nimmt man da? Im Regal habe ich die kompletten Bände von Tintin stehen, natürlich Asterix, Lucky Luke und Gaston. Vielleicht hilft das?

Jones Aktuell habe ich bei Twitter als Bild das hier mit dem Indiana-Jones-Hut drin ...

Fotograf ... bei Google-Plus das mit der Sucherkamera:

Äh, ja. Schwierig auf den Punkt zu bringen, sorry. Am ehesten wahrscheinlich mit grüner Jacke und Mütze, oder?

Kannst Du damit etwas anfangen?

Natürlich konnte sie. Und hat gefragt, ob sie nicht doch ein Saxophon aufs Bild nehmen könnte? Klar.

Ergebnis

Sobald ich den Entwurf sah, breitete sich ein lang anhaltendes Grinsen auf meinem Gesicht aus. Nach ein paar Korrekturen, bei denen es um den S-Bogen ging (ich spiele ja kein Alt-Saxophon) hier das Ergebnis:

Avatoon

Gefällt mir. Gefällt mir sehr! :-)

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.

Alle Webseiten sehen gleich aus?!

Der Artikel All Websites Look The Same bei Webdesign-Altmeister Zeldman verdirbt mir gerade ein bisschen den Spaß am neuen Layout. Weil er recht hat ...

Screen Shot

Eigentlich braucht kein Mensch so ein großes Bild oben. Verlängert nur die Ladezeit. Ebenso die eingebundene Schrift. Hmm. Ich denke drüber nach und gehe so lange zurück auf 2k11. Zugegeben, das ist als Default-Serendipity-Template auch kein Ausbund an Originalität, sieht aber wenigstens ein bisschen anders aus. Und scheint mir wesentlich schneller zu laden.

Und damit es richtig Old-School wird, habe ich das Zitat-Plugin wieder eingebaut ;-)

Keine Extrawurst für IE

Wie ich bemerkt habe, zeigt der Internet Explorer nicht alle Inhalte meines Blogs so an, wie es aussehen soll. Die Grafiken im Header und in der Sidebar, die gleichzeitig Links sind, werden mit Rahmen dargestellt. Der Audio-Player erscheint nur als einfarbige Fläche.

Weil die Inhalte trotzdem nutzbar sind und dies ein Hobby-Blog ist, habe ich beschlossen, das zu ignorieren. Ich habe schon genug Zeit verschwendet. Liebe Explorer-Nutzer, bitte versteht mich nicht falsch. Ihr könnt die Inhalte sehen bzw. hören. Nur nicht in hübsch, sorry.

Screenshot
Darstellung IE 8
Screenshot
Ansicht Firefox 20

#webtypobuch von Gerrit van Aaken

Cover #webtypobuch
#webtypobuch
Wer sich mit Webdesign beschäftigt, landet früher oder später auf Gerrit van Aakens Weblog praegnanz. Bekannt sind seine Mini-Porträts von freien Schriften. Veteranen der Piratenpartei erinnern sich vielleicht daran, dass Gerrit das Programm der Piratenpartei zur Bundestagswahl 2009 gestalterisch überarbeitet hatte. Als Nicht-Mitglied. Einfach so, weil ihm die Ur-Version zu hässlich war.

Sein über die Jahre gesammeltes Wissen hat Gerrit jetzt in ein Buch gepackt. Behandelt werden Themen wie Lesen am Bildschirm, Schriftwahl, Zeichengröße und Zeilenabstand, korrekte Nutzung von Sonderzeichen, websichere Schriften und Webfonts.

Das »#webtypobuch« steht unter der Lizenz CC BY-NC-SA 3.0 DE. Dementsprechend kann man die HTML-Version kostenlos lesen. Wer Gerrits Arbeit honorieren möchte, kann das Werk in verschiedenen E-Book-Formaten (z. B. EPUB, MOBI, PDF) kaufen. Natürlich ohne DRM (Digitale Rechteverwaltung). Für Fans von Totholz kann man sich ein »richtiges« Buch bei 1buch.de bestellen, das im Vergleich zum E-Book allerdings teuer ist.

Gerrit van Aaken, »#webtypobuch« 146 Seiten, HTML-Version kostenlos, E-Book 9,98 Euro, gedruckt 32,42 Euro.

Dieser Artikel ist auch bei der Flaschenpost erschienen.