flexible Bilderwand

[Matthias Scharwies]

Servus!

ich habe mir überlegt meine sehr angestaubte Webpräsenz in ein attraktives modernes Kleid zu stopfen, vielleicht schauen die meißten dann über die Tatsache hinweg, dass der Inhalt bereits betagt und nicht so dynamisch ist wie junges Gemüse.

Da ich nichts weiter als Fotos zu bieten habe würde ich ein Layout ähnlich diesem anstreben.

Vor einem bestimmten Layout kommt erst mal was grundsätzliches:

• Heutzutage gehen die meisten mit dem Handy ins Netz
  • die Verbindungen sind oft schlechter als zuhause mit DSL;
  • Bildschirme sind kleiner

→ Bilder sollen nicht 3000x2000px groß sein wie auf deiner alten Webseite.

Flexbox oder Grid sind ja das non plus ultra für responsivness, allerdings finde ich nicht den Lösungsweg um hier so eine flexible Bilderwand hinzufummeln.

Ich finde die Bilderwand gut, würde aber keine Bilder austauschen, da bei kleineren Viewports die Animation unter dem Text liegen könnte.

Im von dir verlinkten Bsp dient die Bilderwand als vorgeschaltete Landing Page; alle Inhalte sind erst über die nächste Seite erreichbar. Das macht man heute nicht mehr so.

Der original Autor hat hier das Listenformat gewählt, ist das der beste Ansatz?

Ja, das ist eine Liste aus Bildern, die man mit grid (Bsp für Bildergalerie mit auto-fill) flexibel auf dem Bildschirm verteilen würde. Die Vorschaubilder sollten eine gewisse Mindestgröße aber nicht unterschreiten.

Ich würde oben aber trotzdem eine Navigation unterbringen.

Welche Struktur verleiht der „photowall“ die meiste Flexibelität? Imho sollten die Bilder umbrecnen und immer mehr Zeilen erzeugen bis noch 1 Spalte übrig ist und dann sollten die Bilder kleiner werden bis das keinen Sinn macht und der Bildschirm überläuft.

Wie lange soll man sich diese Animation anschauen? Wann bricht man gelangweilt, frustriert ab, weil's zu lange lädt?

Wie ich den Bildern eine Einheitsgröße verpasse und nur einen immer gleich großen zentrierten Ausschnitt zeige kann ich mir vorstellen (z.b. ein div mit overflow hidden) aber evtl. geht auch das besser?

Ja mit object-fit

Herzliche Grüße

Matthias Scharwies