Content pictures…
Please add a max-height: 90vh;
(just an example ;)
Big pictures are cool BUT…
It’s very cool to add big picutes to websites. We all love this big pictures. Much more as the small ones like years ago. But hey, I’m sitting in front of an iMac with a 27 Inch screen. That’s a big screen and the resolution is bigger as the most users have. 27 Inch means I have a 1440px vertical pixels. My Google Analytics said (bestwebsite.gallery as example) that most of the users have 800–1080 vertical pixels. 800 pixels… round about 55 percent of my viewport height. That is much less!! MUCH LESS!!!
Why I write this post is simple. My account on Ello is now unlocked for version two. I clicked a bit through the new site and it’s cool. And Ello is a good example for this post. Minimalistic design with huge pictures. But It is not so cool that I cant see the whole picture mostly portrait mode pictures. A picture is a piece that I must see as a whole and not one third of it.
The picture lose his impact!
When I must scroll the picture to visit the whole image, it is not the right feeling to view a image. Imagine you are going into an Art exhibition and all the works of art hang on the wall. All fine at this point. But you are a small person, a child or whatever. And in front of the images is a little wall. And you are so small that if you want to see the whole picture you must jump. You must jump again and again… Is that how you want to look at an art work in a art exhibition? I think no, it’s not!
Back to the websites… Back to Ello…
Here is a screenshot from my profile on Ello. You see a picture on portrait mode and what you see? Right, not the whole image.
It is very simple to fix this problem. Just add one line css for images:
Sure, it is not a must to do that global. You can do it more specific. That’s just an example. I add this line on Ello via the dev tools and now it looks like this:
Much better right? No one wants to see cut off pictures! No, I dont run around with a wagging finger but I think it helps a lot to get a better user experience. And it is not the solution for all kind of images. But for photo it is a good or maybe the best solution. On bestwebsite.gallery I dont show photos. I show Screenshots from websites there. It’s another scenario and scrolling is ok for this usecase.
I think the problem is that when we think about responsive and breakpoints we just think in horizontal breakpoints and rarely in vertical breakpoints.
What you think? Bullshit? Right? ☺I hope my english is good enough that you can understand all well ☺And yes, Ello was a random example.
