Skip to content

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.

Trackbacks

u1amo01 am : Doch kein responsive Design für Blue note

Vorschau anzeigen
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. A

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Noch keine Kommentare

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Textile-Formatierung erlaubt
Formular-Optionen