Nützliche Button und Bilder

Das Design solcher Button

(…) jeder nach seiner Façon – ein alter Fritz!

Über Geschmack lässt sich nicht disputieren, so auch der Philosoph Kant.
Die Geschmäcker von Layouts (einer Website) sind halt verschieden …

Aber „disputieren“, lieber Herr Kant, lässt sich über Geschmack vortrefflich:

Eine „goldene Regel“ für jedes Layout sei, dass der Focus auf den Inhalt stets Priorität hat – und exemplarisch solche Button via Überdesign nicht ablenken sollten …

Statische oder dynamische „Scroll Back To Top“-Button …

Also am Seitenende feststehend oder das Scrollen der Nutzer begleitend?

Mein „Scroll Back To Top“-Button:

Ich habe viele kurze Seiten. Aber auch viele lange Seiten.
Da ich Scripte nicht mag, blieb für die langen Seiten meiner Website eher die dynamische Variante position: fixed; für den „Nach oben“-Button – und dann stringent halt für alle Seiten (hier die relevanten Anweisungen fett markiert):

.footer-seite a[href*="#seitenanfang"] {
  position: fixed;
  bottom: 0;
  right: 15%;
  z-index: 1;
  min-width: 15em;
  padding: .75em;
  background-color: rgb(251 251 251 / .9);
  border-radius: .2em;
}

+ Innenabstände
+ Schriftfarbe, Schriftgröße
+ border, border-radius …

Beispiel „fixed-Button“

Meine Übersichtsseite Kreuzungen mit Naturrosen beispielsweise braucht einen solchen (das Scrollen begleitenden) „Nach oben“-Button [ebenda etwas scrollen, bevor er erscheint]. Auf solchen langen Seiten ist man mitunter schon nach einem Drittel müde gesehen und will „nach Hause“ – so freut man sich über jeden „Nach oben“-Button.

Auf meinen vergleichsweise kleinen Sorten-Seiten wird dieser „fixed-Button“ bitte gnädig zur Kenntnis genommen.

Statischer „Back To Top“-Button

Eine statische Lösung für einen „Back To Top“-Button am Fuß kurzer Seiten ist keine Schande, es bezeugt eher ein kluges, nützliches sowie sparsames Design des Seiteninhabers …

Enthält die Website indessen lange und kurze Seiten, muss man sich entscheiden: durchgängig die schlichte statische Lösung oder eine „dynamische“ Lösung mit position: fixed; für den Button oder gar eine Lösung mit Script.

Ich sehe diese drei Lösungen als gleichwertig an – nur einheitlich sollte die eigene Lösung wohl für die gesamte Website dann sein. Und Scripte sollten eingespart werden, wo immer es geht …

Auf einen solchen „Nach oben“ Button verzichten zu wollen, halte ich für nicht hilfreich; auch auf kurzen Seiten sollte ein solcher Button verfügbar sein; da mag er unten stehen und statisch sein.

Eine auf dem Desktop kurz wirkende Seite ist auf Handy dann doch rasch lang und länger – der „Top“-Button ist ein feiner, standardisierter Service.

Die Probleme des (dynamischen) „Back To Top“-Button

… also auf meiner Website war es ein erstes Problem: bei schmalen, kleinen Monitoren / Viewports überlagert(e) dieser Button mitunter Fotos. Auch dies geht via Script leicht aus der Welt. Aber eben auch via HTML und CSS.

Das Problem, das es zu lösen galt: Bei den (langen) Übersichtseiten (voll Bilder) soll der Button stets verfügbar sein, bei den (kleinen) Sorten-Seiten (mit großen Bildern) aber kann er regelrecht stören: er überdeckt die größeren Fotos, insbesondere bei kleinen Viewports eines Handys.
Die Bilder aber sind nicht allein Schmuckbilder, vielmehr Teil der Informationen – deren Überlagerung durch einen Button für die Bedienung der Seiten ist folglich unglücklich.

position: relativ; + z-index + background-color

CSS bietet oftmals recht einfache und gute Lösungen für derlei Design-Probleme: Die Bildergalerien (oder einzelne Bilder) werden schlicht relativ positioniert, bekommen einen Überlagerungs-Index der höher ist als der des „Nach oben“-Button.
Und damit die Überlagerung „Bilder über Button“ (oder halt umgekehrt) auf Fläche klappt, bekommen beide noch eine Hintergrundfarbe.

Die CSS der Bildergalerien bei mir, die relevanten Stellen sind hier fett gekennzeichnet:

.gal,
.grossfotos,
.gridmaxzwei {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(330px,1fr));
  gap: 1em;
  margin: 1% auto;
  max-width: 130em;
  position: relative;
  z-index: 2;
  background-color: #fdfdfd;
}

Für einzelne Bilder (innerhalb von Texten zum Beispiel) greift de facto die gleiche Anweisung (und zum Teil für ganze Blöcke, zum Beispiel bei Details-Tag):

article img,
aside img,
main details,
header img,
.imgr,
.imgl,
section img,
.zindex-bilder {
  position: relative;
  z-index: 2;
  background-color: #fdfdfd;
}

Der „Nach oben“-Button bekommt einen kleineren Z-Index als die Bilder und wird folglich bei „Kollision“ überlagert: die Fotos haben Vorrang.

Beispiel der Überlagerung durch ein Details-Tag.
Scrollen Sie (bei schmalem Monitor) etwas hin und her, um zu sehen, dass der „Back To Top“-Button beim geschlossenen wie beim geöffneten Details-Tag verdeckt wird:

The Soul of the Rose, aka My Sweet Rose, 1908.

Auf einem Desktop mag alles dies unbedeutend sein – nicht aber bei kleineren bis kleinen Monitoren, Handys halt.

Und zu meiner Schande: Ich bin ein hoffnungsloser Monster-Desktop-Surfer! Ich habe kein Smartphone oder derlei. Aber einen großen Monitor.
Die Handy-Problematik überlagernder Elemente gelang selbst bei Handy-Tests nicht in mein Hirn – da bin ich irgendwie blind. Desktop-verwöhnt könnte man auch schreiben …

Anhang Screenshots Handyformat