Content Bilder… Ein max-height kann oft helfen!

Große Bilder sind cool ABER…

Es ist cool und angesagt große Bilder auf Websites zu zeigen. Die großen Bilder sind super und es macht auch mehr Spaß sie anzuschauen, als die kleinen Bilder von früher. Aber hey, ich sitze hier vor einem iMac mit einem 27" Bildschirm. Das ist schon ein Bildschirm, der deutlich über dem durchschnitt liegt was die Auflösung angeht. Die meisten Besucher eurer Websites werden wohl eher kleinere Monitore haben. 27" heißt in Zahlen 2560x1440px was 1440px in der Höhe heißt, das ist viel. Mein Google Analytics für bestwebiste.gallery sagt, dass die meisten Besucher dort mit 800-1080 Pixeln in der Höhe unterwegs sind. Das sind gerade mal 55% von dem was ich sehe (pi mal Daumen).

Warum ich den Blogpost hier schreibe ist recht einfach zu erklären. Mein Ello Account wurde gerade für die V2 freigeschalten. Ich klickte mich also ein wenig durch die Seite und mir kam der Gedanke der mir schon öfters kam. Denn Ello ist ein gutes Beispiel um es für den Post hier heranzuziehen. Minimalistisches Design mit sehr großen Fotos. Aber wirklich schön ist es nicht, wenn man sich ein Foto anschauen möchte und dabei scrollen muss. Meist tritt das Problem natürlich bei Hochformat-Fotos auf. Ein Foto ist etwas, dass ich im ganzen sehen möchte und nicht nur ein drittel davon.

Wenn ich ein Foto scrollen muss um es als ganzes zu sehen ist das kein gutes Gefühl oder um mal mit Buzzwords um mich zu schmeißen… Es ist keine gute user experience! Stell dir vor du gehst in eine Kunstausstellung und all die Bilder hängen an einer Wand. Soweit so gut. Aber du bist eine relativ kleingewachsene Person, ein Kind oder was auch immer. Irgendwo ist eine kleine Mauer, eine Absperrung oder ähnliches. Und die macht es dir nicht möglich, dass du das Bild als ganzes anschauen kannst ohne ein klein wenig hochzuspringen. Du musst springen und springen. Willst du so Bilder anschauen? Ich denke nicht! Du willst das Bild in ruhe auf dich wirken lassen, ohne dabei etwas zu machen außer zu schauen.

Hier ist ein Screenshot von meiner Profilseite auf Ello. Du siehst hier ein Foto im Hochformat und was fällt auf? Richtig, du kannst nicht das komplette Foto sehen sondern nur den oberen Teil des Fotos.

Es ist ziemlich leicht dieses Problem in den Griff zu bekommen. Eine Zeile CSS für Bilder reicht:

Sicher ist das keine Lösung die man global für die Website einsetzen kann und sollte. Es ist nur ein Beispiel. Ich hab einfach die Zeile CSS via den Chrome DEV Tools hinzugefügt und nun schaut das ganze so aus:

Deutlich besser oder? Keiner möchte abgeschnittene Fotos sehen! Ich will hier auch gar nicht mit dem erhobenen Zeigefinger rumlaufen, da ich es selbst nicht einsetze bisher aber ich denke, dass es eine besseres Nutzererlebnis mit sich bringt. Aber es ist ganz sicher auch nicht die Lösung für alle Bilder auf einer Website. Aufbestwebsite.gallery zeige ich z.B. keine Fotos. Ich zeige Screenshots von Websites. Es ist ein anderer Anwendungsfall und hier ist scrollen vollkommen OK und sogar erwünscht.

Das Problem ist, dass wenn wir an Responsive und Breakpoints denken, wir oft nur in der Horizontalen denken und selten vertikal. Ich kann es wohl auch an einer Hand abzählen wann ich mal intensiv mit vertikalen Breakpoints gearbeitet habe. Sollte man sich wohl öfters mal mit beschäftigen. Was meint ihr? Quatsch was ich hier schreibe oder nicht ganz so falsch? Und Ello war natürlich nur ein beliebiges Beispiel.

Die englische Version könnt ihr auf Medium finden: Content pictures… Please add a max-height: 90vh;