Header neu gestalten

[Rolf B]

Hallo AudioBibel,

• du solltest die Bilder so weit beschneiden, dass kein unnötiges Weiß (oder Transparenz) am Rand ist. Das Buch ist mit 1145x812 hochgeladen, lässt sich aber auf ca 700x620 beschneiden (ich hab's jetzt nicht genau ausgemessen). Dadurch bist Du flexibler in der Verwendung. Wenn Du beim Einsatz auf der Webseite Platz um das Bild herum brauchst, machst Du das dort mit CSS (Stichwort: Padding und Margin).
• mach Dir eine Vorstellung haben, wie groß die Bilder maximal werden sollten. Zum Beispiel: 200 Pixel. Das verdoppelst Du - 400px, und du skalierst dein Foto auf diese Größe. Es ist vermutlich nicht allzu gravierend für Anwender, die ohnehin ein paar Megabyte Audio anhören wollen - aber die Frage ist nun: Brauchst Du transparenten Hintergrund? Oder kannst Du ihn einfach weiß machen - deine HTML Seite ist ja auch weiß. JPG kann keine Transparenz, aber mit einem JPG bekommst Du dein Buch auf unter 30K Dateigröße. Als PNG oder GIF ist Transparenz möglich, aber du kommst dann auf Dateigrößen von 80K-120K. Du musst jedenfalls weg von den aktuell 2,8MB.
• Wie auch immer - durch die Bereitstellung des Bildes in doppelter maximaler Anzeigegröße kann ein JPG ziemlich aggressiv komprimiert werden, und sieht immer noch gut aus.

Die eigentliche Webseite hat aktuell ein Ärgernis: Sie ist nicht Tastaturbedienbar. Die "Anzeigen" Dinger (die Buttons sein möchten) lassen sich nur per Maus bedienen. Gerade Leute, die auf Audioinhalte angewiesen sind, haben keine Maus. Für die ist es sogar ärgerlich, wenn sie erstmal einblenden müssen. An Stelle deiner klickbaren divs solltest Du Buttons verwenden. Die kann man so stylen, dass sie so wie jetzt die DIVs aussehen, und sie sind ab Werk interaktiv und für Assistenztechniken zugänglich.

Deinen Header-Bereich würde ich mit Flexbox gestalten. Grid ginge auch, funktioniret aber in alten Browsern, vor allem dem Relikt Internet Explorer, schlecht. Das sind nur wenige Prozent der potenziellen Nutzer, aber bei denen würde durch Grid-Technik die Anzeige verscheußlicht (die Header-Elemente stehen dann untereinander statt nebeneinander). Welche Anforderungen an Alt-Kompatibilität hast du?

Du solltest auch den Gebrauch von <table> reduzieren. "Das alte Testament" und "Die geschichtlichen Bücher" sind Überschriften und sollten als Überschrift im HTML erscheinen - das geht in einer Table nicht. Ich mache Dir mal eine Vorlage, wie Du so etwas besser gestalten kannst. Man könnte sogar behaupten, dass die einzelnen Bücher keine tabellarischen Daten, sondern eine Liste sind, und darum als Liste zu gestalten sind (<ul> und <li>), aber ich bin eigentlich dagegen, weil die Table die schöne Eigenschaft hat, dass die Spaltenbreiten übergreifend gleich bleiben. Das ist responsiv schwieriger. Mal gucken...

Rolf