Header neu gestalten

[AudioBibel]

Hallo Rolf [noch ein Helfer :-) ]!

Uff! Das ist ja jetzt wieder eine Menge "Böhmischer Dörfer". Aber ich habe schon gelesen, daß Du am Basteln einer Vorlage bist. Danke!

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

Das Beschneiden wird wohl kein Problem sein; kriege ich entweder selbst hin, oder lasse es vom Ersteller der Grafiken machen. Wie das dann genau mit dem Platzieren (Stichwort Padding und Margin) geht, frage ich noch nach, wenn es so weit ist.

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 groß die Bilder sein sollten, kann ich ehrlich gesagt nicht sagen; aber ich kann es ja mal ausprobieren und dann noch mal nachfragen, was Ihr davon haltet. Transparenten Hintergrund brauche ich eigentlich nicht (bei dieser aktuellen Website). Sollte ich sie mal ändern wollen, wäre es natürlich "zukunftssicher" jetzt schon PNG zu nehmen. Ansonsten (was ich eher vermute) eigentlich unnötig; da hast Du recht, Rolf.

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.

Ok. Das merke ich mir; doppelt erforderlicher Wert sollte ausreichen, um dann doch JPG zu nehmen. Danke!

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.

Das habe ich eigentlich noch nie bedacht. Ich hatte zwar schon einmal eine Anfrage von einer Gemeinde, die die Bibel an Blinde weitergeben möchte, aber diesbezüglich noch keine Rückmeldung erhalten. Brauche halt auch hier wieder Anleitung, wie ich das verbessern / ändern kann. Das Argument ist jedenfalls gut!

Deinen Header-Bereich würde ich mit Flexbox gestalten. Grid ginge auch, funktioniert 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?

KEINE Ahnung, was Du da meinst (Flexbox / Grid?). Sollten das betriebssystemabhängige Programme sein, darauf hinweisen, daß ich schon über fünf Jahre nur noch mit Linux arbeite. Und wie diese Programme zu bedienen sind, weiß ich natürlich auch wieder nicht ... :-| Und bezüglich der Kompatibilität würde ich sagen, alles was (Smartphone / Tablet) älter als Android 4 ist, kann man vergessen und so alte IEs (Windows) sollten schon berücksichtigt werden (auch wenn ich nicht verstehe, wie man diesen Browser überhaupt benutzen kann - so was von unsicher).

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

Daß da im HTML mit den Überschriften ein Logikfehler drin ist, wissen wir (mein Freund und ich) eigentlich. Aber dazu müßte ich mich nochmal einarbeiten. Vom HTML her eigentlich falsch, im Aussehen aber - denke ich - doch o.k. Aber wenn Du mir da eine Vorlage machen kannst; super und DANKE!

Liebe Grüße

Holger